Social bookmark sekarang ini sangat trend dan menjadi fasilitas untuk mempromosikan blog dan urusan SEO lainnya. Maka tidak heran jika banyak blog yang menempatkan social bookmark seperti StumbleUpon, Digg, Reddit dan lainnya di blog mereka. Menempatkan social bookmark yang benar akan membuahkan hasil yang diharapkan. Menempatkan disekitar posting ialah penempatan yang paling tepat, bisa ditaruh dibagian diatas (dibawah judul posting) atau dibawah posting. Oleh karena itu posting ini menyediakan tutorial untuk menempatkan social bookmark yang terdiri dari Digg, StumbelUpon, Technocrati, Del.icio.us, Yahoo, Simply, Furl, Spurl, Blinklist dan Reddit disekitar posting, tepatnya dibawah posting blogger.com anda. Langsung saja begini caranya:

Sebelumnya saya umumkan tutorial untuk blogger layout (beta). Dan hasilnya nanti akan seperti digambar berikut ini:

Oke deh langsung saja kita mulai, inilah langkah-langkahnya:

1. Login ke blogger.com.
2. Layout.
3. Edit HTML.
4. Klick “Expand Widget Template”.

Berikut ini adalah barisan kode social bookmarknya:

<!– 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 –>

Sekarang menentukan penempatannya:

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>
Letakan 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:

Letakan 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>
Letakan Kodenya Disini

Sehingga setiap kali pengunjung anda ingin membookmark posting dari artikel yang mereka baca, mereka tinggal klik saja.

Sekian dan semoga bermanfaat! & Sampai jumpa di posting berikutnya.

Wassallam.