Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Memasang Button Share Artikel Di Blog


Cara Memasang Button Share Artikel Di Blog  - Membuat tombol share artikel/posting ke berbagai social bookmark saat ini seperti sudah menjadi satu kewajiban bagi seorang blogger. Karena dengan memasang tombol/button share artikel ini justru akan membuka peluang bagi kita untuk mendapatkan tambahan trafik dari berbagai social bookmark seperti Facebook, Twitter, Reddit, Digg, StumbleUpon, Myspace, Google Buzz atau mungkin Google Plus One (+1). Nah pada tips blogging kali ini saya mau share bagaimana cara memasang button share artikel (Bagikan Artikel ini ke…) di blog sobat yang kode scriptnya saya ambil dari layanan Addthis.com. Dengan memasang script dari Addthis ini maka sobat blogger dengan mudah dapat membagikan (share) artikel anda ke ratusan layanan social bookmark hanya dengan sekali klik saja. Tombol/button share social bookmark ini nantinya akan berada diatas postingan atau dibawah judul artikel, mirip seperti yang ada di blog ini (tapi ngga sama lho..).

Dibawah ini ada 3 script untuk membuat tombol/button share artikel berikut preview gambarnya :

1.       Kode script button share style-1:

<!-- AddThis Button BEGIN -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div></b:if>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71feed783c3890"></script>
<!-- AddThis Button END -->

2.       Kode script button share style-2:

<!-- AddThis Button BEGIN -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div></b:if>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71ff8750bee738"></script>
<!-- AddThis Button END -->

3.       Kode script button share style-3:

<!-- AddThis Button BEGIN -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div></b:if>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71fdea5bff8d67"></script>
<!-- AddThis Button END -->

Nah dari 3 style button share social bookmark yang ada diatas, tinggal sobat pilih aja mau menggunakan yang mana. Adapun cara pemasangannya pada template, ikuti langkah-langkah dibawah ini :
1.       Login ke dashboard blogger anda.
2.       Pilih Rancangan > Edit HTML, centang Expand widget template.
3.       Cari kode <data:post.body/>  atau kode <div class='post-header-line-1'/>  pada template anda ( salah satunya saja ! ) dan letakkan script button sharenya diatas kode tadi.
4.       Save template dan lihat hasilnya.

Nah sekarang sobat blogger dan pengunjung blognya sudah bisa melakukan share artikel yang sedang dibaca ke berbagai social bookmark. Berdo’alah semoga orang lain yang melihat link blog anda di social bookmark tertarik untuk mengklik link tersebut dan sobat akan mendapatkan trafik-trafik baru yang datang dari layanan social bookmark tersebut. Mudah-mudahan tips blogging cara memasang tombol share artikel ke social bookmark ini berguna untuk anda. Salam Blogger.


79 komentar untuk "Cara Memasang Button Share Artikel Di Blog"

  1. terima kasih gan untuk ilmunya
    slam kenal.

    BalasHapus
  2. @Aldio
    Salam kenal juga Aldio :D

    BalasHapus
  3. saya sudah pasang salah satu script yang ada di atas di template blog saya. waktu saya save template sukses, tapi setelah di preview, button share kok nggak terlihat di blog saya ya? mohon pencerahannya sob

    BalasHapus
  4. layanan addthis ya...
    salam kenal

    BalasHapus
  5. @download center software

    Sudahkah sobat mencentang tulisan Expand widget template sebelum menambahkan script Addthis ? Pastikan dulu yang ini ! Jika masih tidak bisa, saya melihat pada template anda terdapat kode ini <div class='post-header-line-1'> dan coba aja letakkan script diatasnya. Semoga berhasil ;;)

    BalasHapus
  6. thanks sob infonya,,,salam kenal dari saya,,,kunjung balik ya http://blogku--inspirasiku.blogspot.com

    BalasHapus
  7. berguna banget buat saya gan....
    makasih.salam kenal
    menunggu kunjungan balik senior.

    BalasHapus
  8. saya mau tanya nih sobat, aku kan dah punya tuh tapi cuman untuk google plus aja, nah kalau kita pasang ini effeknya gimana? apakah yang lama akan hilang? atau tetap ada?, kalau hilang atau di hilangin dan di ganti apa data klik G+1 blog aku akan terhapus, makasih maaf banyak bertanya moga gak sesat di jalan :)

    BalasHapus
  9. kok gak bisa ya, padahal udah sesuai prosedurr.??

    BalasHapus
  10. sangat bermanfaat.. kebetulan saya belum memasangnya

    my blog: http://dunia-infox.blogspot.com

    BalasHapus
  11. thnks masbro! stl bykny blog yg ane kunjungi dan ane coba tips2 pasang button share yang kebanyakan tdk berhasil, akhirnya nemu blog nya masbro ini bisa berhasil.

    haturnuhun kang!

    BalasHapus
  12. mantap gan..........jgn lupa mampir donk

    http://gubukpantun.blogspot.com/

    BalasHapus
  13. makaih sob tutorialnya... salam knal sob...

    BalasHapus
  14. Saya pakai kode ke tiga, ketika pas di buka ada tombol addthis warna merah dengan gambar plus. Tetapi ketika saya share di fb tombol tersebut ilang menjadi tulisan akngka satu, kenapa yach !

    BalasHapus
  15. TQ yah infonya...skrng tombol share nya aku pakek di blog ku :)

    BalasHapus
  16. Salam kenal bung...ikut nimba ilmunya :)

    BalasHapus
  17. makasih info nya pak.tapi kok saya coba masih blm bisa kluar nya.

    BalasHapus
  18. Thanks ilmunya sob, info yang sangat bermanfaat !!!
    Main-main dong di blog aku, http://wafariq.blogspot.com

    BalasHapus
  19. sip gan langsung praktek.ditunggu kunjungan senior mohon bimbingan

    BalasHapus
  20. nice info gan langsung dipraktekin ^^

    BalasHapus
  21. artikelnya bagus, sangat membantu. Makasih ya & salam kenal :-)

    BalasHapus
  22. mmakasih banget
    artikelnya bantu banget nih :D

    BalasHapus
  23. kk saya mw nanya..
    saya sudah buat fb like button di blog saya, dan itu berhasi.

    namun setelah saya mengubah template saya, fb like buttonnya hilang. saya mencoba untuk mengcopy script nya lagi, setelah saya save ga ada muncul like buttonnya..

    kasi saya masukan kk.. thx

    BalasHapus
  24. kalo udah pake templet gretongan suka susah nongolin tuh buton, huh... sekalinya nongol pake addthis...eh nggak bisa konek. sekalinya konek eh ke situs antah berantah..
    masi belum berhasil sob, thx

    BalasHapus
  25. makasih infonya Gan!!!! keeep sharing

    BalasHapus
  26. saya dah coba script di atas,,dan berhasil tapi si button share nya ada di atas,,klo di pindah ke bawah postingan gimana ya scriptnya,,,mohn bantuannya gan thangks

    BalasHapus
  27. @aditya rizki
    Untuk menempatkan share button dibawah posting kamu letakkan aja scriptnya tepat dibawah kode <div class='post-footer'> pada template. Dicoba dulu ya.. ;)

    BalasHapus
  28. iah udh dicoba ternyata script footer jg ternyata gaa ada yang bener" mirip sma yg td gan ksih tau gan,,,hahaha

    gapapa deh dari pada mumet mikir nya buat sementara di simpen di atas dulu,,
    maklum msih newbie

    tapi makasih loh infonya gan...bermanfaat bgt

    BalasHapus
  29. gan , makasih
    blog nte membantu ane yang gaptek :P hehheeheee

    BalasHapus
  30. gan untuk button share animasi yang kayak pnya mu gimana tuh...keren gan...:).
    kasih tau donk...hehe...

    BalasHapus
  31. kalau nggak ada kode data:post.body/ atau kode div class='post-header-line-1'/ bagaimana?

    BalasHapus
  32. Makasih tombol sharenya Gan,kemana aja nieh,happy weeknd and happy blogging.

    BalasHapus
  33. Setelah button dipasang cara share artikelnya gimana mas???
    saya biasanya pake onlywire mau nyoba addthis di blog yg lain

    makasih sebelumnya

    BalasHapus
  34. template aku gak ada share butonnya,,,, gmana nampilin langi ya, tapi hare butonnya bawaan dari blogspot

    BalasHapus
  35. Makasih udah berbagi ilmu bro :D
    Salam Ukhuwah.

    BalasHapus
  36. makaseeeeeeeeeeeeeeeeeeeeeehhhhhhhhhhhh

    BalasHapus
  37. Terimakasih mas bro. dengan tips ini akhirnya berhasil membuat share button di blog saya.

    BalasHapus
  38. BAGI TEMEN TEMEN YANG MAU MENDOWNLOAD GAME PC SILAHAKN MENUJU KUNJUNGI BLOG SAYA

    BalasHapus
  39. wah tampilan harus menarik ya selain konten, oke dah ilmunya saya coba makasih yo

    BalasHapus
  40. makasih gan ilmunya.
    salam kenal
    http://catatan-google.blogspot.com/

    BalasHapus
  41. trima kasih atas infonya sob...

    http://nsfc-club.blogspot.com/

    BalasHapus
  42. Thnaks masbro Aku ambil yang ketiga nya

    BalasHapus
  43. Tanks infonya
    mau saya coba dulu :)

    BalasHapus
  44. sob, biar tampilanya ditengah caranya gmn ???

    BalasHapus
  45. @Rifky Fuady
    Untuk membuat widgetnya ditengah tambahkan kode <div style="text-align: center;"> dan kode penutup </div> pada script. Sehingga kodenya menjadi seperti ini:

    <div style="text-align: center;">
    <div class="addthis_toolbox addthis_default_style ">

    =====KODE WIDGET=====

    </div></div></b:if>

    BalasHapus
  46. Thanks infonya sob,langsung praktek :)

    BalasHapus
  47. waahh,,makasih ni postingnya membantu saya.

    BalasHapus
  48. Mantapp gan
    jgan lupa kunjungi blogQ yaahh

    yenzay90.blogspot.com

    BalasHapus
  49. nice infonya..

    ditunggu kunjungan balik keblog gw

    http://rickyrm.blogspot.com

    BalasHapus
  50. Terima Kasih yaaa,
    saya udah nyari kemana-mana, tapi cuma kode html nya aja!
    :D

    BalasHapus
  51. salam dunia cyber....
    thanks bro....

    http://duniacyberyogz.blogspot.com

    BalasHapus
  52. kunjungi blog saya gan ...http://eponkgotosucces.blogspot.com/

    BalasHapus
  53. terima kasihg juragan yang baik hati telah memberikan informasu yang sangat bermanfaat kepada http://gasud.com

    BalasHapus
  54. thanks gan dah berhasil.
    buat agan agan yang mo visit silakan gan,dengan senang hati ^ ^

    BalasHapus
  55. gan gimana caranya bikin kotak komentar, yang kayak gini mohon pencerahannya gan , kalau bisa kirim script HTML ny donk ke e-mail aq

    andre_online@ymail.com
    tolong ya gan plssss

    BalasHapus
  56. mantap gan terimakasih infonya,....

    BalasHapus
  57. nice share , thanks :)

    BalasHapus
  58. makasih gan sangat bermanfaat

    BalasHapus
  59. thanks gan infonya..
    follback yah gan..
    ;)

    BalasHapus
  60. Thanks infonya Bro,,mau di coba nih di blog saya...

    BalasHapus
  61. okeh lagsung ane coba neh ,, thx yak

    agen togel

    BalasHapus
  62. langsung dicoba gan... terima kasih atas sharing ilmunya :)

    Salam

    BalasHapus
  63. mas, ada gak widget share button facebook, twitter dan google plus aja, trus yg besar thumbhailnya sama atau lebih besar sedikit dari script yg no.2 coz pengin di taruh di halaman depan blog dan gimana caranya menaruh widget disamping kanan atau kiri judul postingan..

    ditunggu pencerahannya ya mas..
    thanks dan sorry jika banyak tanya, maklum masih newbie

    BalasHapus
  64. kl masang yg diatas bikin berat blog ga mas? soalnya punya saya gampang error. saya cb dl ya mas mudah2 ga error.
    makasih mas dan salam kenal..

    BalasHapus
  65. patut di coba ini ... thank share nya kang...

    BalasHapus
  66. gak bisa tuan. kumaha nya. sok geura mampir ka blog saya rara-rememberme.blogspot.com

    BalasHapus
  67. klo untuk menampilkan share button di versi selular/mobil gimana ya?! Saya mau mengedit share button bawaan blog menjadi seperti itu untuk versi mobile. Untuk versi desktop nya sudah seperti di atas.
    Tolong jawab di blog saya ya.. http://rei-khan.blogspot.com

    BalasHapus