cara membuat widget subscribe di blog

Cara membuat widget subscribe di halaman blog lengkap dengan sosial media dan feedcount membuat halaman blog anda semakin lebih interaktif dan lebih ramah terhadap pengunjung sebab anda memudahkan pengunjung anda untuk mendapatkan free Update artikel dari blog anda. Tampilan widget ini lumayan menarik baik itu sistem warnanya sangat berfariasi. Widget ini menganut penulisan tag SEO Friendly , bila berbicara dengan HTML 5 masih memiliki error yaitu feedcount pada tutorial ini belum valid karena masih memiliki kode feedcount lama, bila anda memakai kode feedcount valid html 5 maka semua kode widget ini valid html 5. Oke langsung saja menuju TKP dan lihat gambar tampilannya dibawah ini :

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 atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda

/*****************************************
Name : Subscribe Box
By : Rivai Silaban | Blog Design
Update : 22/08/2013
******************************************/
#bdrs-scribe{
width:290px;
color:#000000;
padding:20px;
font-size:14px;
margin-bottom:5px;
border-radius:5px;
border: dashed #999999 1px;
background-color: #ECECDD;
height: 125px;
}
#bdrs-scribe .bbrs-title1 { margin-bottom:10px;margin-top:-10px; }
.bbrs-title1{
margin-left: 8px;
font-size:25px;
font-weight:bold;
border-radius:5px;
padding:1px 8px 2px 8px;
text-align:center;
color:#FF0000;
text-shadow: 0 1px 1px #000;
font-family: Georgia, "Times New Roman", Times, serif;
}
.bbrs-title {
font-family:Georgia, "Times New Roman", Times, serif;
color: #666666;
font-size: 12px;
font-style: italic;
text-align: center;
margin-bottom:7px;
margin-top:-5px;
}

#bdrs-button {
width:100px;
left:140px;
margin-top:-30px;
}
.bdrsbox-email{
color:#999999;
font-size:14px;
border: solid 1px;
border-radius:5px;
outline:none;
padding:0px 15px;
height:30px;
background-color: #DDF5F7;
box-shadow: 0 0 3px #333 inset;
border-color: #990000;
width: auto;
}
.bdrs-sosial{
margin-top:15px;
text-decoration: none;
width: 200px;
}
.bdrs-button {
margin-left:40px;
margin-bottom:0px;
border: none;
color: #fff;
text-transform: uppercase;
font-size: 13px;
padding: 5px 18px;
border-radius: 3px;
cursor: pointer;
background-color: #0099FF;
float: right;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
border:solid #333333 1px;
}
.bdrs-button:hover {
color: #CCCCCC;
background-color: #0066FF;
box-shadow:0 1px 2px #333;
border:solid #333333 1px;
}/*** Blog Design CSS and ***/

Install Program Tag HTML

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• Untuk memasang kode htmnya anda dapat memasangnya dimana saja. Untuk tutorial kali ini saya memasangnya di widget sidebar halaman blog.
• Silahkan pilih " Tata Letak " pada dasbor blog anda.
• klik "Add gadget " ( Tambahkan gadget )
• Setelah muncul halaman gadget silahkan pilih " HTML/JavaScript ".
• Copy kode didalam spoiler dibawah ini kemudian pastekan di gadget anda.
• Edit script dan save .

<div id="bdrs-scribe">
<div class="bbrs-title1">
Get Email Updates
</div>
<div class="bbrs-title">
Dapatkan update artikel terbaru dari kami, silahkan daftarkan email anda disini !!
</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onSubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><div>
<input class="bdrsbox-email" name="EMAIL" onBlur="if(this.value=='')this.value=this.defaultValue;" onFocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Your email address" />
<input name="submit" type="submit" class="bdrs-button" id="bdrs-button" value="Subscribe" title="submit" />
<input name="uri" type="hidden" value="ID FEEDBURNER" />
<input name="loc" type="hidden" value="en_US" /></div>
<div class='bdrs-sosial'>
<a href="LINK TWITTER " target="_blank" title="Twitter">
<img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1DlY-vpKsva2oPkFLqbs6I2T5gbHS3m9wNYBmfbUU6Q59DqTDDABR57tQ6W-4x5urzYn4OAzlfCS0Nrvt2yW_C4zYxyQlcRd8Ee9RgGU6xyXaQzhMnJW3WrTZrF1ygd9BVF6W8ssq0nA/s1600/T.png" style="height: 25px; width: 25px; padding-right: 5px;" /></a>
<a href="LINK RSS " target="_blank" title="Subscribe Via RSS">
<img alt="rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2j96YVAYE7G0qbAKYwGYmnztlo10G0DYgZA_f5Q1cah37OByj1GT2jvoHDpbfIUiGrWDDDHgXtDaHkSa4N6gGDi_U9blvmOp6VHLVhV_8aKcIO0BIA9yrmEirgGSKbHIoU0ePgkK2ZAY/s1600/RS.png" style="height: 25px; width: 25px;padding-right: 5px;" /></a>
<a href="LINK FACEBOOK " target="_blank" title="facebook">
<img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivWTAOwYk341Xx8Pu1G2AQsnu-r7ctbIPF1wnQfE63SmiF_9Y0rlG1hnXIU-smvJmFRqFO1U1eOXAbxFVcot5mIOw1J2Ib1DJfYTmgne1m8RCRB0Y0PDZwf-sXXJ0CkPluGoaPgFl5jBY/s1600/F.png" style="height: 25px; width: 25px;padding-right: 5px;" /></a>
<a href="LINK GLUS " target="_blank" title="gplus">
<img alt="gplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_pmwvAjrNEyXCZi99P908ozuTJqmPK4DLLrB7e5oe4P80AbHbPDV6jbiE86SNnW65qe3RcR6sYV9mMcIGDYyQPh49PJyhupmNQpefZVTCxBcVgkkfT15It9F-bXKA0XVAYymeJmvlos8/s1600/G.png" style="height: 25px; width: 25px;padding-right: 5px;" /></a>
<a href="LINK YOUTUBE " target="_blank" title="youtube">
<img alt="youtube" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgufkHpWUDNtF7CCg2KwVq3Qu4VXFFMkolqEtML0YsyZYdebwLmCxIOsaxry7SV22sJa-lFT0xg2rrPWaM2FgsjhT_aXQqUVIBrF0r2z3yNFa039SlcGl1fpN1CcuyVB8n2FCfnmA1RTX8/s1600/Y.png" style="height: 25px; width: 25px;padding-right: 5px;" /></a></div>
<div style="float:right; margin-top: -30px;"><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="reads"/> </a></div>
<div class="clr"></div></form></div><br />
<!-- Rivai Silaban | BLOG DESIGN Subscribe box End -->

Keterangan Code

• Untuk kode CSSnya warna hijau [ 290px ] sesuaikan dengan lebar tampilan sidebar halaman blog anda silahkan anda edit CSSnya sesuai dengan thems template anda.
• Untuk tulisan warna HIJAU adalah text judul widget
• Tulisan kode warna MERAH ganti dengan URL blog anda, sesuai dengan tutorial
• Kode tulisan warna BIRU ganti dengan link feedcount anda
  

Kesimpulan

Buat para bloger mania widget seperti ini sudah menjadi kebutuhan bila ingin bloging, Membuat widget widget yang bermanfaat untuk peningkatan trafik sudah menjadi pilihan para bloger, apalagi widget tersebut sudah dipadu dengan berbagai widget lainnya untuk keperluan bloging pastinya lebih simpel dan tidak memakan tempat pada halaman blog.

Untuk membuat widget ini valid HTML 5 anda harus memiliki kode feedcount anda sendiri yang valid HTML 5 sebab pada tutorial ini saya masih memakai kode feedburner bawaan yang lama ( belum valid HTML5 )

Widget Subscribe with Social media and feedcount
22 Agustus 2013

By : Admin Blog Design

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:29 PM