Memasang Button Share Media Social di Blogger

Memasang Button Share Media Social di Blogger Valid HTML 5 - Bingung mau ngasih judul apa, tapi mungkin bisa dipahami dengan judul di atas yang saya gunakan dengan campuran bahasa inggris yang berantakan, hehe. Dalam postingan kali ini masih dibawah postingan Baca juga: Membuat Artikel Terkalit ala Kang Ismet yaitu membuat button share seperti facebook,twitter,digg,lintaskan.
sb

Sebenarnya tombol share ini saya ambil dari template dari sista Kiki untuk DEMO bisa dilihat atau bisa seperti gambar diatas. Langsung saja  untuk cara memasangnya:
1. Login ke Blogger
2. Masuk Dashboard dan pilih Template > Edit HTML
3. Letakan kode HTML dibawah kode  <data:post.body/>
<div id='share-button'>
<p>Share to</p>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' style='background:#3b5998;'>Facebook</a>
<a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' style='background:#c0361a;'>Google+</a>
<a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;lang=id&quot;' rel='nofollow' style='background:#4099ff;'>Twitter</a>
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:blog.url' rel='nofollow' style='background:#000;'>Digg</a>
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' style='background:#FF9900;'>Lintaskan</a>");
//]]>
</script>
</div>
4. Untuk lebih keren tampilannya silahkan simpan kode CSS di atas kode ]]></b:skin> atau </style>
#share-button{margin:8px 0;padding:0;overflow:hidden;}
#share-button p{float:left;background:#fafafa;display:block;padding:5px 8px !important;margin:0 3px 3px 0;border:1px solid #fff;}
#share-button a{position:relative;float:left;display:block;color:#fafafa;padding:5px 8px;margin:0 3px 3px;border:1px solid #fff;}
#share-button a:hover{top:-2px;transition:all 0.4s;}
5. Simpan Template.

Silahkan atur sendiri supaya sesuai dengan template yang anda gunakan. Memasang Button Share Media Social di Blogger semoga bermanfaat. Bila ada kekurangan dalam postingan ini mohon untuk dikoreksi . Salam blogger Indonseia

31 Responses to Memasang Button Share Media Social di Blogger

  1. keren mas infonya, tapi saya sdh menggunakan tombol berbagi bawaan template, hehehe :D
    makasih sharingnya :)

    ReplyDelete
    Replies
    1. sama-sama mbak :) cuma sebagai alternative saja kok

      Delete
  2. pasti ini ringan ya sob!
    tapi saya lebih suka social button bawaan pihak ketiga walaupun lebih berat... thanks aja deh

    ReplyDelete
    Replies
    1. buat nambah backlink dunk ,hehe makasih

      Delete
  3. tampilan nya keren ya mas. Jadi kelihatan lebih cerah dari tombol share biasanya ya :)

    ReplyDelete
    Replies
    1. iya mbak, lebih cerah dan enak dipandang :D

      Delete
    2. kadang buka blog cara-ririn.com suka ada tulisan Error establishing a database connection entah itu karena koneksi lemah atau gmna.. hehe PHP =D

      Delete
  4. kemarin2 cari yg beginian, ehhh sekarang malah muncul....tapi sayang udah dipasang. makasih uda dishare

    ReplyDelete
  5. Untungnya bawaan template ada jadi ga ribet memasangnya, memang widget ini diperlukan agar kita bisa eksis di media sosial.

    Singgah ada postingan baru

    ReplyDelete
  6. oh gitu ya gan carana bikin button share media :D

    ReplyDelete
  7. Alkhamdulilah, button share sudah dari sononya. Terimakasih sharingnya mas.. Salam..

    ReplyDelete
    Replies
    1. bagus dunk jadi tidak perlu pasang lagi =D

      Delete
  8. Wah, keren juga mas tombol share sosmed nya. jadi lebih berwarna mas. tapi, saya lebih suka pakai yang simple2 aja mas. hehehe... makasih infonya.... :D

    ReplyDelete
    Replies
    1. makasih kembali :) bisa dijadikan alternative saja mas :D

      Delete
  9. Saya sudah pasang share button kang di bawah postingan, tapi bukan yang seperti di atas :D
    Mau ganti males otak-atik nya, hehe ^_^
    Tapi lumayan lah buat nambah" ilmu :)

    ReplyDelete
    Replies
    1. kang felix emg jago dalam pembuatan template :D

      Delete
  10. Sampai saat ini saya masih setia dengan bawaan blogger mas

    ReplyDelete
  11. nice info gan..
    akhirnya setelah dicoba" bisa juga,.. pnya ane data:post.body nya bnyak ... :D
    nice share

    ReplyDelete
    Replies
    1. wah mantep dunk,kalau banyak bisa di masukan di kode 2 dan ke 4 gan

      Delete
  12. sangat menarik sekali nih, bertambah lagi ilmu saya....
    makasih banyak.

    http://landongobatherbal.com/obat-herbal-insomnia/

    ReplyDelete
  13. Makasih infonya mas. Sangat bermanfaat
    Kunjungu juga blog ane http://teguhonline7.com

    ReplyDelete
  14. Hallo mas. Makasih tutorialnya. Work banget dan yang paling penting fast loading. :)

    ReplyDelete
  15. Saya menggunakan template dari pihak ketiga, tapi link social icon-nya masih belum bisa diganti, bagaimana cara gantinya ya?

    http://bengkuringweekly.blogspot.co.id/

    Terimakasih :)

    ReplyDelete

Note:
► Silahkan Berkomentar Sesuai Tema.✔
► No LINK. SPAM & PROMOSI ✘
► Segala Komentar Yang Masuk tidak Saya Moderasi ✔
► Dilarang Promosi (kecuali Ijin Admin ) ✔
► Link Hidup = Hapus.✔