Cara Buat Subscribe Box Keren Di Bawah Postingan Blog ~ NaruZAF

Halo gays, kali ini saya akan berbagi Tutorial Blog perdana. Yang akan saya share yaitu cara membuat Subscribe Box. Ada banyak sekali cara para blogger mencari pelangganya. Salah satu caranya menggunakan Subscibe Box. Kenapa blog kita harus ada Subscribe Boxnya karena sangat membantu para pelanggan kita untuk mendapatkan artikel terbaru yang langsung terkirim ke email yang terdaftar.

Sebenarnya ada banyak sekali style subscribe box. Dan ada yang memasang Subscribe Box di bagian sidebar dan ada juga di bawah postingan. Untuk tutorial kali ini kita akan memasang di bawah postingan blog. Kali ini saya menggunakan style arlina. Lalu bagi mana cara membuat Subscribe Box... Simak tutorialnya.

Cara Buat Subscribe Box Di Blog

Masuk ke account blogger kamu. Lalu ke menu Template, pilih HTML.
Lalu cari kode berikut :

 <data:post.body/>

Kemudian copy code berikut dan paste tepat di bawah kode tadi.

 <div id='subscribe-box'>
<h4>Berlangganan via email</h4>
<div class='emailfield'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ArlinaDesign&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Alamat Email&quot;;}' onfocus='if (this.value == &quot;Alamat Email&quot;) {this.value = &quot;&quot;;}' type='text' value='Alamat Email'/>
<input name='uri' type='hidden' value='ArlinaDesign'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Submit'/>
</form>
</div>
</div>
<div style='clear:both;'/>

Setelah itu taruh kode ini tepat di bawah kode ]]></b:skin>.

 /* Subscribe Box */
#subscribe-box{background-color:#ffe4ad;margin:20px 0 0 0;padding:20px;overflow:hidden;border:8px solid #ebd099}
#subscribe-box h4{color:#827459;font-size:16px;margin-bottom:20px;text-align:center;text-transform:uppercase}
#subscribe-box .emailfield{margin:auto;text-align:center;}
#subscribe-box .emailfield form {margin:0;}
#subscribe-box .emailfield input{padding:12px;color:#bcc4ca;border:1px solid #ebd099;font-size:14px;margin-bottom:10px}
#subscribe-box .emailfield input:focus{color:#454545;outline:none;border-color:#d5bc88;}
#subscribe-box .emailfield .submitbutton{background-color:#f8695f;color:#fff;margin:0;font-size:14px;letter-spacing:.7px;text-transform:uppercase;cursor:pointer;border:0;transition:all .3s}
#subscribe-box .emailfield .submitbutton:active,#subscribe-box .emailfield .submitbutton:hover{background-color:#e0594f;color:#fff;}

Terakhir tinggal simpan template.

Demikian cara pasang Subscribe Box di bawah postingan blog. Semoga dapat bermanfaat. Happy Blogging Gays. Jika masih binggung silahkan berkomentar di kolom komentar. Dan jangan lupa Subscribe Blog ini agar mendapat notifikasi update terbaru.

Peringatan : Sebelum melakukan tutorial ini di sarankan Back Up template demi keamanaan jika terjadi eror.

NaruZAF