Wednesday, July 14, 2010

Cara Menambah Social Bookmark Di Bawah Posting

Satu Lagi Tips Dan Trik Blog untuk rekan rekan semua kali ini saya akan memberikan tutorial tentang Cara Menambah Social Bookmark Di Bawah Posting nah bagaimana caranya,kita baca dulu Satu lagi keunggulan blogspot daripada wordpress, yaitu menambah widget social bookmark dibawah postingan blog.



Cara Menambah Social Bookmark Di Bawah Posting


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/AVvXsEjvxnVVVSxhaxZGDMN4cq2GGL6d3D3NMEacT-DZacDU-uAZ-5zIO6QET6FtRkteLcElpjVYtNi6X1kUQmGhJnUk1NjTsbsSDAY3G53q3SQdNcqQ4zmzmYCWokOtRL2PxA0_moFmF2z8B3JL/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/AVvXsEjx2-tA-Qq-iHv_lab1LaiikkPvnPT3XMXG_t__KuoeO9vRrUCYql6ZPa_YQaraNpyJIFmOvsPKhZW2s0v5hGpdgNuf3JQdEPOPAk6o95zPJpPQPnG1OFY8E8GZoEkMIxX9Ue-XMxAeV-HM/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/AVvXsEhNMSsdl0RMheeOxu-Mdgxnp8ihCbqJzTuu8QKo6JmwxjyERQti8kxtwR4FKHpPfubICs-H1zWFgoQiKqCB1BzTgfm89KCoMZEf-TW1c77ZpoiXYwjNlAgdV4bmZDrsoZRYkP8HqIS9F6JP/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/AVvXsEhtnP65TyoqI-H3bA7aiJaremFFLiMpYzbNZrXdQHT9xEQpJuQVNByPNMPfab-JTcG0NfnxtewS2vSstB-mOP_FUWIOG2dyQu4P2VtppC7m06DBnsLyCKv5NcXtunDlKHGlfJzVk04eDXrZ/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/AVvXsEiNz-3X0JlfXEkIPV48qxE9p8TbbDQxsD_EkJmgME4jiDB7RicXaRTdK3HrJy8UWgIKx0tNF2OF-KfNGWVBlhJHMVJBuc8ecrw935PRYrrEEAtatLuZdzxW8-CWMoPxeTzGCbkvaap9HKrl/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/AVvXsEgQrV9SUXVxK8Gwf9Ae3Ruxe0VqDQo-lTmCgdpidGFBHF2bXqdKLzpll3hB9SBh7NbW3HoO0uzB22h96FbfHACRhwQhTGXC6qV00x8zc4W1lxOAFwPVylzwqOIXlwUOyzYTQprb1ral1S6w/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/AVvXsEgF0CcH-PtR_NTQIEFgvSoR8hu60dtbexSoIVc9NwsXtUOdVbIfoMnmByAlGQVYmADegGUxdH6enjjSMpodK87mWdJFsA-Udgn1bbjb2Bybd_6VHQPOwuF_0mM4IT_3kubHFYYM3j-FLmE_/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/AVvXsEjuT2dMNfo9I7tEWrqvPVYsinl6oPBTt724OFuvuH6wQ0ApwHZR4fsklKphU_CZAUuvrkp9Jjflsj5bjTmWiDTgvvlz5o6gwkv6NAFKfdyEaVQuFVmmPLg0Ld_S63ud6fVP4U9QFDrEbKuV/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... 
Saran Dan Kritik Anda Sangat Membantu Saya Dalam Menulis Artikel Selanjutnya Pada Blog Ini...
Sumber Artikel :  Cara Menambah Social Bookmark Di Bawah Posting
Labels: