CSS Social Widget V3

Kemarin saya pernah share Bubble Subscribe Widget dan cool buble subscribe widget. Kali saya akan share css social widget v3. Widget ini pada dasarnya sama dengan widget subscribe lainnya, namun hanya bentuknya yang berbeda. Selain itu beberapa tampilan warna menambah cantik widget ini untuk dipasang pada blog anda. Sekarang mari kita bahas cara membuat css social widget v3, ikuti langkah berikut.

Log in ke blogger
Klik Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<style type="text/css">
.btnt-chronicl-social{width:320px;margin:-10px}
.btnt-chronicl-social ul{margin:0;padding:0}
.btnt-chronicl-social ul li{list-style:none;padding:0;text-transform:none}
.btnt-chronicl-social ul li a{color:#fff;display:block}
.btnt-chronicl-social ul li a:hover{color:#c9c9c9;background-color:#333}
.btnt-chronicl-social ul li .rss{background:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size:20px; padding:17.5px 45px}
.btnt-chronicl-social ul li .twitter{background:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size:20px; padding:17.5px 45px}
.btnt-chronicl-social ul li .facebook{background:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size:20px; padding:17.5px 45px}
.btnt-chronicl-social ul li .google{background:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size:20px; padding:17.5px 45px}
.btnt-chronicl-social ul li .linkedin{background:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size:20px; padding:17.5px 45px}
</style>
<div class="btnt-chronicl-social">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/blogonol" target="_blank" title="my feeds">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/blogonol" target="_blank" title="my twitter">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/blogonol" target="_blank" title="my facebook">Find me on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/u/0/b/107364748346710480266/" target="_blank" title="my profile">Join me on Google+</a></li>
<li><a class="linkedin" href="http://in.linkedin.com/in/blogonol" target="_blank" title="my linkedin">Connect with me on LinkedIn</a></li>
</ul>
</div>

Ganti semua kode merah dengan cetak tebal dengan username anda
Klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"