sosial bookmarks sangat berguna sekali untuk promosi blog dan mendapatkan teman di situs tertentu seperti facebook, tuiter, dan yang lainya.selain itu juga widge ini bisa mempercantik blog anda.
kali ini mas ingin membahas soal cara membuat tampilan social bookmark di blog
begini caranya :
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/AVvXsEgn62CSgUt88kTckuRN7UDol-j4cU3iyubcelABBmg9GQMV5Cv-ckXVEeI-__AHX6TwA9WSSmCPJOwU8DgyfDnj4-reAQWoWbL7wC7gg0KGimxBJFfXa9fLJLshe1QLPPJHxF_aTbgJv8sB/s1600/share.jpg' title='Share This Artikel'/>
</div>
<ul>
<li><a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Digg' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLqMji-jZ-W-rB1VaX99gSbSfGRp20bowacF9g9-fX5uXbodwXtWcXPb4p8p_aVyl1WK8qOajvn4LxifEvthZasAEbmhTcEhtg9BbnT8Wir8UzCIol5tN4SyffU9whblOBfWM-lrLBDThq/s400/digg.png' title='Digg'/></a></li>
<li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='del.icio.us' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqaUSWg6SJyngs16DJsPJMmKsv6f-fQL-wwEc-1LvnnWsmO2uqrM2FjD4IVvea6CnFLNQRW9KI0qKy2DRqG5a8C3fyzYAU7JjtFzem1AjEWAghG-qQ6Wm1Aad8S6-0FoXgzn7EP5i3Mhck/s400/delicious.png' title='del.icio.us'/></a></li>
<li><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Facebook' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9RodQIyp3tpwJDkmG7-yO7bY-TFTayo8GS1MY3b-CcpHeRdrPtK3brVrJE6d7UdIk7l59LG82U4EUT47wAXmvVyKubdTNKzjwMGNf1jUhKezYercHDTDBY7bANZplKipLWjsTUbjwdEFx/s400/facebook_002.png' title='Facebook'/></a></li>
<li><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Google' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8EWqw-ee8s1gDVcrjb2eNSHRMprS2Llh84XWfvLC0lVmeXTCglity6c1yXJ8c2yUmncVPmNykq_erGgU_hf26Pdi7kLAD2eFqcsvUKUyg5lJ-2R1mFRlUsWQhI__soT2fqtJc7y9hHaGP/s400/googlebookmark.png' title='Google'/></a></li>
<li><a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='StumbleUpon' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQQ9Q451An68ED0xcs60rEtqIOlvaY0BicLXV08N5-203QogFG3aEjLmp94IZ2sZ8zPVpwZL4xu6JOxrinpeW5kQQilrXrKOY2g4q8hr2PoGtbxEO9oepHbJ6q8EkVNBBmQWri07dXHzxv/s400/stumbleupon.png' title='StumbleUpon'/></a></li>
<li><a expr:href='"http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Technorati' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVl60aEb0BaVk6OaHXx_F64HcEVX5MZk_Rob6YDBFp1E456FBpvk7h98jibUwdon_14pmqQtxOOq3g3Vx-UwOL-saa1uQTq2vok9imNyugapIxl6E7P0xHicyFLU21qW82_8ZD_YGRwWKM/s400/technorati.png' title='Technorati'/></a></li>
<li><a expr:href='"http://twitter.com/home?status=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='TwitThis' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiraJLHqpUBaRJ9bt0xi3sdjpezIznk5ZuNkqW13_Lec690rNRSS1d0PSUndWGqCrlCa_djBZNIYLNgUgygxDlc1wcq7plbPeVOflky_92Confu4VpRxkooo4zr4ZQWtrHGwxbwCrNlCnJ1/s400/twitter.gif' title='TwitThis'/></a></li>
</ul>
</div> |
Karena penempatan social bookmark ini pada halaman postingan jadi kamu tidak bisa pratinjau hasilnya, jadi simpan aja dulu dan lihat hasilnya...
