Cara Membuat Form Subcribe Keren Untuk Blog

Bloggervin.com - Oke pada kesempatan kali ini saya akan membagikan cara atau tutorial Membuat Form Subcribe Keren Untuk Blog, untuk hasilnya sendiri bisa anda lihat pada gambar di atas. keren bukan? oke langsung saja ke cara memasang Subcribe Form tersebut pada blog anda.

1. Buka Blog Anda, lalu pergi ke menu Template > Edit HTML
2. Letakkan Kode dibawah ini tepat diatas ]]></b:skin>

/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#222;overflow:hidden;border-top:4px solid #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#333;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#ff675c;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#ea5a50;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}

3. Selanjutnya Copy Kode dibawah ini ditempat dimana akan anda taruh Form Berlanganannya, bisa di Footer, Di bawah Posting atau posisi lainnya.

<div id='subscribe-css'>
<p class='subscribe-note'><span>SUBSCRIBE</span>
<span class='itatu'>TO</span> OUR NEWSLETTER</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=Bloggervin' class='subscribe-form' method='post' onsubmit='window.open (&#39;http://feedburner.google.com/fb/a/mailverify?uri=Bloggervin&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='Bloggervin'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>
</div>

Ganti "Bloggervin" dengan ID feedburner anda

4. Setelah Selesai Semua Silahkan Save Template dan lihat hasilnya 

Baca Juga : Cara Berhenti Mendapatkan Pemberitahuan dari Post Seseorang Di Facebook
Artikel Terkait : Cara Mengecek Kondisi Koneksi Melalui Perintah Command Prompt / RUN

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest