Tempat Berbagi Berita, Cerita dan Derita

Kategori Yang Kalian Suka

Post ini diterbitkan pada : Tuesday, October 19, 2010

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 )
social bookmark
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.
add a gadget html javascript
3. Sebuah halaman baru akan terbuka.
memasukkan kode html
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.
menu edit html blogger
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.
Do you like this post? You can share it with your community..
Dapatkan update artikel lewat email

Artikel Terkait

4 comments:

salam sahabat
wah bagus cuma saya pernah nyoba ga berhasil,saya simpan aja yach xixixi good luck

Dhana : Kalo masih bingung,disimpen dulu juga gpp.. hehe.. oia,bukannya ke cina?

Makasih banyak om infonya. Nanti saya coba dulu :)
Salam kenal.

Informasi Terhangat tentang 7 kejadian langka dan spektakuler di seluruh dunia, ikuti update-an nya setiap hari.. Keep stay tune!!

Ads

My Tweet

 
Site Meter
© 2008 Blogger Abstrak | Template by : O-zone | Owner : Angga Leoputra