Menambahkan social bookmarking

Posted by ahmad febriant at Minggu, 10 Januari 2010

Share this post:

0 Comments

Bro, kadang kita kan ingin tuh ada gambar-gambar kecil di bawah blogkan...? Kayaknya gimana gitu...agak profesional kayaknya.....bagi kalian yang masih aja bingung dengan masalah itu...moga tutor kali ini bisa membuat kalian keluar dari permasalahan klasik itu. hehe oke gak usah banyak cas-cis-cus langsung aja kita menuju TKP!

Untuk macam-macam social bookmarking yang akan kita pasang nanti berupa Digg, Sphinn, Delicious, Facebook, Mixx, Google, Furl, Reddit, Spurl, StumbleUpon, dan Technorati yang saya dapet infonya dari sc community

Untuk menambahkan itu ikuti langkah berikut:

1. Login ke aku blogger anda dan klik tata letak lalu Edit HTML
2. Lakukan download template lengkap menjaga bila terjadi kesalahan.
3. Beri tanda centang pada tulisan Expand Template Widget.
4. Kopi paste kode CSS berikut dan taruh diatas kode ]]>:

/* Social Bookmark ----------------------------------------------- */ div.sociable { margin: 16px 0 0 0; text-align: center; } span.sociable_tagline { position: relative; } span.sociable_tagline span { display: none; width: 14em; } span.sociable_tagline:hover span { position: absolute; display: block; top: -5em; background: #ffe; border: 1px solid #ccc; color: black; line-height: 1.25em; } .sociable span { display: block; } .sociable ul { display: inline; margin: 0 !important; padding: 0 !important; } .sociable li { background: none; display: inline; list-style-type: none; margin: 0; padding: 1px; } .sociable ul li:before { content: ""; } .sociable img { float: none; width: 16px; height: 16px; border: 0; margin: 5px 5px; /*jarak antargambar*/ padding: 0; } .sociable-hovers { opacity: .4; -moz-opacity: .4; filter: alpha(opacity=40); } .sociable-hovers:hover { opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); }

5. Lalu cari kode (untuk mempermudah tekan ctrl+f)
6. Kopi paste kode berikut setelah kode tadi

<div class="'sociable'"> Ikon ini merupakan link ke situs bookmark sosial dimana pembaca dapat berbagi dan menemukan halaman web baru. <li><a href="'" phase="2&url=" title="" target="'_blank'" title="'Digg'"><img alt="'Digg'" class="'sociable-hovers'" src="'http://174.132.149.5/~tmwwtw/ultimateblogger/img/digg.png'" title="'Digg'/" /></a></li> <li><a href="'" url=" + data:post.url + " title="" target="'_blank'" title="'Sphinn'"><img alt="'Sphinn'" class="'sociable-hovers'" src="'http://174.132.149.5/~tmwwtw/ultimateblogger/img/sphinn.png'" title="'Sphinn'/" /></a></li> <li><a href="'" url=" + data:post.url + " title="" target="'_blank'" title="'Delicious'"><img alt="'Delicious'" class="'sociable-hovers'" src="'http://174.132.149.5/~tmwwtw/ultimateblogger/img/delicious.png'" title="'Delicious'/" /></a></li> <li><a href="'" u=" + data:post.url + " t="" target="'_blank'" title="'Facebook'"><img alt="'Facebook'" class="'sociable-hovers'" src="'http://174.132.149.5/~tmwwtw/ultimateblogger/img/facebook.png'" title="'Facebook'/" /></a></li> <li><a href="'" page_url=" + data:post.url + " title="" target="'_blank'" title="'Mixx'"><img alt="'Mixx'" class="'sociable-hovers'" src="'http://174.132.149.5/~tmwwtw/ultimateblogger/img/mixx.png'" title="'Mixx'/" /></a></li> <li><a href="'" op="edit&bkmk=" title="" target="'_blank'" title="'Google'"><img alt="'Google'" class="'sociable-hovers'" src="'http://174.132.149.5/~tmwwtw/ultimateblogger/img/googlebookmark.png'" title="'Google'/" /></a></li> <li><a href="'" t=" + data:post.title + " u="" target="'_blank'" title="'Furl'"><img alt="'Furl'" class="'sociable-hovers'" src="'http://174.132.149.5/~tmwwtw/ultimateblogger/img/furl.png'" title="'Furl'/" /></a></li> <li><a href="'" url=" + data:post.url + " title="" target="'_blank'" title="'Reddit'"><img alt="'Reddit'" class="'sociable-hovers'" src="'http://174.132.149.5/~tmwwtw/ultimateblogger/img/reddit.png'" title="'Reddit'/" /></a></li> <li><a href="'" url=" + data:post.url + " title="" target="'_blank'" title="'Spurl'"><img alt="'Spurl'" class="'sociable-hovers'" src="'http://174.132.149.5/~tmwwtw/ultimateblogger/img/spurl.png'" title="'Spurl'/" /></a></li> <li><a href="'" url=" + data:post.url + " title="" target="'_blank'" title="'StumbleUpon'"><img alt="'StumbleUpon'" class="'sociable-hovers'" src="'http://174.132.149.5/~tmwwtw/ultimateblogger/img/stumbleupon.png'" title="'StumbleUpon'/" /></a></li> <li><a href="'" add="" target="'_blank'" title="'Technorati'"><img alt="'Technorati'" class="'sociable-hovers'" src="'http://174.132.149.5/~tmwwtw/ultimateblogger/img/technorati.png'" title="'Technorati'/" /></a></li> </div>

7. Simpan dan lihat hasil kerjakanmu dan bersyukurlah kepada yang maha kuasa.

Gimana? keren kan, terima kasih telah baca tutor kali ini, tetap semangat ngeblog ya...sesuai motto NB Community: Lets go to ngeblog forever, hehe.

Label: blog tutorial

Grab this WidgetMasih dalam masa percobaan. Doakan saja semoga baik-baik saja dan mungkin akan segera diLaunching. Amin!

Click on more Feeds rss Most Popular

More ?This is about me section. Click on the icons below profile, to check my social profiles.

Click on moreAbout Me

More ?These are the Recommended websites by NItesh Kothari.

Click on moreRecommended