Menambah Big Social Bookmark dibawah posting

Satu lagi keunggulan wordpress yang dapat kita aplikasikan pada blogspot, yaitu menambah widget social bookmark dibawah postingan blog.

Penambahan social bookmark sangat baik sekali untuk mempromosikan blog kita di situs facebook, twitter, digg dan lain-lain.

Kali ini yang ingin saya sharingkan bukan social bookmark pada umumnya akan tetapi yang big, selain mempercantik blog juga menarik minat pengunjung untuk mengkliknya..

Contoh seperti gambar dibawah ini dapat anda lihat pada blog Ngobrol Seputar Bisnis Online.



Gimana, keren kan? Oke kita mulai aja..

seperti biasa Tambahkan kode CSS berikut di atas kode ]]></b:skin>

div.sociable { margin: 16px 0;}

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 ul li {
background: #f5f5f5;
display: inline !important;
list-style-type: none;
margin: 0;
padding: 2px;
}
.sociable ul li:before { content: ""; }
.sociable img {
float: none;

border: 0;
margin: 0;
padding: 0;
}

.sociable-hovers {
opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
}
.sociable-hovers:hover {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}

Setelah itu simpan dulu template kamu
lalu kamu ceklist Expand Template Widget.

Kamu cari kode <p><data:post.body/></p>
kalau blog kamu sudah memakai readmore, maka ada dua kode tersebut.
maka pilih kode yang kedua biar tidak tampak pada halaman utama.
setelah ketemu kamu masukkan kode HTML berikut dibawah kode diatas.

<div class='sociable'>
<div class='sociable_tagline'>
<img alt='Ngobrol Seputar Bisnis Online' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigCJJrpfHZdH1qaTfSkA9IKoUyJrXQgyxsxdcPifNo9RPjk3HMoLfWi-lktWxjXwEJvpaGEX4q6rrIkQnsR13YrlNtjO2I04qvjZWOl3m-TH4H_lhh5dHwWkMbnGeL26YdU8TFryca8jPc/s1600/share.jpg' title='Share This Artikel'/>
</div>
<ul>
<li><a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Digg' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEBSfpkVgvLzVMEUrimFvVwYlV6aHRU1l2l9IIKwu-3AH8mo0_9RxpS0OtoT2HyMT4YhMVjuhNxPF4PkVirfjbQYrreOSTrP7TJ4BL2ojSwrUM5fIwa5Ew9F5nvS2WE-qFHCaZxKHFZM8M/s400/digg.png' title='Digg'/></a></li>
<li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='del.icio.us' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirGoVfxItEnTwI1lAq4NjuW4P4r9JmWhYBNuwI0yxhisi6KaI_zVAIr1Mz1fNoyezoP67klXKxhXsPqDjZGi_TK1HlWn8nXZJpGXXYQQXqN_rnkRaUWqy02R2Q0sojFLUHkA8O6fqdVE_Q/s400/delicious.png' title='del.icio.us'/></a></li>
<li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Facebook' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRk2zoSX3I54paPRPYhAL2Mt8mZGCQvYfHn7a3LLGgkCF8o8JC9YhEslX5MkwDroNYMJiLXZAFgzHP76ltOLqhmWuWCdhYIAMiNf3il8yFj9afcmUbGRmWATz2RyIIhCAouQP7cxPPGr0h/s400/facebook_002.png' title='Facebook'/></a></li>
<li><a expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Google' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCQHyIfEOW79BnKucpkTU2ljfNWYRWcx_ECqTD0yn49TsJgNailNb9b1r7FG2H7QDgSTSZA2Lf2i1GQ4d-517jWnR15fJwIvUmrLkT3osTUH34reiA_xkLMr5VULJYbzaEiwOIhYmypcUX/s400/googlebookmark.png' title='Google'/></a></li>
<li><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='StumbleUpon' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpPfK_RL_mcMqkQRaNZeye870aX1c4GFtQUDgXKWKtI9mpdz7pcmTho_Wrfe2pPoZc7C1azJSn-FtNKGPaPeewrX5h8HNQm1bK-X3fJTrxnM_vmoeMeesqJmM_KncuE2Is0YsSdnIOb5Mg/s400/stumbleupon.png' title='StumbleUpon'/></a></li>
<li><a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Technorati' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil-9zlk5gM6HtXzLlVlHyYNOBCOMIRDfASLIMdnhgvvpl2BQKmfnHwvP2RQuhFuzycaKrksqXjyXbNJcwfBYC7Ge7vqs9wjjlEts36o2ZuoUvzRtnU7sbW4QRr1GKFjvUlng78KLRHelAp/s400/technorati.png' title='Technorati'/></a></li>
<li><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='TwitThis' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3__mLZ-xOAS4Zz3Oc6vLN4H86rEPcMvguT1MBXxGyh13pjrjM0MY1etWohIksr4IUvNL2VeU36mu55WHqiHE-5UGsMpWF89YNB9kFxD8uw0pAzW0ouAiYwe_29fSFn-yeWFleeicdkPzk/s400/twitter.gif' title='TwitThis'/></a></li>
</ul>
</div>

Karena penempatan social bookmark ini pada halaman postingan jadi kamu tidak bisa pratinjau hasilnya, so.. simpan aja dulu dan lihat hasilnya...