Posted by :
Arief Hilman Nugraha
Monday, January 14, 2013
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/Ariefhunterz"
imageanchor="1" target="_blank" rel="nofollow"><img border="0"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-Kt9qmDnX7YUmag5A8DzxY7k2Z0_h7JQ5pBjUq6DqDoOgqqgFtQNPdCjrkCqv99zTwdeYPnT6xpUpJmsN_0QPcfWTuo0Fj3ELKsYVCFTZBBs6bPHTf3fOt2S9RtJEgmQOE_cQcPfiHTBA/s1600/facebook-48.png"
/></a></div></td><td><div
class="subicons"><a class="Fadeout" href="http://twitter.com/Ariefhunterz"
imageanchor="1" target="_blank" rel="nofollow"><img border="0"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Z84TRxtmh_MTjFZt2apZM91iPRh_ulTgbOzAzk-hXE5__X4QRIllCFvvSSleyFK8qPKLNPToU8LJByaPm6-OfmZe9xMaA0IT-_xb2EB6H023ZE0iVFCnmeyxvRBT6HXJIkmQzTX86QUp/s1600/twitter-48.png"
/></a></div></td>
<td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/Ariefhunterz"
imageanchor="1" target="_blank" rel="nofollow"><img border="0"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcLrKnKElsAvxdY8hw8pYRGBZChYcHF6kyCbaEND_LAZqUtxb1_XhuBLMa1ghXQ8if5Br0FbuOIZ2Vy5JyMs7gucgBC8UbMYPfHpYoF_2ptnFsqAe6aU6JN4PDk1mZsDMGTJr_SDkFQABS/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/AVvXsEhWeaQ5kxsAD2-100MCxKF_Q9TsdvjcpixYGMkxnsTO9Z-fizwFK_cORwXVqvuYbgr2TdN2LCF8J1Th_GUVL9JIcpPNfnzX4g8cJdER4kWATCx_PmeBBf4fLZG7zSsMn0DYbq3oMtgzLLUZ/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/Ariefhunterz"><img src="http://feeds.feedburner.com/~fc/Ariefhunterz?bg=FF6600&fg=444444&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('http://feedburner.google.com/fb/a/mailverify?uri=Ariefhunterz',
'popupwindow',
'scrollbars=yes,width=650,height=570');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.blogtrikdantips.blogspot.com">Blogger Widgets</a>
</div>
4.
Gantilah kode berikut ini:
http://www.facebook.com/pages/Ariefhunterz dengan fanpage facebook anda.
http://twitter.com/Ariefhunterz dengan halaman twitter Anda.
http://feeds.feedburner.com/Ariefhunterz dengan feedburner link anda.
https://plus.google.com/xxxxxxxxx/posts dengan halaman + Google Anda.
Ariefhunterz (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!
