Cara Membuat Widget Subscribe Box di Bawah Postingan Blog

Ada beberapa cara yang bisa dilakukan admin blog untuk menjaring calon reader. Salah satunya adalah dengan menggunakan subscribe via email atau berlangganan update melalui email.

Manfaat dan cara membuat widget subscribe

Manfaat yang didapat bagi reader adalah mendapatkan informasi update setiap kali blog membuat postingan atau artikel baru. Sebaliknya, bagi admin merupakan kesempatan untuk mendapatkan kunjungan trafik yang lebih baik. Sebab tiap artikel yang diposting secara otomatis akan dibagikan menuju ke email para reader.

Selain itu, terdapat aneka ragam cara membuat kotak subscribe ini. Dalam blog tutorial ini pun telah memposting setidaknya tiga postingan yang berkaitan dengan subscribe ini. Selengkapnya silakan simak:

• Membuat Widget Keren Subscribe Blog

• Membuat Widget Subscribe Atraktif pada Postingan Blog

Khusus untuk widget subscribe kali ini, akan saya share widget subsrcribe box di bawah setiap postingan. Contoh hasilnya adalah seperti pada gambar di atas. Berikut tahapannya.

1. Masuk ke akun blogger, lalu menuju ke Template, pilih HTML.

2. Copy kode script berikut, lalu pastekan tepat di bawah kode <data:post.body/>.

<style> #mbt-sub-box{background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1a2638));;border:1px solid #1A2638;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #333, #1a2638)}#mbt-sub-box h1{margin-top:5px; color:#FFF;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}#mbt-sub-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}#mbt-sub-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));background: -moz-linear-gradient(center top , #369A18, #205F0D) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}#mbt-sub-box .submit:hover{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}#mbt-sub-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent} </style>
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='mbt-sub-box'><h1>Berlangganan Update Tutorial Gratis</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=tutorialngeblogging&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email Address...&quot;;}' onfocus='if (this.value == &quot;Enter Your Email Address...&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='Enter Your Email Address...'/> <input name='uri' type='hidden' value='tutorialngeblogging'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='Subscribe'/></center></form></div> </b:if>

Keterangan:

Ganti kode 'tutorialngeblogging' didapatkan melalui Google feedburner pada menu Edit feed details. Sedangkan tulisan warna biru yang lain, silakan dirubah sesuai kebutuhan.

Catatan: biasanya kode <data:post.body/> terdapat lebih dari satu. Silakan pilih salah satu yang ada kaitannya dengan artikel body. Atau boleh dicoba satu persatu dengan memantau hasilnya melalui Preview template.

Jika telah sesuai, klik Save template.

Selamat, kini di tiap postingan blog sahabat telah memakai widget subscribe box.

Demikian artikel membuat widget subscribe kali ini. Semoga bermanfaat dan selamat mencoba.