Cara Menambahkan Icons Social Bookmark Pada Postingan

Beberapa kali blogwalking ke blog teman-teman tidak jarang saya menemukan kenyataan bahwa masih banyak blog yang belum memasang tombol share atau icons sosial bookmark pada blog atau postingan. Entah karena belum mengerti manfaat dari widget sosialbookmark ini atau justru karena tidak mengetahui cara memasang widget ini pada template blogger. Padahal banyak keuntungan yang dapat kita peroleh dari widget share ini, diantaranya jika pengunjung mensubmit artikel atau blog kita pada salah satu situs sosial bookmark tentu hal ini akan menjadi sarana promosi blog yang baik, meningkatkan traffic visitors, juga perolehan backlink. yang tentunya akan mendongkrak page rank google dan alexa blog or web sobat.

Nah tutorial kali ini, saya ingin berbagi trik cara menambahkan sosial bookmark pada postingan. Karena trik ini saya terapkan pada blog saya Jejak-Jejak Hati jadi saya memilih icons sosial bookmark khusus seperti screenshoot diatas:

Bagi teman-teman yang ingin mengganti icons sosial bookmark diatas silahkan saja kembangkan kreatifitas sobat, berikut ini beberapa icon lainnya yang bisa sobat gunakan

Oke, berikut langkah-langkah cara menembahkan sosial bookmark pada postingan

Dalam keadaan log in pada account blogger sobat>>> Klik Tata Letak>>> Edit HTML>>> Expand Template Widget>>> Cari kode ]]></b:skin>
Sekarang letakkan kode berikut diatas ]]></b:skin>

/* 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;
}

Letakkan kode berikut dibawah kode <data:post.body/>

<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/AVvXsEgwBLwxB5rPXIu0wrWIOqA2a6yzNN8rlWGIIViDQI7FlH6On_CmcTcnzvKAsnfB9vLxmxDIsdsLaJUYQ1WIGOHaqoC6pRlbQtrtlptrN-XsLSG5Tgo7XA3_PkgcQB3-4U_ukOZp4SV_sHU/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/AVvXsEjTbbMf1nmq_ijCFZoASPKuqNz9Wdd1sJ4lQG2NHuVyU0KA4wKSfGYckmw5FHaW1i5zQTXPLmO3K33Wu8XyIQgasOEWdDnziLmovaOq7GUzMSGNho_rdPkkl7urLOoqAzB0HfpjjnVm7t8/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/AVvXsEgjsNKyEP-WUT3-hH3hhvRHFYXeBzZKn-WgCJWkUvWrxsSYuifftLhm1rpXBG5dBwcqk8g5QON8UpgYMBrxMEgpPeiErOuuSaTjWx4QKY-bCjRowB62gSzPjqPoG2szac6zDLQgPgoX1EU/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/AVvXsEgBz8rzLUGLQdvU7tzgT4jvcL303yVdrju-4uIuO8cC6syKkjbYmsw5teR_WexJEDw2nIIXNlb6Cat1D-CMuzB49o_Cp7q4-_646DfZ2ubHmsLHgT6robzY0HUc7h70-83Bk19OGa0ypLI/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/AVvXsEjLrERDfjMnY9BkyfUrk82-3H3yRfd1cMqqTXFAUG6bN4kXmH7aQYYy5mPqSjRjfRHl6cBwteXpQLH1carK1f2kBu_RROC2NOVCaXcW9e97mgVjrLHEMJApXfLudXQPKQDk3692HDT_jtU/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/AVvXsEjPjOufNw7GuOi15Q6v0KWHJYMFP8FOoKOMvNOudO0UoGMCXDbXTeI8Z8aYWEcElwei4YZCVdK_Wdp1wwWcacpof6rUlsQ4djXLBgU_L84cLIKTyTSv-cPl9drKu2GXA-HSFyOBurTt9JE/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/AVvXsEilRTHcO8iO1f1zqt9J3C20I3Xk18j1C6aSdPKP0jeCHLxBG3jwvPdcZX_WhmAPFz8u-ARRhbUgPUSe4wSSMczocHoJhKpGA6OBEd6FeHECwIkJvfCnnypV6Xv_chhw7lUGnzcyEUKd9Qw/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/AVvXsEiYLMA84F2NaU6sD-rzREjjWVZIOkHy9k9IjDFKiUkSZWvuC1mxCREvWz2kY1hcapYRRn0uOoO8UxKRCt7ATIWbsvB28ZAy_lpOgX7_gE0QSSMN58tWPIT7m2d12UhLCVkvTGyoq2AqW9M/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/AVvXsEjWilj_AD5ylPFqSIS5Rz1rMUJ7REG7U9s8lvRfMt3C_uazK7wO_NKObuSL7T2ETOdYP-XCYbCfDRdTD6dpHupeUIzKJ94gtPNd15orptNknK0CWiBkkJyfc9mYUIpIKZD2MWQc4p1GwDk/s320/technorati.png' title='Technorati'/></a></li>
</div>

Simpan template. Selesai

I hope you enjoyed this tutorial comments are welcome see my result

Cara Menambahkan Icons Social Bookmark Pada Postingan

Previous

Next

0 Komentar untuk "Cara Menambahkan Icons Social Bookmark Pada Postingan"