Cara Menciptakan Widget Subscribe Box Di Bawah Postingan Blog

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

Manfaat dan cara menciptakan widget subscribe

Manfaat yang didapat bagi reader yaitu mendapat isu update setiap kali blog membuat postingan atau artikel baru. Sebaliknya, bagi admin merupakan kesempatan untuk mendapat 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 menciptakan 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 karenanya yaitu menyerupai pada gambar di atas. Berikut tahapannya.

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

2. Copy instruksi script berikut, kemudian 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 instruksi 'tutorialngeblogging' didapatkan melalui Google feedburner pada sajian 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, sekarang di tiap postingan blog sobat telah menggunakan widget subscribe box.

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

Tweet