Cara Membuat Kotak Berlangganan Keren di Blog

Cara Membuat Kotak Berlangganan (Subscription Blog) yang Keren dan Responsive pada Blog - Kotak berlangganan sangatlah penting bagi blog, terutama blog yang mempunyai trafik tinggi. Kotak berlangganan ini dapat membantu dan meningkatkan jumlah pembaca, karena jika ada pengunjung yang mengisi email pada kotak berlangganan ini, maka orang tersebut akan mendapatkan informasi tentang artikel terbaru di blog sobat.

Widget ini saya dapatkan dari blognya mbak Arlina. Langsung saja ke cara pemasangan widget kotak berlangganan ini:

Pergi ke Blogger.
Masuk ke menu Template.
Pilih Edit HTML.
Tambahkan kode CSS di bawah ini dan paste sebelum kode ]]></b:skin> atau </style> (warna bisa sobat atur sendiri susuai selera)

/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#B22222;overflow:hidden;border-top:4px solid #eee;}
.subscribe-wrapper{color:#374760;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:#800000;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#3cc091;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:#37b185;}
#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%;}

Selanjutnya tambahkan kode HTML ini di antara tag pembuka <body> dan tag penutup </body>. Jika seperti blog ini yang terletak di footer, maka tambahkan kode berikut di bagian bottombar.

<div id='subscribe-css'>
<p class='subscribe-note'><span>SUBSCRIBE</span> <span class='itatu'>TO GET</span> FREE UPDATES!</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=PasuruanCommunity' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=PasuruanCommunity&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='PasuruanCommunity'/><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>

Jangan lupa untuk ganti kode yang ditandai PasuruanCommunity dengan ID feedburner blog sobat.
Simpan template dan lihat hasilnya.

Jika ingin di pasang di bawh postingan, bisa paste kode HTMLnya di bawah widget share atau sebelum related-post. Sekian posting tentang Cara Membuat Kotak Berlangganan Keren di Blog. Terima kasih sudah berkunjung semoga bermanfaat.