25.12.13
71
Gambar Tombol Share
Cara Mudah Membuat Tombol Share Di Blog - sebenarnya banyak variasi yang dapat kita pasang di blog, dari yang keren, super keren hingga kita bisa Membuat Tombol Share Di Blog dengan warna-warni agar terkesan menarik dimata pengunjung.
Dengan adanya Widget Tombol Share yang Menarik di blog seakan memberi pesan kepada Visitor Blog agar dengan mudah melakukan Share/Berbagi atas apa yang telah mereka baca di artikel blog anda. Namun jika anda tidak memasang tombol share sekalipun sebenarnya blogger telah menyediakan widget tombol share di setiap template default blogger. Hanya saja banyak diantara pengguna blogger kurang menyukai tampilan widget tombol share default blogger karena tidak valid HTML5, sehingga mereka melakukan modifikasi widget tombol share tersebut hingga terlihat menarik dengan paduan warna-warni.

Untuk Cara Mudah Membuat Tombol Share Menarik Di Bawah Postingan Blog kita hanya menggunakan kode CSS, disini saya akan sedikit berbagi Kode CSS widget Tombol Share dipertemuan kita kali ini.

Artikel terkait -

Berikut Tutorial Cara Mudah Membuat Tombol Share Di Blog
  1. Login ke Akun Blogger Sobat
  2. Pilih menu TEMPLATE lalu klik Edit-Template
  3. Silahkan Copy CSS berikut dan Paste ke-Template sobat tepat di bawah kode <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='bookmark'>
<style>
.bookmark{margin-top:5px;border:5px double red;border-right:1px solid red;border-left:1px solid red;background:#9fc5ed;box-shadow: 0 2px 5px 2px #ddd;}
.bookmark h4{color:#666;border-bottom:1px double red;padding:0;margin-bottom:10px;padding-left:10px;}
.bookmark img{}
.book{float:left;margin:0 8px 0 0;padding:1px;border:1px solid #eee;background:#ffffff;}
  .booklast{float:left;margin:0;padding:1px;border:1px solid #eee;background:#ffffff;}
</style>
<h4>If You Like This Post, Share it With Your Friends</h4>
<div align='center'>
<span class='st_facebook_large' displayText='Facebook'/>
<span class='st_twitter_large' displayText='Tweet'/>
<span class='st_linkedin_large' displayText='LinkedIn'/>
<span class='st_digg_large' displayText='Digg'/>
<span class='st_stumbleupon_large' displayText='StumbleUpon'/>
<span class='st_reddit_large' displayText='Reddit'/>
<span class='st_tumblr_large' displayText='Tumblr'/>
<span class='st_email_large' displayText='Email'/>
<span class='st_dzone_large' displayText='DZone'/>
<span class='st_netlog_large' displayText='Netlog'/>
<span class='st_google_large' displayText='Google'/>
<span class='st_identi_large' displayText='identi.ca'/>
<div style='clear:both;'/></div></div>
</b:if>

Keterangan- Silahkan ganti kata yang berwarna merah sesuai dengan selera anda.
Selanjutnya Copy CSS Berikut dan Paste ke-Template Sobat sebelum kode </head>

<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({onhover:false , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>


Jangan lupa langsung di Save Templatenya, dan lihat hasilnya.

Semoga apa yang saya sampaikan diartikel tentang Cara Mudah Membuat Tombol Share Di Blog ini dapat memberikan manfaat, dan tunggu artikel menarik lainnya di pertemuan kita lain waktu. Terimakasih

- Happy Blogging -
Diperbaharui pada Wednesday April 16, 2014

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Cara Mudah Membuat Tombol Share Di Blog
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

71 komentar

  1. tombol share ini memang sangat bagus untuk penghias blog dan juga untuk meningkatkan pageview blog kita. Thanks ya atas share nya :)

    BalasHapus
  2. jadi pengen juga nich pasang tombol share ini, soalnya blog sya belum ada hehe :D

    BalasHapus
    Balasan
    1. @Wahyu Eka Prasetiyarini- silahkan sob,,oh ea..kayaknya saya sering melihat foto profil kamu tetapi di site cara ririn tapi ko ini beda ea site nya..
      Terimakasih sob udah mau berkunjung

      Hapus
    2. Itu Memang Mba Ririn :)
      Master Blogger yang tersembunyi heheheh

      Hapus
  3. mantap dhe postingannya ,ijin praktik di blog saya :)

    BalasHapus
  4. artikel anda mulai dari halaman awal nggak bosen bacanya, ijin copas mbak devy.. langsung praktek

    BalasHapus
  5. menarik mbak mau saya praktekin

    BalasHapus
  6. mba devy, ne xo gk muncul,,,??

    BalasHapus
    Balasan
    1. kode data:pos.body ada banyak pada template mas, coba letakkan pada kode yang terakhir

      Hapus
  7. thanks banget tutorialnya bro, mudah dimengerti dan enak dicustom...

    BalasHapus
  8. artikelnya baguzz bangett!! (h)
    langsung dicoba nih
    komen back ya http://rakaraperz.blogspot.com x-)

    BalasHapus
  9. Wah boleh di coba, terimakasih gan infonya... :d

    BalasHapus
  10. mampir gan
    http://cybermanlink.blogspot.com/

    BalasHapus
  11. KALAU DI WEB BLOGDETIK BAGAIMANA,SAYA KOK SUSAH BUAT KOTAK SHARE PADA TULISAN DI BLOG SAYA

    BalasHapus
  12. Wah manteb sob infonya...
    http://www.kopnamikaze.blogspot.com/

    BalasHapus
  13. thanks gan, izin copas ya

    BalasHapus
  14. wah nice post. asli 100 % berhasil gan tutorialnya. thnx y gan.
    http://dananxkusuma.blogspot.com/

    BalasHapus
  15. Neng kalo share di pos body mah udah ada bawaanya, kalo buat di halaman, gimana perintahnya,..???

    BalasHapus
    Balasan
    1. kalau buat halaman banyak mas, sidebar halaman,header halaman atau halaman postingan, yang mana satu ini mas..?

      OK saya ambil satu contoh saja
      jika ingin menempatkan bersamaan dengan header, maka carai kode selector yang mengatur tampilan header, tempatkan kode HTMLnya tepat dibawah kode penutup header </div> namu jika diatas maka cari class untuk pengaturan headernya lalu tempatkan diatas jika ingin diatas header

      Hapus
  16. terimasksh....

    BalasHapus
  17. Saya nyimpen Script di textarea gagal terus, kadang terbaca menjadi yang seharusnya, contohnya seperti di blog ini pada widget Free Backlink. Bagaimana caranya supaya script Backlink di textarea tidak terbaca menjadi perintah. Mohon pencerahan.

    BalasHapus
    Balasan
    1. kompresor kode mbak. misalnya jika ingin menuliskan simbol < maka tulis sebagai kode seperti ini (& l t ; )
      sehingga perintah kode akan terbaca sebagai teks. semoga dapat membantu

      Hapus
    2. ijin nyoba........... terima kasih

      Hapus
  18. Balasan
    1. mungkin penggunaan atau peletakan kode scrip yang bermasalah, karena setip template berbeda versi, jika diletakkan diwilayah kode </head> tidak dapat berfungsi, coba letakkan diatas kode penutup tag </body>

      Hapus
  19. Mantap nih, pembaca jadi bisa dengan mudah menyebarkan artikel kita jejaring sosial. Bisa dipasang nih bagi yang blognya pingin banyak dikunjungi.

    BalasHapus
  20. Wah bagus banget jangan lupa mampir ke blog saya mbak http://adf.ly/lTIc3

    BalasHapus
  21. mantapppppp.......itu kategori file sama dropdown menunya keren abis.......kasih tau dong cara bikinnya

    BalasHapus
  22. mantap gan ijin coba dan di praktiken :d
    kalo ada waktu mampir gan
    http://indo-sharebest.blogspot.com/

    BalasHapus
  23. udah coba tapi kok ga berhasil ya mbak...mohon pencerhannya...www.crystalxnasa.biz

    BalasHapus
  24. Om Thank Infonya+Aq Udah Pasang Link Om Di Blog Saya
    Jangan Lupa Kunbalnya Yaa
    www.tebaskalbarindonesia.blogspot.com :D

    BalasHapus
    Balasan
    1. siap meluncur ke blog ibu dech, terimakasih ya sudah memasang link blog saya;
      salam kenal

      Hapus
    2. gimana cara memasang hati saya ke tempat mbak yah..tolonk yah :))

      Hapus
  25. good
    jangan lupa cek kami ya
    http://bikinkaosmurahbandungonline.blogspot.com/

    BalasHapus
  26. terima kasih atas informasinya gan..
    blog saya jadi lebih bagus dengan tombol shareny...
    kalo mao berkunjung silahkan.. http://duniainformasikesehatan.blogspot.com

    BalasHapus
  27. Terima kasih semoga bermanfaat, kunjungi blog kami www.arabianbutik.blogspot.com

    BalasHapus
  28. terima kasih banyak, infonya sangat bermanfaat :)

    www.hachibi.tk

    BalasHapus
  29. terima kasih. kunjungin juga dan follow di bawah ini.
    http://muhammadimamsirait.blogspot.com/

    BalasHapus
  30. mbak menu barnya keren bangetz gimana bikinya
    *maaf aga membelok dari post*

    minta kunjungannya

    http://salmanbloger.blogspot.com

    BalasHapus
    Balasan
    1. cari saja mas di label blog ini tentang menu navigasi, tutorilnya sudah saya share

      Hapus
    2. oke siip mba, jangan pake mas umur saya baru 14

      kalo cara buat tombol balas di komentar gimana mba?

      Hapus
    3. tombol balas gimana maksudnya ya, masalahnya setiap blog yang mengaktifkan fitur komentar saya yakin setiap pengaturan pada kolom komentar sudah dilengkapi dengan tombol balas dan hapus,

      maksud sobat salaman gimana ya?

      Hapus
    4. Komentar yang ada di Blog tidak bisa dibalas

      Hapus
  31. Thanks gan.
    Kunjungan balik http://www.imamblog.com/

    BalasHapus
  32. terima kasih kak :) tapi kak kalau cara hapusnya gimana?

    BalasHapus
  33. terima kasih kak :) tapi kak kalau cara hapusnya gimana?

    BalasHapus
  34. saya uda coba kok ngak bisa ya....
    saya pake template sederhana uda coba semua cara tetap ngak bisa hehehehe

    BalasHapus
    Balasan
    1. pastikan template Anda sudah menggunakan jQuery

      Hapus
  35. mampir balik yah.. (o)
    http://new-magz.blogspot.com/

    BalasHapus
  36. sip kunjungi juga
    http://magezine123.blogspot.com

    BalasHapus
  37. sudah cuba pastekan sebagaimana yang ditunjuk ajar..tetapi tak menjadi apa-apa..bahagian mana yang saya buat silap?

    BalasHapus
    Balasan
    1. Aldi taher dan Atiqah Aziz.

      pastikan template Anda sudah dilengkapi dengan script-jquery seperti ini:

      [pre]<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>[/pre]

      Hapus
    2. kalau belum ada pasang script-jquery di mana ya mba?

      Hapus
  38. Thanks gan, udah ane terapkan di blog ane, sarwoediblogspot.blogspot.com

    BalasHapus
  39. Sebuah Blog yang sangat bermanfaat .... Maju terus blog Indonesia

    BalasHapus
  40. hahaha blog aku juga dah pake thanks ya
    hanghangs.blogspot.com

    BalasHapus
  41. makasih atas infonya, bagus banget.
    di tunggu kelanjutannya

    BalasHapus
  42. bagus bro,,,
    sungguh bermanfaat,,
    Mohon kiranya kunjung web ane yang lagi GALAU saja.

    diebago.blogspot.com

    maacih qaqa

    BalasHapus
  43. trims sudah berbagi..
    keren nih blog nya sob..

    BalasHapus
  44. kok ada tulisan ini mbak>?? The widget with id "Blog1" contains at least two b:includable elements with the same id: "shareButtons". All b:includable elements should have a unique id for a given widget.

    BalasHapus
  45. Terima kasih mbak Dev share buttonnya, sedikit saya edit tampilan warnanya

    BalasHapus
  46. aku langsung coba nih mbak , makasih yaa jadi dapet ilmu baru css buat masang tombol share hehe

    BalasHapus
  47. Mantap gan......mau saya terapkan....maklum...newbie

    BalasHapus
  48. keren gan.. mampir juga di www.magknowledge.blogspot.com

    BalasHapus
  49. waw keren ya mas..
    enjoy

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK