Membuat Widget Social Bookmark

Salah satu cara untuk menambah jumlah pengunjung adalah dengan mempromosikan blog kita melalui situs-situs jejaring sosial. Oleh karna itu,memasang widget social bookmark di blog kita juga sangat diperlukan. Dengan sedikit berkreasi menggunakan photoshop dan teknik Sprite pada CSS3,kita bisa membuat widget social bookmark yang simpel dan keren.

( Klik pada gambar untuk melihat previewnya )

Tertarik untuk membuatnya?,silahkan ikuti step-step cara pembuatannya berikut ini..
1. Login ke Account/Dashboard blog kalian. Pilih Rancangan/Design.
2. Klik Add a Gadget dan Pilih HTML/JavaScript.

3. Sebuah halaman baru akan terbuka.

4. Masukkan kode di bawah ini ke dalam kolom Konten/Content.

<ul id="soc">
    <li><a class="facebook" href="http://www.facebook.com/pages/blogger-abstrak/108579879204062" title="Be my facebook fan">Facebook</a></li>
    <li><a class="twitter" href="http://www.twitter.com/angga_leoputra" title="Folow me on Twitter">Twitter</a></li>
    <li><a class="rss" href="http://feeds.feedburner.com/infogaul/feed" title="Subscribe via RSS">rss</a></li>
    <li><a class="mail" href="http://feedburner.google.com/fb/a/mailverify?uri=Infogaul/feed" title="Subscribe to Email updates">email</a></li>
    <li><a class="google" href="http://www.google.com/friendconnect/signin/home?st=e%3DAOG8GaCke6EyES7R%252F9vQV5GbUWRJF1fu2rLjjX8fsVKsnv%252BUZJKZE4NAmdyu0XQgIXM9gdqI%252FvpboOpFyglpdV6Ty1PGzveP%252Bc71pwG8jbWh7HYxnBN%252BTV6%252BYcxszDlrJB6JZ6WWuGE%252B2e3eoPcHsW6Qols5LSOtoN%252BqF22EbtCfkcY5D4DIL3xFYOSKUMLOoi52z94sqJFW%252FVXy0fnf2UGhFG9FAG57LZLxus2kR%252BLo6nV2ggDqtx8%253D%26c%3Dpeoplesense&psinvite=&subscribeOnSignin=1" title="Follow Via Google Friend Connect">email</a></li>
</ul>

5. Kode diatas menggunakan URL dari blog ini.. ganti kode berwarna biru dengan URL kalian sendiri,lalu save.
6. Beralih ke menu Edit HTML.

7. Cari kode ]]></b:skin> menggunakan CTRL+F pada browser kalian,dan ganti kode tersebut dengan kode berikut ini :

ul#soc{width:250px;margin:0px auto;list-style:none;padding:0px}
ul#soc li {display:inline;}
ul#soc li a {padding:0px;margin:0px;display:inline-block;float: left;  height: 50px;background: url('http://img201.imageshack.us/img201/2135/socialbutton.png')no-repeat center; text-indent:-9999px;}
ul#soc li a.facebook {width:50px;background-position:0 0;}
ul#soc li a.twitter {width:50px; background-position: -50px 0;}
ul#soc li a.rss {width:50px;background-position: -100px 0;}
ul#soc li a.mail {width:50px;background-position: -150px 0;}
ul#soc li a.google {width:50px;background-position: -200px 0;}
ul#soc li a.facebook:hover,ul#soc li a.facebook:focus {background-position: 0 -50px;}
ul#soc li a.twitter:hover,ul#soc li a.twitter:focus{background-position:-50px -50px;}
ul#soc li a.rss:hover, ul#soc li a.rss:focus {background-position: -100px -50px;}
ul#soc li a.mail:hover, ul#soc li a.email:focus {background-position: -150px -50px;}
ul#soc li a.google:hover, ul#soc li a.email:focus {background-position: -200px -50px;}
]]></b:skin>

8. Save template dan lihat hasilnya.
Semoga bermanfaat.