Cara memasang Multi Warna Social Bookmarking Widget

بِسْــــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Assalamualaikum Wr.wb

Saya akan share Cara untuk memasang Social Bookmarking Widget untuk blogger yang memiliki fitur unik dan menarik bagi pengunjung dengan multicolor dan efek mouse hover hitam ketika di sentuh widgetnya oleh pointer mouse widget ini hanya dibuat dengan menggunakan CSS dan HTML dan beberapa gambar sehingga widget ini tidak akan mempunyai kesalahan dalam memasang dan juga bekerja sangat mengagumkan dalam blog Anda sendiri dan itu akan memberikan efek warna pelangi yang unik dan menarik untuk widget bookmark ini, widget ini juga sangat bagus dan mudah disesuaikan sehingga Anda dengan mudahnya menggunakannya sebagai widget berbagi untuk blog Anda dengan menggunakan berbagi kode tapi saya akan membagikan ke anda segera.ikuti langkah-langkah nya jika ingin memasang widget tersebut.
Untuk DEMO-nya ada dibawah ini : 

Demo  

Langkah-langkahnya sebagai berikut :
1. Login ke akun Blogger sobat.
2.  Pergi ke  Blogger Dashboard   →  Tata Letak  →  klik "Add a gadget" .
3.  Pilih "Html/JavaScript" lalu Letakkan Kode dibawah ini :

<style type='text/css'>
/*Widget by ilu5i.blogspot.com*/
.wg-roseicwidget {  width: 300px;  margin: -10px;  text-decoration: none; }
.wg-roseicwidget ul {  margin: 0;  padding: 0;  text-decoration: none;}
.wg-roseicwidget ul li {  list-style:none;   padding: 0; text-transform: none; text-decoration: none;}
.wg-roseicwidget ul li a {   color: #fff;   display:block;  text-decoration: none;}
.wg-roseicwidget ul li a:hover {  color: #c9c9c9;  background-color: #333;  text-decoration: none; }
.wg-roseicwidget 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; }
.wg-roseicwidget 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;}
.wg-roseicwidget 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; }
.wg-roseicwidget 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; }
.wg-roseicwidget 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; }
/*Widget by ilu5i.blogspot.com*/
</style>
<div class="wg-roseicwidget">
<ul>
<li><a class="facebook" href="#1">Join Us on Facebook</a></li>
<li><a class="rss" href="#2">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="#3">Follow me on Twitter</a></li>
<li><a class="google" href="#4">Join me on Google+</a></li>
<li><a class="linkedin" href="#5">Connect With Us on LinkedIn</a></li>
</ul>
</div>

4. Klik Simpan → Simpan setelan
5. Selesai

✍ Catatan :
Ganti #1 dengan nama halaman pengguna Facebook Anda .
Ganti #2 dengan nama pengguna Feed burner Anda .
Ganti #3 dengan nama pengguna Twitter Anda .
Ganti #4 dengan Google + id Anda .
Ganti #5 dengan nama pengguna Linkedin Anda .

weskan?? nek kurang bagus silahkan diredesign sendiri .. sekian

Wassalamualaikum Wr.wb