Kali ini tutorial mengenai cara menaruh deretan social bookmark yang terdiri dari Digg, StumbelUpon, Technocrati, Del.icio.us, Yahoo, Simply, Furl, Spurl, Blinklist dan Reddit. Semuanya dalam satu deret dibawah setiap posting blog anda, untuk memudahkan pengunjung/pembaca blog untuk melakukan bookmarking dari posting anda dan men-sharingnya kepada dunia, beserta image dari masing-masing servis social bookmark, contohnya bisa dilihat dibawah posting ini. Caranya:
1. Login ke blogger.com.
2. Layout.
3. Edit HTML.
4. Klick “Expand Widget Template”.
Ini adalah kodenya:
<!– Start of social bookmarks. –><br/>
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Digg' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/digg.gif'/></a>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank'><img alt='Technorati' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/technorati.gif'/></a>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='del.icio.us' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/delicious.gif'/></a>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Stumbleupon' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/stumbleupon.gif'/></a>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Reddit' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/reddit.gif'/></a>
<a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url=" + data:post.url + "&Title=" + data:post.title' target='_blank'><img alt='Blinklist' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/blink.gif'/></a>
<a expr:href='"http://www.furl.net/storeIt.jsp?t=" + data:post.title + "&u=" + data:post.url' target='_blank'><img alt='Furl' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/furl.gif'/></a>
<a expr:href='"http://www.spurl.net/spurl.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Spurl' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/spurl.gif'/></a>
<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.title + "&u=" + data:post.url' target='_blank'><img alt='Yahoo' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/yahoo.gif'/></a>
<a expr:href='"http://www.simpy.com/simpy/LinkAdd.do?href=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Simpy' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/simpy.gif'/></a>
<!– End of social bookmarks –>
Pilihan Penempatan:
Jika anda ingin menaruhnya tepat dibawah posting, maka ini contohnya:
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!– clear for photos floats –>
</div>
Taruh Kodenya Disini
<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>
Jika ingin menaruh kode social bookmark di atas label, maka ini contohnya:
Taruh Kodenya Disini
<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
Dan jika ingin meletakan dibawa label, ini contohnya:
<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</p>
Taruh Kodenya Disini
Sehingga setiap kali pengunjung anda ingin membookmark posting dari artikel yang mereka baca, mereka tinggal klik saja. Dan sebagai uji coba, silahkan anda men-stumble, dan mendigg artikel ini…:)
Sekian dan semoga bermanfaat! & Sampai jumpa di posting berikutnya.
Wassallam.
Feedburner dengan RSS | 
Update lewat Email |
oya mas kok aku sering sulit ya loding blog mas abi ini, lama banget baru ke loding
apalagi dlm berburu dollar … 
2008 Abi Bakar | Blog Designed by Blogging Secret | Sponsored by Wordpress Theme Store
Loading ...
Ijin nyedot juragan… hehehe… terima kasih sharing ilmunya..
[Reply]
Wah, kesini udah ganti lay out ya? Sampe pangling neh… Abi kenapa gak ikutan kopdar? Kan waktu itu terbuka lho utk siapa aja yg mau…
[Reply]
Setelah keringetan berjalan2 di Homenya om Google akhirnya saya nemuin blog Mas Abi ini.O ya ada sedikit pertanyaan nih mas.gimana cara merapatkan dan mengecilkan bookmark seperti yg anda lakukan itu….Tolong di jawab.Sekalian blog anda saya link ya…
Wassalam.
[Reply]
makasih ilmunya oom, langsung bisa dipake, keren!
[Reply]
@ellias mcmunny, silahkan bro.
@eucaliptus, iya nih ganti template…wah ga tau infonya tuh:)
@robby alca, kalau saya langsung dipasang aja mas, ga diapa2x in lagi, karena imagenya memang di set seukuran itu.
@soldier side, sama2x bro
[Reply]
@Robbi, link backnya menyusul ya sbab saya belum bisa login ke blogger.com nih dari tadi pagi, ga tau kenapa…nanti pasti saya link back stelah bisa login…insha Allah.
[Reply]
Begini loh Bro,bookmark di blog saya ko’ besar ya.Maksud saya ada gk tips untuk mengecilkan ukuran imagenya sehingga images bookmark yg ada di blog saya tidak terlalu besar.Atas dasar itulah saya menghapus satu icon dari bookmark yang ada.
God Bless Bro
[Reply]
@Robbie iya saya ngerti, coba masukin kode ini:
img.emoticon {
padding: 0;
margin: 0;
border: 0;
}
Taruhnya tepat sebelum tag ini: ]]></b:skin>
Moga2x berhasil.
[Reply]
wah sip buanget deh, tipsnya tak coba-coba ah!!!!!
Oh ya tentang adsense dibawah posting, maaf deh kalo postingan saya menyinggung Anda. Saya tunggu deh artikelnya yang “naro adsense dibawah posting”
[Reply]
sama2x bro, wah saya ga merasa tersinggung tuh, komennya seperti orang tersinggung yah? heheheh sorry deh.
iya nanti saya posting tutorial ttg itu, tapi nanti yah setelah template saya bener nih.
[Reply]
mas abi ini kok pinter bangt ya? he he..
[Reply]