Cara Membuat Kotak Langganan Via Email Dibawah Posting

Untuk melengkapi posting artikel sebelumnya yaitu :

• Mendaftar dan Mengaktifkan Email Berlangganan FeedBunner
• Modifikasi Kotak Berlangganan FeedBunner

Tidak lepas dari Email berlangganan, yang akan kita buat adalah Email berlangganan yang akan ditempatkan pada bagian bawah postinggan. Fungsinya tetap sama dengan widget berlangganan email lain cuma widget ini akan terlihat ditempat yang berbeda yaitu dibawah posting blog, jadi widget ini tidak akan terlihat dihalamn home page dan terlihat jika visitor melihat posting blog. Visitor akan membaca posting dan setelahnya jika visitor merasa artikel kita bermanfaat tentu mereka tidak akan ragu untuk mendaftarkan email mereka.

Berikut contoh Email Berlangganan Feedbunner dibawah postingan :

View Demo

Cara membuat kotak email berlangganan dibawah posting blog :

1. Masuk pada blogger.com
2. Pilih Template >>Edit HTML >> Lanjutkan
3. Centang Expand Template Widget
4. Cari kode ]]></b:skin>
5. Letakkan kode berikut diatas kode ]]></b:skin> :
   

   .kotakRSS1 {background-color: rgb(255, 255, 255); -moz-border-radius: 5px;-webkit-border-radius:5px; border: 1px solid #cccccc; padding:5px 10px; margin: 0 0 10px 0; } .Rssardi33 { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXvBK8qZ4H6DTvwVVYL4815KiFPwKn1KOkf_D5WidqKlxCPesFfF5kbH5meCaelI7sRuvM7EFmniRXHmA1EWHZdUxoVmvVoHNCmWS33qCIs7Pedf6pth1_a-vJuUqDF7iqVol3PEFejqM/s1600/maskolis.co.cc.jpg') no-repeat bottom right; } .Rssardi33 a { background: none;}  .inpRssardi33 { border: 1px solid #B9C1C6; width: 170px;height: 16px; font-size: 12px; padding:3px 4px 4px 10px;-moz-border-radius:5px;-webkit-border-radius: 5px;} .sbmtRssardi33 {background:#9b9b9b;border: 1px #9b9b9b solid;color:#FFF;font-size:13,5px;font-family:Arial,Tahoma,Verdana;margin-left:5px;padding:3px 5px 3px 5px;font-weight:bold;-moz-border-radius:7px;-webkit-border-radius: 7px;} .ardi33subs table {border-collapse: inherit; border: none;} .ardi33subs tr { border:0;} .ardi33subs td { border:0;} .ardi33subs th { border:0;} .clear { clear: both; }

6. Selanjutnya cari kode <data:post.body/>
7. Letakkan kode berikut dibawah <data:post.body/> :
   

   <!-- Script Artikel Berlangganan  -->
   <div class='kotakRSS1'>
   <div class='Rssardi33'>
   Jika Anda menyukai Artikel di blog ini, Silahkan <a href='http://feeds.feedburner.com/katakan-hey' target='_blank' title='Berlangganan'>
   <b>klik disini</b></a> untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di <font color='#0099DD'>B-digg </font>
   <div class='ardi33subs'>
   <table border='0' cellpadding='0' cellspacing='0' width='100%'>
   <tr>
   <td align='left' style='padding:5px 0 0 0;' valign='top' width='65%'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=diesilver&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:0px;padding:3px;text-align:center;' target='popupwindow'><div align='left'>
   <input class='inpRssardi33' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ketikkan email anda disini&quot;;}' onfocus='if (this.value == &quot;Ketikkan email anda disini&quot;) {this.value = &quot;&quot;;}' type='text' value='Ketikkan email anda disini'/>
   <input name='uri' type='hidden' value='katakan-hey'/>
   <input name='title' type='hidden' value='katakan-hey'/>
   <input name='loc' type='hidden' value='en_US'/>
   <input class='sbmtRssardi33' type='submit' value='Subscribe'/></div>
   </form></td><td align='left' style='padding:6px 0 0 0;' valign='top' width='35%'><a href='http://feeds.feedburner.com/katakan-hey'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/katakan-hey?bg=9b9b9b&amp;fg=fffffff&amp;anim=0' style='border:0' width='88'/></a></td></tr></table></div></div></div><div class='clear'/><!-- End Artikel Berlangganan -->

   
   *Ganti katakan-hey dengan id feedbunner Anda
   Tambahan :
   Untuk blog yang menggunakan readmore otomatis maka Anda akan menemukan 2 kode <data:post.body/>, letakkan kode diabaawah <data:post.body/> yang kedua.
8. Simpan Template dan Lihat Hasilnya

Sumber