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.

social bookmark

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='http://4.bp.blogspot.com/_KgIhfKU4BcE/SwfOTb1pF1I/AAAAAAAAAuI/M-fC8ABhw6c/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='http://4.bp.blogspot.com/_KgIhfKU4BcE/SwfN_PyGWsI/AAAAAAAAAtw/HUcVDlUpfwg/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='http://1.bp.blogspot.com/_KgIhfKU4BcE/SwfN5pqFA4I/AAAAAAAAAto/HFYS5rLHaIo/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='http://2.bp.blogspot.com/_KgIhfKU4BcE/SwfOGlfWg6I/AAAAAAAAAt4/1NpvgqnynAg/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='http://3.bp.blogspot.com/_KgIhfKU4BcE/SwfOL1O6pFI/AAAAAAAAAuA/fCpnpHg87yg/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='http://3.bp.blogspot.com/_KgIhfKU4BcE/SwfObF-toHI/AAAAAAAAAuQ/SwO1_vXBHWg/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='http://4.bp.blogspot.com/_KgIhfKU4BcE/SwfOoNe2fWI/AAAAAAAAAuY/cxTxqKCpVYE/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='http://2.bp.blogspot.com/_KgIhfKU4BcE/SwfOswiRsWI/AAAAAAAAAug/cllKpvLIDi4/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...

49 komentar untuk “Menambah Big Social Bookmark dibawah posting”

  1. kalo blog udah ditambah social bookmark maka akan tambah manis yah :)

    BalasHapus
  2. wah mantap...tapi saya masih senang dengan sexy social bookmark.punya kamu di save page dulu deh ya ^^. terima kasih infonya

    BalasHapus
  3. Makasih tips nya sob...
    Mantabs...

    BalasHapus
  4. Sebenernya sih saya udah bikin yang bagus di blog saya sebelum OB memposting di blog ini. Tapi monggo dicek dulu punya saya, bagus lho....:)

    BalasHapus
  5. @Reza Winandar@Blogging Guide : Maaf Mas, yang buat tutorial ini bukan OB tapi Rudy Azhar sebagai guest blogger di blog ini...

    BalasHapus
  6. @football news, sexy bookmark emang keren Mas tapi permasalahannya terlalu banyak kode yang harus kita masukkan ke blog kita dan gambar yang ditampilkan sering tidak muncul kecuali kita harus hosting gambar di tempat kita sendiri...

    BalasHapus
  7. Wah....,mantap nih sob....!!!
    thank ya dah berbagi ilmu........

    BalasHapus
  8. wah wah.. boleh juga nih, tp apa gak mending pake addons addthis aja ? kan tinggal klik kanan trus share :)

    BalasHapus
  9. sudah terlanjur cocok pake plugin all in one bookmarking button... ;;)

    BalasHapus
  10. makasih infonya...langsung dicoba

    BalasHapus
  11. terimakasih sob atas infonya. ini yang saya cari.

    BalasHapus
  12. oke, mantap tutorialnya,,
    langsung dipraktekkan....,,
    thanks n salam kenal

    BalasHapus
  13. Mantap tipsnya.... bisa nolong blogger pemula kayak aq...makasih :)

    BalasHapus
  14. say ga berhasil om, terpaksa saya pakai yang veris kecil..yang penting bisa boomark artikel he he he..

    BalasHapus
  15. makasih atas informasinya mas, sebelunya salam kenal dari Blogger Yang Cinta Seo ini.

    BalasHapus
  16. memang masih harus banyak2 belajar dari kawan2.. trims sob..

    BalasHapus
  17. thanks for sharing...
    perlu dicoba nih

    BalasHapus
  18. Thanks bro anta infonya, kebetulan lagi cara menyisipkan social bookmark, eh ketemu artikel ini, terbantu banget nich.. thanks sekali lagi. sukses selalu.

    BalasHapus
  19. Met Siang.... ANe masih Newbie dalam hal mengoptimalkan blog....
    setelah aNe berburu ilmu di om Google...
    'n' menemukan blog ni...
    makin nambah ilmu ane n dapat belajar banyak....
    Thanks.....
    :)

    BalasHapus
  20. makasih useful bangget, dah lama pengen pasang ne sosial bookmarker

    BalasHapus
  21. Bagus kali nich tutorialnya. Biar aku terapkan di blog aku:

    http://www.bestasianpics.blogspot.com

    http://www.deregu.blogspot.com

    http://www.caraiklan.com

    BalasHapus
  22. Terimakasih infonya.

    Aku telah membaut blog:

    http://www.sitoli.blogspot.com

    BalasHapus
  23. kekuatan social bookmark emang mantep gan...
    ane dukung...

    BalasHapus
  24. numpang links ya gan trims, kita di http://bangboms.blogspot.com

    BalasHapus
  25. coba dulu ya mas.. hehe
    ne blog saya, http://dkills.blogspot.com

    BalasHapus
  26. :D
    sip deh... thanks buat artikelnya... salam sukses

    BalasHapus
  27. makasih atas infonya..
    nice blog..

    http://trojandecoder.blogspot.com/

    BalasHapus
  28. ini yang saya cari makasih infonya

    BalasHapus
  29. wah udah lama ga belajar edit blog ini hihihi

    BalasHapus