Posted by : Arief Hilman Nugraha Senin, 14 Januari 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="http://3.bp.blogspot.com/-czBbDmQRQhQ/TvCTKhaK4zI/AAAAAAAAAZY/E_fHny3fDBs/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="http://4.bp.blogspot.com/-k5cV1pvQp4g/TvCTMHqoxZI/AAAAAAAAAZs/hYpUi-qzKaw/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="http://1.bp.blogspot.com/-tANmA_fOkTk/TvCTLg2BGvI/AAAAAAAAAZk/vE6qGJK50t8/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="http://3.bp.blogspot.com/-H-LHpGxfe5k/TvCTLL3ovmI/AAAAAAAAAZc/AT2pMexo7RE/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&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=Ariefhunterz&#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.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!

Leave a Reply

Subscribe to Posts | Subscribe to Comments

Welcome to My Blog

Guilty Ghost

Guilty Ghost
Haking Tips , Tips Dan Trick , dll Disini Tempatnya

Berlangganan Lewat Email

Subscribe via Email

Jam

Lagu

Total Pageviews

Arief Hilman Nugraha. Diberdayakan oleh Blogger.

- Copyright © Arief Hilman Nugraha - Robotic Notes - Disponsori Oleh Blogger - Editing by Arief Hilman Nugraha -