Latest News

Cara Membuat Widget Subscribe Box di Bawah Postingan Blog


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

Manfaat dan cara membuat widget subscribe

Manfaat yang didapat bagi reader yaitu menerima info update setiap kali blog membuat postingan atau artikel baru. Sebaliknya, bagi admin merupakan kesempatan untuk menerima 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:
Khusus untuk widget subscribe kali ini, akan saya share widget subsrcribe box di bawah setiap postingan. Contoh karenanya yaitu menyerupai pada gambar di atas. Berikut tahapannya.
1. Masuk ke akun blogger, lalu menuju ke Template, pilih HTML.
2. Copy isyarat script berikut, lalu pastekan sempurna 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 isyarat 'tutorialngeblogging' didapatkan melalui Google feedburner pada menu Edit feed details. Sedangkan goresan pena 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 karenanya melalui Preview template.

Jika telah sesuai, klik Save template.

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

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