B-digg - Tutorial Blogger dan SEO Blogger -
Cara Membuat Form Berlangganan Via Email Di Bawah Posting. Fasilitas form berlangganan via email sepertinya penting keberadaannya dalam suatu blog. Karena akan menambah jumlah pengunjung blog dan akan menciptakan pengunjung setia blog. Hal ini di karenakan jika pengunjung berlangganan artikel di blog kita, maka pengunjung akan menjadi pembaca setia blog kita.
Untuk menyediakan fasilitas ini anda bisa memanfaatkan fasilitas feed dari feedburner secara gratis. Bagi yang belum tahu cara mendaftarkan blognya di feedburner sobat bisa membaca artikel ini cara mudah mendaftar ke feedburner. Sobat sekalian pasti sudah banyak yang tahu tentang fasilitas ini. Fasilitas ini berfungsi untuk memberikan fasilitas kepada pengunjung yang menyukai artikel yang ada di blog kita dan ingin mendapatkan update artikel kita langsung ke kotak masuk email mereka.
Kali ini saya akan membahas
cara membuat form berlangganan artikel via email dibawah posting. kan kemarin saya sudah mosting tutorial tentang cara memodifikasi form berlangganan via email yang berada di sidebar. Nah sekarang saya akan membahas tutorial membuat form berlangganan artikel nya di bawah posting. Bagaimana dengan tampilannya? tenang saja tampilannya juga sudah saya modifikasi kok jadi kelihatan lebih menarik dan enak di pandang jika di pasang pada blog kita. Bagi yang mau lihat hasilnya silahkan lihat gambar di bawah ini.
Gambar form berlangganan via email di bawah posting (klik untuk memperbesar)
Bagaimana setelah melihat tampilannya? Apakah anda juga ingin memasangnya di blog anda? jika jawabannya ya, ikuti langkah-langkah berikut ini.
1.Log in ke blogger dengan akun blogger yang anda miliki.
2.Klik rancangan » edit HTML » centang kotak Expand Template Widget. Atau yang menggunakan tampilan blogger yang baru anda klik template » edit HTML » centang kotak Expand Template Widget.
3.Cari menggunakan control + f kode ]]></b:skin> dan letakkan kode di bawah ini persis di atasnya.
.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/AVvXsEhzR5amNnvgS2gzECfKa4sEqfm6BCLgJFLNXD323ffuEwn6mkytHGrrviXxb16VZBBnrc8fHy-Z-i9FYsfBlTk8wZ1PjkqMlsZo0H3v8hqVBD3K2EXhIXox5su7yXeJyJDK_BIGLbWpEyU/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; }
4.Sekarang cari kode <data:post.body/> jika ada dua pilihlah yang kedua dan letakkan kode di bawah ini tepat di bawah kode <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/B-digg-TutorialBloggerDanSeoBlogger' 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('http://feedburner.google.com/fb/a/mailverify?uri=diesilver', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='border:0px;padding:3px;text-align:center;' target='popupwindow'><div align='left'>
<input class='inpRssardi33' name='email' onblur='if (this.value == "") {this.value = "Ketikkan email anda disini";}' onfocus='if (this.value == "Ketikkan email anda disini") {this.value = "";}' type='text' value='Ketikkan email anda disini'/>
<input name='uri' type='hidden' value='B-digg-TutorialBloggerDanSeoBlogger'/>
<input name='title' type='hidden' value='B-digg-TutorialBloggerDanSeoBlogger'/>
<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/B-digg-TutorialBloggerDanSeoBlogger'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/B-digg-TutorialBloggerDanSeoBlogger?bg=9b9b9b&fg=fffffff&anim=0' style='border:0' width='88'/></a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class='clear'/>
<!-- End Artikel Berlangganan -->
Keterangan:
- Kode yang berwarna biru bisa anda ganti dengan kata-kata anda sendiri.
- Kode yang berwarna merah ganti dengan id feedburner anda.
5.Save template anda.
Kotak form berlangganan via email ini akan muncul di bawah postingan anda, dan bagi anda yang ingin menampilkan kotak form berlangganan via email ini muncul setelah read more maka anda tinggal menambahkan kode di bawah ini.
<b:if cond='data:blog.pageType == "item"'>
Kode form berlangganan via email
</b:if>Keterangan:
- Ganti kode yang bercetak tebal dengan kode form berlangganan via email yang ada pada langkah yang ke 4.
Sehingga setelah di tambahkan maka kodenya menjadi seperti ini.
<b:if cond='data:blog.pageType == "item"'>
<!-- Script Artikel Berlangganan -->
<div class='kotakRSS1'>
<div class='Rssardi33'>
Jika Anda menyukai Artikel di blog ini, Silahkan <a href='http://feeds.feedburner.com/B-digg-TutorialBloggerDanSeoBlogger' 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('http://feedburner.google.com/fb/a/mailverify?uri=diesilver', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='border:0px;padding:3px;text-align:center;' target='popupwindow'><div align='left'>
<input class='inpRssardi33' name='email' onblur='if (this.value == "") {this.value = "Ketikkan email anda disini";}' onfocus='if (this.value == "Ketikkan email anda disini") {this.value = "";}' type='text' value='Ketikkan email anda disini'/>
<input name='uri' type='hidden' value='B-digg-TutorialBloggerDanSeoBlogger'/>
<input name='title' type='hidden' value='B-digg-TutorialBloggerDanSeoBlogger'/>
<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/B-digg-TutorialBloggerDanSeoBlogger'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/B-digg-TutorialBloggerDanSeoBlogger?bg=9b9b9b&fg=fffffff&anim=0' style='border:0' width='88'/></a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class='clear'/>
<!-- End Artikel Berlangganan --></b:if>
Nah selesai sudah langkah-langkah
Cara Membuat Form Berlangganan Via Email Di Bawah Posting kali ini. Semoga bisa bermanfaat bagi anda.
