Membuat Email Subscription dengan Icon Bergambar Sketsa

Saya biasanya suka bermain-main dengan widget blogger dan paling menarik adalah menggabungkan elemen satu dengan yang lain. Kebetulan kali ini saya akan membuat widget berlangganan yang iconnya merupakan hasil gambaran tangan. Widget ini juga dilengkapi dengan tombol social media seperti facebook dan twitter. Serta tidak lupa dilengkapi juga dengan Feedburner untuk tombol berlangganan. Widget ini dapat menjadi perhatian khusus buat blog anda sehingga mendorong orang untuk berlangganan. Proses pemasangannya cukup mudah, tidak perlu mengedit HTML dari template Anda. Berikut ini caranya:

1. Masuk ke Rancangan --> Elemen Laman
2. Tambahkan Gadjet pilih HTML/Javascript
3. Masukan kode dibawah ini:

<style class="text/css">
table
{
border-bottom: 1px solid #E6E6E6;
float: center;
width: 280px;
margin:10px 0 0 20px;
}
.subicons
{
border-right: 1px solid #E6E6E6;
}
.Fadeout {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}
.Fadeout:hover{
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
</style>
<div class="table">
<table>
<tr>
<td><div class="subicons"><a class="Fadeout" href="http://www.facebook.com/pages/Blognewbie" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnJT9aaecuDsIjLxjKvoAv2gT-uqsEr0pEdjwgCrpiZ3TO7B8vpBYKf_sa4GaClyg6nqU_EP63fGOSnQke7CfWRlIc3X2fnMUwT9IwqSZnTfyalufY1zi2cKImv2OSLY0dawg7Brrmt5Hb/s1600/facebook-48.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="http://twitter.com/Blognewbie" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Ozin7DiHMaSlaWdJ8AtPmUkvBoF1cIm0d-x2hgAssb0TnwiNB2Wdfl4qTeXpK62cMll5jIt9I32Mspna-rbmeT2l77a0xcfqPaKyMsOeyxYBx9ySoL0PZnHDlJ_piqNUmlDgR5jr4ThE/s1600/twitter-48.png" /></a></div></td>
<td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/Blognewbie" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNiKSoVXr3PAYOcRuuZmiQMCYW2p1XGWQM3JUc7tfi7LFXK_AMJiO2YS2egfsfqZztZEaK82wQi9R62uiw54ucltom6zvP_noXA1ed-vrxSJS4caLsaFgHxveRpyROZusDp42SzNqHjGaJ/s1600/rss-48.png" /></a></div></td>
<td><a class="Fadeout" href="https://plus.google.com/xxxxxxxxx/posts" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDX_TwKWkpegM32aRDNINKqPo4Ur4dXH0n4x3d4FCeK-9u6IeZ2SsnYcwzR4C3t4qxrYyKFWF73s57zHKmjV33-hom4Fug-WZRUxoN4y7z3vGQ8gL0gknKsVZjllBMziSDeyHDN4hanl8A/s1600/google-48.png" /></a></td>
</tr></table>
</div>

<style>
.rssbuttontable
{
border: 1px solid #E6E6E6;
background: #FFDCB1;
float: center;
width: 270px;
margin-left:10px;
padding: 5px 5px 5px 5px;
border-radius: 5px;
-moz-border-radius: 5px;
height: 35px;
float: left;
display: inline;
margin-top:5px;
margin-bottom:5px;
}
input.Subscriberssbutton
{
background:-moz-linear-gradient(top,#F88017 0%,#FF6600 100%); background:-webkit-gradient(linear,left top,left bottom,from(#F88017),to(#FF6600));
border: 1px solid #FF6600;
text-transform: none;
font:bold 13px arial;
color: #fff;
height: 30px;
padding: 4px 2px 5px 2px;
margin: 0px 0 0x 0px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor:pointer;
display: inline;
}
</style>
<table class="rssbuttontable">
<tr>
<td>
<a rel="nofollow" href="http://feeds.feedburner.com/blognewbie"><img src="http://feeds.feedburner.com/~fc/blognewbie?bg=FF6600&amp;fg=444444&amp;anim=1" height="26" width="88" style="border:0" alt="" />
</a>
</td>
<td>
<input value="Subscribe to Get Updates" class="Subscriberssbutton" type="button" onclick="window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=blognewbie&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=650,height=570&#39;);return true" /></td></tr></table>
<style class="text/css">
.grablink
{
link-color:#0084CE;
font-size:12px;
text-align:right;
text-weight:italic;
}
</style>
<div class="grablink">
<a href="http://www.ko2.blogspot.com">Blogger Widgets</a>
</div>

4. Gantilah kode berikut ini:

http://www.facebook.com/pages/blognewbie dengan fanpage facebook anda.
http://twitter.com/blognewbiel dengan halaman twitter Anda.
http://feeds.feedburner.com/blognewbie dengan feedburner link anda.
https://plus.google.com/xxxxxxxxx/posts dengan halaman + Google Anda.
blognewbie (dari bagian bawah kode di atas) dengan id feedburner Anda.

5. Klik simpan.

Cobalah anda lihat hasilnya pada blog. Hasilnya yang pasti akan sangat menarik. Semoga posting ini bermanfaat...selamat mencoba!