cara membuat subscribe box di halaman blog

Subscribe box di bawah postingan halaman blog menambah kesan keramahan blog anda terhadap pengunjung. Disamping tampilan yang terlihat elegan pada halaman blog anda subscribe box ini juga akan menambah interaktiv pengunjung terhadap halaman blog anda. Pengunjung halaman blog juga dapat mendaftarkan emailnya untuk berlangganan Update artikel terbaru dari semua artikel yang anda posting. Disamping form subscribe, saya juga menyematkan beberapa tombol sosial media dan berbagai aplikasi lainnya.

Fitur Aplikasi

1. Form Subscribe
2. Sosial media
3. Feedcount feddburner

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi
   

/*****************************************
Name : Subscribe box
By : Rivai Silaban | Blog Design
Update : 13 agustus 2013
Lisensy : Commont 3.0
******************************************/
.BD-boxrss {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeDq52rWhgSslt0lTRjxNLI_jmt3299TRhjB0ky2Dkl66n2IBdX5sdigQQh6f2Sz3ZqQ6rtObG7GGDIgPvjEPqPW60n8pp8STRkxtJFLnKUK2MMtVM6ru3lWUXiRPQ9QieoYqMLO1_ZKk/h120/rss-bulat.png') no-repeat right bottom;
width:550px;// ukuran lebar kotak
background-color: rgb(255, 255, 255);
border-radius:5px; border: 1px solid #cccccc;
padding:5px 10px;
margin: 0 0 10px 0;
color: #000000;
}
.BD-text {
color:#333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;padding: 0 15px 0 0;margin-right:20px;
}
.BD-sosial a {
background-color:#EFEFEF;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-size: 13px;
color: #6C0000;
font-weight: bold;
text-decoration: none;
padding:5px 10px;
margin-right:5px;
border: solid #B2B2B2 1px;
margin-bottom:5px;
text-shadow: 0px 1px 0px #111;
}
.BD-sosial a:hover {
background-color:#FFFFFF;

color: #333333;text-shadow: 0px 1px 0px #111;

border: solid #666 1px;box-shadow:0 0 2px #666;
}
.BD-input {
border: 1px solid #B9C1C6;
width: 170px;
height: 25px;
font-size: 12px;
padding:3px 4px 4px 10px;
border-radius: 5px; background-color: #F4F4F4;
}
.BD-input:hover {
border: 1px solid #B9C1C6;
background-color: #FFFFFF;
}
.BD-submit {
border: 1px #000 solid;
color:#E4E4E4;
font-size:13px;
font-family:Arial,Tahoma,Verdana;
margin-left:5px;
padding:3px 5px 3px 5px;
font-weight:bold;
border-radius:7px;
background-color: #666666;
text-transform: uppercase;
text-shadow: 0 2px #000;
}
.BD-submit:hover {
color:#FFFFFF;
background-color: #666666;box-shadow:0px 0 2px #333;border: 1px #fff solid;text-shadow: none;
}
/*****CSS Subscribe Box Rivai Silaban End******/

Install Program Tag HTML

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• Cari code
  <div class='post-footer-line post-footer-line-2'/>
  atau Kode
  <div class='post-footer-line post-footer-line-3'/>
• Copy kode dibawah ini pastekan tepat dibawah code diatas.
  Bila anda pastekan dibawah code <div class='post-footer-line post-footer-line-2'/> tidak berhasil silahkann ganti dengan code <div class='post-footer-line post-footer-line-3'/>
• Untuk script post snippet silahkan pastekan kode dibawah ini tepat dibawah kode <data:post.body/>
• Save template anda dan lihat hasilnya, selamat berkreative.

<!-- Script Subscribe box BDRS Start -->
<div class='BD-boxrss' >
<div>
<div class="BD-text"> Jika Anda menyukai Artikel di blog ini, Silahkan
<a href='Link feedburner anda' target='_blank' title='subscribe'>
<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='#990000'>
Blog Design
</font></div><div>
<div style='padding:5px 0 0 0; text-align: right;' >
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=RivaiSilaban&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='BD-input' 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='ID FEEDBURNER ANDA'/>
<input name='title' type='hidden' value='ID FEEDBURNER ANDA'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='BD-submit' type='submit' value='Subscribe' title="subscribe"/>
<span style="padding:0 70px 0 0; width: 35px; float: right;margin-right:150px"><a href='http://feeds.feedburner.com/RivaiSilaban'><img alt='feedcount' height='26' src='http://feeds.feedburner.com/~fc/RivaiSilaban?bg=660000&amp;fg=99FF00&amp;anim=1' style='border:0' width='88' title="feedcount"/></a></span>
</div> </form></div></div> </div>
<div class="BD-sosial" style="margin-bottom:10px;">
<a href="LINK GPLUS ANDA " target="_blank" title="gplus">Gplus</a>
<a href="LINK FACEBOOK ANDA " target="_blank" title="facebook">Facebook</a>
<a href="LINK TWITTER ANDA " target="_blank" title="twitter">Twitter</a>
<a href="http://www.blogger.com/follow-blog.g?blogID=ID BLOG ANDA " target="_blank" title="follow">follow</a>
<a href="LINK KONTAK ANDA " target="_blank" title="contact">Contact</a>
</div></div> <div class='clear'/> <br />
<!-- Script Subscribe box BDRS End -->

Keterangan Code

• Untuk kode CSS silahkan anda edit sesuai dengan kebutuhan anda, sesuaikan ukuran lebar box subscribe pada kode CSS warna merah.
• Untuk tag Htmlnya silahkan ganti kode tulisan warna HIJAU dengan text anda.
• Tulisan kode warna KUNING silahkan ganti dengan nama blog anda.
• Untuk tulisan warna BIRU silahkan ganti dengan feedcount feddburner anda.
  Silahkan kunjungi halman cara membuat feedcount di halaman blog silahkan KLIK DISINI
• Untuk Tulisan warna MERAH silahkan ganti dengan link anda sesuai dengan yang tertulis di kode tersebut.
• Untuk ID BLOG ANDA silahkan ganti dengan nomor ID blog anda
  Kunjungi halaman cara mengetahui ID blog halaman KLIK DISINI

Kesimpulan

Subscribe Box ini SEO Friendly dan memiliki kode CSS dan HTML yang ringan dan tidak mempengaruhi loaidng blog anda. feedcount feedburner masih belum valid HTML 5, kode yang lain sudah valid HTML 5

Subscribe box ini dapat anda gunakan untuk meningkatkan trafik pengunjung blog anda karena mempunyai sistem subscribe yang sudah otomatis. Artikel yang telah anda update akan terkirim oleh jasa Feedburner.

Silahkan edit semua kode sesuai dengan kebutuhan halaman blog anda. Bila anda mengalami masalah silahkan share bersama saya melalui form komentar dibawah halaman. Salam bloger semoga artikel ini bermanfaat buat anda.

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 4:44 PM