42 Cara Menambahkan Icons Social Bookmark Pada Postingan

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

image

View Demo

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

icon sosial bookmark

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 { 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 <data:post.body/>

<!-- Star Social Bookmark --><div class='sociable'>
<span class='sociable_tagline'>
</span>
<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' title='Digg'><img alt='Digg' class='sociable-hovers' src='http://2.bp.blogspot.com/_5yyQgf23Pco/S1ipyQjafCI/AAAAAAAABIY/X5rAbYhpfno/s320/digg.png' title='Digg'/></a></li>
<li><a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Delicious'><img alt='Delicious' class='sociable-hovers' src='http://4.bp.blogspot.com/_5yyQgf23Pco/S1ips7jKTcI/AAAAAAAABIA/AwTGeTNl1tQ/s320/delicious.png' title='Delicious'/></a></li>
<li><a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='Facebook'><img alt='Facebook' class='sociable-hovers' src='http://1.bp.blogspot.com/_5yyQgf23Pco/S1ip0OGyhCI/AAAAAAAABIo/oZPuLgBkpr8/s320/facebook.png' title='Facebook'/></a></li>
<li><a expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Mixx'><img alt='Mixx' class='sociable-hovers' src='http://4.bp.blogspot.com/_5yyQgf23Pco/S1i9Gk0HenI/AAAAAAAABLQ/D5BNFpKtb9o/s320/mixx.png' title='Mixx'/></a></li>
<li><a expr:href='&quot;http://google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Google'><img alt='Google' class='sociable-hovers' src='http://2.bp.blogspot.com/_5yyQgf23Pco/S1ip2m9pNBI/AAAAAAAABJA/Llz8rTUkUmQ/s320/google.png' title='Google'/></a></li>
<li><a expr:href='&quot;http://www.furl.net/storeIt.jsp?t=&quot; + data:post.title + &quot;&amp;u=&quot; + data:post.url' target='_blank' title='Furl'><img alt='Furl' class='sociable-hovers' src='http://2.bp.blogspot.com/_5yyQgf23Pco/S1ip1iQFZxI/AAAAAAAABI4/kwhxzaMQupE/s320/furl.png' title='Furl'/></a></li>
<li><a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Reddit'><img alt='Reddit' class='sociable-hovers' src='http://2.bp.blogspot.com/_5yyQgf23Pco/S1jAk3GYBOI/AAAAAAAABLY/BuLB3qK0U1E/s320/reddit.png' title='Reddit'/></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' title='StumbleUpon'><img alt='StumbleUpon' class='sociable-hovers' src='http://1.bp.blogspot.com/_5yyQgf23Pco/S1i8IxdjmdI/AAAAAAAABLI/6Is3ZzZQTDI/s320/stumble.png' title='StumbleUpon'/></a></li>
<li><a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' target='_blank' title='Technorati'><img alt='Technorati' class='sociable-hovers' src='http://3.bp.blogspot.com/_5yyQgf23Pco/S1iqFfVXSyI/AAAAAAAABKQ/8mO0V0oaLtM/s320/technorati.png' title='Technorati'/></a></li>
</div> <!-- Indahnya Berbagi. http://amatullah83.blogspot.com--><!-- End Social Bookmark -->

  • Simpan template. Selesai

I hope you enjoyed this tutorial comments are welcome see my result


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

42 komentar :

  1. thanks for share... makin jago aja nih.. otak atik templtenya.... keep blogging...

    BalasHapus
  2. salam sahabat
    subhanAllah Ukhti semakin cantik aja nich thnxs 4 sharing ya...good luck

    BalasHapus
  3. aq pengen tahu hasilnya, nanti aq coba

    BalasHapus
  4. Ni yang dhe cari2.. tar dhe coba terapkan ahh di blog satu lg..
    Dhe mau utak atik templatenya dulu :D

    BalasHapus
  5. baru sempat mampir...
    balik lagi ke warna pink yang cantik
    makasih banyak tutorialnya.
    Sehat dan sukses selalu.
    Salam taksim

    BalasHapus
  6. makasih tipsnya,
    tapi saya coba kok jadinya bejejer ke bawah bukan kesamping ???
    oh iya kalo saya boleh tanya,, cara memberi layout pada blog dari Pimp-My-Profile gimana ya ?
    hehe mau tanya aja :)

    BalasHapus
  7. @ Dhana: Syukron ukhty
    @ Suci dah ta' jwb balik de'
    @ Go green, khan dah ada tu link dari hasil tutorial ini, anchor teks linkx see my result
    @ Dhe: Oke dhe, mg berhasil
    @ Seti@wan: Iya kmrn hnya jd model tuk al-aswad al-fateh
    @ Sakura: Linkx? Mngkn ada langkah yang tertinggal? Anaa buat postingan tutorial ini stlh berhasil menerapkannya diblog ini

    BalasHapus
  8. wah...baguus banget tadi blognya kepengeeen !!!
    sepertinya sih tidak...atau mungkin karena template blogger saya kolomnya kecil makanya jadi kebawah ya berderetnya ?
    oh iya kalo boleh tanya, dapet template blognya darimana sih admin ???
    aku template bloggernya masih blom ada nih, boleh minta tolong ???

    BalasHapus
  9. Template ini desain saya sendiri, namanya wardah hulwah hanya krn belum ada waktu lbh blm saya publish diblog saya template design (linkx adaa pd sidebar dan akhir template ini).

    Untuk demonya disini Wardah Hulwah Blogger Template

    Iya slagi bisa saya upayakan, minta tolong apa?

    BalasHapus
  10. bisa tolong cek blog saya ? hehe udah bagus atau blum, ada yang kurang atau enggak
    http://www.animeanimemania.blogspot.com/

    hehe mohon bantuannya, dan kalo boleh saya tanya
    caranya memberi template lewat code itu bagaimana ? saya sudah nemu codenya...sudah tersedia gratis di internet. tapi saya gak tau cara menaruhnya :)

    dan maaf kalo saya kebanyakan nanya
    truz sakura juga mau bilang terimakasih atas tips2 blogging di blog ini :) sangaaaaaat bermanfaat

    BalasHapus
  11. @ Sakura: cara untuk ganti template klu file yg didownload formatnya xlm pada bagian edit HTML bagian atas ada tulisan Upload sebuah template dari sebuah file pada hard drive Anda: klik telusur pilih file yang telah didownload klik unggah.

    smg dapat membantu

    BalasHapus
  12. kalo yang dari code di internet ??
    oh iya, jangan lupa admin kunjungi animeanimemania.blogspot.com ya :)

    BalasHapus
  13. @ sakura: maksudnya apa? kalau kodenya dah tersedia, hapus kode template sebelumnya ganti dengan kode yg dah ada, sblm simpan template klik pratinjau dulu klu dah berubah sesuai tampilan preview template yg didownload tgl klik simpan template

    BalasHapus
  14. mantab sob...thank's for comment yach...!!!

    BalasHapus
  15. Balasan apresiasinnya jg

    BalasHapus
  16. Wah saya lg mencari ini dah biar bs menampilkan social icon.....

    trims infonya n lgsg saya akan coba.....

    BalasHapus
  17. smg berhasil, terimakasih apresiasinya

    BalasHapus
  18. manfaatnya begitu ya? maklum gak ngerti n lum pasang....
    makasih tutorialnya mba.

    BalasHapus
  19. makin keren aja mba...salut...
    tarus berbagi ilmunya ya mba.

    BalasHapus
  20. @ Anaa jg baru ngerti kok ukh, iya ukh. Syukron apresiasinya

    BalasHapus
  21. Bagus sekali tutorial dan penjelasan manfaat icon2 social bookmarknya. Terimakasih, dapet wawasan baru .. Sukses juga untuk anda sobat :)

    BalasHapus
  22. cuma mo ngasih tahu, ada tag buat sobat d blognya Rizky, jika berkenan silakan d ambil yah

    http://rizky2009.blogspot.com/2010/02/tag-about-yourself.html

    BalasHapus
  23. hoo.. emg penting yaa..
    haha.. blogku mah asal aja jd kayanya gag perlu gini"an..

    BalasHapus
  24. SUCI CREATIVITY

    kak,,widget social bookmark ini jd nambah Loading bLog gag?

    BalasHapus
  25. bagus juga iconnya, tapi saya pake yang lama dulu soalnya yang lama, bisa sembunyi terus kalo di klik nongol, hehehehe

    BalasHapus
  26. Ass.wr.wb
    Salam kenal ukhti.. blognya cantik tutorialnya mantap.. jadi pingin ngelink nih.. hehe.. ohya dah saya follow tuh ,, followback ya

    BalasHapus
  27. @ all: terimakasih apresiasinya, maaf blm smpat bls komentarx satu persatu

    BalasHapus
  28. wah aku paling puyeng kalo maenan kode2 script kaya gitu ... heheh maklum maenane jagung bakar heheh salam kenal

    BalasHapus
  29. wah ilmu baru...
    mantabs...
    thx

    BalasHapus
  30. assalamualaikum ukhti,,
    Q pakai nie bookmarknya di blogQ,,
    jajaqouwloh ya infonya,,,
    ^_^

    BalasHapus
  31. Makasih mas, atas infonya....
    saya dari kemarin mencari-cari informasi tentang trik yang ini tapi bru ketemu sekarang....
    Makasih Mas....
    nie blog saya www.chemie08.blogspot.com

    BalasHapus
  32. Adwuh jadi malu nie salah menyapa....
    Maaf ya mba, Habis saking seneng nemuin yang dicari sampai ga memperhatikan blog yang dibuat penulis. Padahal nuansa blog ini cewek banget...
    Skali lagi maaf ya Mba.....
    Bneran qo ga da maksud laen.....

    Trimakasih atas sarannya...
    Harap dimaklumi blogger baru... >_<

    BalasHapus
  33. makasi tutorialnya...keren banget nih....

    BalasHapus
  34. Assalamu Alaikum,
    udah coba mas, tapi saya nda temukan kode di blog saya, kenapa yah?

    BalasHapus
  35. Wah, tutorial yang sangat bagus. Terima kasih banyak sudah berbagi

    BalasHapus
  36. Thanks tutornya ya.. saya sudah aplikasikan di blog saya tapi modif sedikit biar muat. wassalam

    BalasHapus
  37. These are a very detailed article which is really helped me a lot and surely try to implement them them to my blog. Thanks for the author!!
    Advertising agencies in Pakistan | Advertising agencies in Karachi

    BalasHapus
  38. I am so glad to see this. Meat definitely needs to be cooked to a certain point. This is not good for you when it is not cooked to this point.
    heathrow to w2 | southend to w2

    BalasHapus
  39. Gak work di blog saya yah.. :((

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!