Cara Membuat Subscribe Box Di Blog Blogger

Subscribe box atau kotak berlangganan merupakan suatu fitur dari blog yang memudahkan pembaca untuk mengikuti artikel blog terbaru dari blog yang di subscribe.
Biasanya subscribe box ini diisi email oleh pengunjung yang menginginkan berlangganan artikel terbaru dari suatu blog.

Lihat Juga: Cara Membuat Mode Gelap, Malam, Night Pada Website Blog

Fungsi dari subscribe box ini sama dengan subscribe di youtube yaitu memebrikan pemberitahuan apabila terdapat konten terbaru, bedanya subscribe blog akan memberitahukannya melalui Email.

Cara membuat kotak subcribe email blog ini akan bisa kalian pasang jika sudah memiliki ID Feedburner. Jadi silahkan daftar feedburner dulu.

Berikut Cara membuat koat berlangganan pada blog

1. Masuk Blogger > Tema > Edit HTML
2. Carilah tag </head> dengan keyboard CTRL + F
3. Copy kode CSS dibawah dan paste tepat diatas tag </head>

<style type="text/css">
/* Subscribe Box */
#subscribe-kenny{position:relative;padding:20px 0;background:darkviolet;overflow:hidden;border-top:4px solid #eee:none}
.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-kenny-email-field{background:#000;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-kenny-email-field:focus { background: white;}
.subscribe-kenny-email-button{background:#5a0047;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-kenny-email-button:hover{background:#5a0047;}
#subscribe-kenny p.subscribe-ken-note{margin:16px;text-align:center;color:#000;font-size:180%;font-weight:400;line-height:normal;}
#subscribe-kenny p.subscribe-ken-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-kenny p.subscribe-ken-note span.note {font-weight:400;font-style:italic;color:#fff;text-transform:lowercase}
#subscribe-kenny p.subscribe-ken-note span.note:before,#subscribe-kenny p.subscribe-ken-note span.note:after{display:none}
#subscribe-kenny p.subscribe-ken-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:#fff;transition:all .5s}
#subscribe-kenny:hover p.subscribe-ken-note span:before{width:100%;}
@media screen and (max-width:768px){
#subscribe-kenny p.subscribe-ken-note{margin:0 0 20px 0;width:100%;}
.subscribe-wrapper {width:100%;}
}
@media screen and (max-width:640px){
#subscribe-kenny p.subscribe-ken-note{font-size:140%}
form.subscribe-form{padding:0 10px}
.subscribe-kenny-email-field,.subscribe-kenny-email-button{padding:15px 0;text-align:center;margin:10px 0;width:100%}
}
</style>

4. Lalu Copy kode HTML di bawah dan paste di atas tag <footer> (Rekomen), atau di tempat lain juga bisa.

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

Catatan: Perhatikan tulisan GANTI_DENGAN_ID_FEEDBURNER_KALIAN silahkan ganti dengan ID fedburner kalian sendiri agar kotak subscribe ini bekerja.

5. Selesai.

Begitulah cara mudah membuat kotak subscribe blog menarik. Tutorial ini kenny tidak jamin akan sukses disemua template, jadi lakukan preview terlebih dahulu dan backup kode template sebagai cadangan jika tedapat error.
Terima kasih telah berkunjung.