Membuat "Social Bookmark" di Bawah Postingan

Banyak cara blogger untuk memamerkan situs/web mereka. Salah satunya yaitu dengan menampilkan social bookmark pada situs/web/blog mereka. Hal ini bertujuan supaya web/blog mereka dengan cepat terindeks oleh search anggine. Banyak cara untuk membuat social bookmark ini tampil pada blog/web kita, terutama berada di bawah tulisan atau postingan kita. Sebelumnya saya juga sudah pernah memberikan tips yang sama dengan tips kali ini. Jika sobat blogger ingin mencobanya silahkan baca di Sini.

Membuat social bokkmark ini bukanlah hal yang sulit untuk dilakukan. Berikut ini contoh

bentuk social bookmark nya.

Jika sobat blogger sudah mengerti dengan social bookmark ini, sobat dapat menampilkannya pada blog/website sobat. Caranya adalah sebagai berikut:

1. Login ke blogger dengan account anda
2. Pada dasbor blog sobat, pilih Template
3. Kemudian pilih Edit HTML ==>> Lanjutkan
4. Jangan lupa cantang Expand Widget Templates
5.Cari kode ]]></b:skin> ( tekan Ctrl + F)
6. Letakkan kode berikut di atas kode tadi

/* 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: 35px;
height: 35px;
border: 0;
margin: 5px 5px; /*jarak antar icons*/
padding: 0;
}

7. Kemudian cari kode <data:post.body/> dan letakkan kode berikut di bawahnya.

<div class='sociable'>
<span class='sociable_tagline'>
</span>
<li><a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Digg'><img alt='Digg' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHrVUanGen7AJ4lA094m6pc_rj4kD5x_lZUG3hGWQ4R5MMDDs_-iUexEq_o_AbadUnnRiINP4Djem_ZmoxGIKQTgT0QBsW0I2-TcBevLYL7123EZhuytM3SFgMvTT-qAVYO6mDLeWw0Ts/s320/digg.png' title='Digg'/></a></li>
<li><a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Delicious'><img alt='Delicious' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGG9Q2mXKHrIv_0Suz0PEDJ5SPp8a1TVVLGba_0thxAXidwGheQ-2XAG20GPYLj1Rlfjo0pFEgfJ4vhxwyeMtFBDz6GS4vYfxfQVVVezbjTVN32TIx0OUvlzw9GkwcLEZePGo8S9xcGA4/s320/delicious.png' title='Delicious'/></a></li>
<li><a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url + "&t=" + data:post.title' target='_blank' title='Facebook'><img alt='Facebook' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh8XJSpxWO9k-6lYrGNBpIQd7sL3Y9Qm0FrVGFU5I529HOHQ2roKnwJ91Dzuzui84fH07cpZ1gQXmqH-pOobt0UeIFUiMrmqpnCPXry-Iaxti2Bea2XJydwmNyijmdqLBH5ZIV9yXgLBw/s320/facebook.png' title='Facebook'/></a></li>
<li><a expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Mixx'><img alt='Mixx' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAZZeR6jLVTCryHhcLi4SXnBmutgP2izPODp2gVzXYSnBzhuZSgzboW_GZUJlM3HP5-qICx_iTimim3y1tiTIyaqaap5e7tSC8zop4XNDvZ8oOJHme9nnelgf6MXU60dsem43aV9untEI/s320/mixx.png' title='Mixx'/></a></li>
<li><a expr:href='"http://google.com/bookmarks/mark?op=edit&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Google'><img alt='Google' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKntA2DY9Oa5XLtfDm1n0MsNLs5p62LvfzodXdoeplA5q-BMG9C8-WZBo3m8vAl_YfGRrgl_OSjN4fEhmvRhXgNq7vhwA_wJKn93BCcOP7TZ6Ha8Xaj1ttE4_z3ga6lBznuno9hK5x8iw/s320/google.png' title='Google'/></a></li>
<li><a expr:href='"http://www.furl.net/storeIt.jsp?t=" + data:post.title + "&u=" + data:post.url' target='_blank' title='Furl'><img alt='Furl' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQzG6L5mldkuNVmyJEVB81DoMVg0I9MB73Owo6xW_WGoudRM8HsRcRuHUncL0R4XsS9kWeKn1Tm7z16rTZgE7NLF0iimDvfklXIbIZUDpFXau9nEaMJmZRm1DyhwxJ0gj_PKr_wxu3P2U/s320/furl.png' title='Furl'/></a></li>
<li><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Reddit'><img alt='Reddit' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgULkihth6MYwWhBUiLGsG5JY6gl9dfmKBspDze4KxwmNZjoG0f-pT8qjIGGYs5-vzRjSeuQb8H323TEULIrPPXlAvcswabFxRq-166PTIm1DJrt46e0P3TN9hQJK-fCCEqrpVVZVoAbhM/s320/reddit.png' title='Reddit'/></a></li>
<li><a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='StumbleUpon'><img alt='StumbleUpon' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFUj1Bq2XL7RfVt7-oJjaQ_mT9GwYm6P0pJoXH1EQC6BrG_d2eCKSzwP6V64ZLzWfGQKFvCY7C3PGRR9pxjDtXNuohz3jFFh_wH6UFE6Zk4-jY7MDFiWBs5gDsbOmrvWCu9HpRE9gV-PU/s320/stumble.png' title='StumbleUpon'/></a></li>
<li><a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank' title='Technorati'><img alt='Technorati' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC7vTtxDF_j1oKIWrSezyNG0e6PRHjv2fU9vv6P1vEe174MkCt-D2UKSPEMLG_vPk80LC8wNZNOXQlHg5CJZe184vWs-1V63fTQ27KasoLSNieIzfPMtBeQv7HbBmbdKRoKjgE3FJ27jA/s320/technorati.png' title='Technorati'/></a></li>
</div>

8. Kemudian Simpan Template, dan lihat perubahannya.
Semoga bermanfaat dan mohon maaf jika ada kesalahan. (Jkt/2012)