Abs'Reaper'sDj: Cara Pasang Icon Sosial Bookmak di Blog

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 { background: #cecece; -moz-border-radius: 5px; border: 0px; padding:5px 5px 5px 5px; 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

<div class='sociable'>
<span class='sociable_tagline'>
</span>
<center><span style='font-size:180%;'><span style='font-weight: bold; color: rgb(102, 0, 0);'>Sebarkan Ini</span></span></center>
<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='http://icons3.iconfinder.netdna-cdn.com/data/icons/elegantmediaicons/PNG/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='http://icons3.iconfinder.netdna-cdn.com/data/icons/elegantmediaicons/PNG/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='http://icons3.iconfinder.netdna-cdn.com/data/icons/elegantmediaicons/PNG/facebook.png' title='Facebook'/></a></li>
<li><a expr:href='"http://twitter.com/home/?status=Chk Out-Numbering Comments In Blogger/BlogSpot Blogs " + data:post.url + "&title=" + data:post.title' target='_blank' title='Twitter'><img alt='Twitter' class='sociable-hovers' src='http://icons3.iconfinder.netdna-cdn.com/data/icons/socialmediaicons_v120/48/twitter.png'/></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='http://icons3.iconfinder.netdna-cdn.com/data/icons/elegantmediaicons/PNG/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='http://icons3.iconfinder.netdna-cdn.com/data/icons/elegantmediaicons/PNG/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='http://icons3.iconfinder.netdna-cdn.com/data/icons/elegantmediaicons/PNG/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='http://icons3.iconfinder.netdna-cdn.com/data/icons/elegantmediaicons/PNG/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='http://icons3.iconfinder.netdna-cdn.com/data/icons/elegantmediaicons/PNG/stumbleupon.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='http://icons3.iconfinder.netdna-cdn.com/data/icons/elegantmediaicons/PNG/technorati.png' title='Technorati'/></a></li>
</div>

Simpan template. Selesa

SEMOGA POSTINGAN SAYA DI ATAS DAPAT MEMBANTU ANDA ^_^ PERINGATAN:KALO ANDA INGIN MEN-COPY POSTINGAN DI ATAS HARAP SERTAI ALAMAT WEB ABS