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/AVvXsEi_n31EVjQtEGwYrWnH-rnbjKXgtsVQHYZvpObZaMD3rIZRjuDtm7clKN8lZeLQPht3W6w2-e1SSCSN41KWN7UDvIwnvNL8pmtcg1-Uu8rTTb1yr6_vlAPHWsh6b10onhuzE_sBTT9uwGw/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/AVvXsEiuuu4htRS570DpwIjNV423DPwV4r8_NAicFYRNfEnaL6HOp8fAStK9bftucmRn186w7O9Jk2KEDw8oP32xK52IP3MsZoJGg1PaBXShcwC9wjm8G9iRYesfDd6u-yAmrGJaTpsO0XcfoMQ/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/AVvXsEiYHc2EVbJN-Csxp-xlTwTHQTiEFtXDLZajaYTGkSmeUO7jutYQovnEj7pva25S4pHrwKAcPX9mOxUgmkWJ0fTiwBltVVqvMoB0B7x8USVqrcBAFd9xq_1y4cpd18nZms_j3NbX1ki_1Ps/s1600/F.png" style="height: 25px; width: 25px;padding-right: 5px;" /></a>
<a href="LINK GOOGLEPLUS " target="_blank" title="gplus">
<img alt="gplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZMlB9pjXISAKZ-9M1GOLToBbzzQAoIAdMjTwmNEyXmsHxecqINmkLTHouDA_P1_ZzgNfI690H83PlGP9Q6kSaJAzObbdZGp4v_Ns_GHeMK_6qVwYg60YAZ1FXfrZkv-PMBeaIka-P2io/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/AVvXsEg2IPR5rqM1_aSwKUI9GQF9Xuweo8_ve7ra4iwDU-TQBNX1mpOPXBbHJbM-mLgxoo0dManGjbi3K1eY1ueCYsyV8f3Swc_ab_I8kj-_Z8Bin7TrCafuyOdWgkYKKA9WSbOvTI_klnNsoOg/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

sumber :  http://rivai-silaban.blogspot.com/

Tweet