106

Cara Membuat Tombol Share Facebook, Twitter dan Google +

Bisnis Berkah Halal
Cara Membuat Tombol Share Facebook, Twitter dan Google +
Cara Membuat Tombol Share Facebook, Twitter, Google + dll. Membuat tombol share facebook, twitter, digg atau mungkin ditambah dengan Google + diatas setiap posting / artikel blog dengan cara menambahkan kode atau script pada template anda. Share button atau tombol share untuk blogger sebenarnya bisa langsung anda dapatkan kodenya di situs situs yang menyediakannya, seperti contoh situs sharethis.com yang menyediakan kode untuk di pasang pada blog anda dengan fitur share yang lengkap. Namun yang kurang menarik adalah penempatannya yang kurang stretegis. Kali ini saya akan share cara membuat tombol share facebook, twitter, Google + dll di atas posting blog anda.

Cara membuat tombol Share atau Share button Blogger

  • Pertama silahkan login blog anda
  • Klik menu Design > Edit HTML > centang expand widget templates
  • Cari kode <div class='post-body entry-content'> atau class='post-body entry-content' dan biasanya ada 2 kode tersebut, pakailah kode yang pertama
  • Jika sudah ketemu, copy kode dibawah ini dan paste tepat diatas kode <div class='post-body entry-content'>
Kode
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:5px 0px 5px 0px;width:100%;float:left;height:20px;'>
<div style='float:left;padding-left:0px;font:normal 12px Georgia;'>
Share on :
</div>
<div style='float:left;padding-left:10px;'>
<a name='fb_share' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>
</script></div>
<div style='float:left;padding-left:10px;'>
<a class='DiggThisButton DiggCompact'/>
<script type='text/javascript'>
(function() {
var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0];
s.type = &#39;text/javascript&#39;;
s.async = true;
s.src = &#39;http://widgets.digg.com/buttons.js&#39;;
s1.parentNode.insertBefore(s, s1);
})();
</script>
</div>
<div style='float:left;padding-left:10px;'>
<a class='twitter-share-button' data-count='horizontal' data-via='User Name' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div style='float:left;padding-left:10px;'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="medium"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
</div>
</b:if>
  • Langkah terahir yaitu simpan template
Cara Membuat Tombol Share atau share button di blogger ini adalah cara paling mudah untuk memasang fitur share / membagikan artikel anda. Share button ini juga bisa anda edit sesuai keeinginan anda, tapi jangan lupa back up templatenya dulu untuk menghindari kesalahan pada proses editing. Oh ya "User Name" diganti user name twitter anda. Untuk blog yang sudah menggunakan read more biasanya bukan menggunakan kode
<div class='post-body entry-content'>
melainkan kode di bawah ini
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
Pahami dulu, baru praktekkan cara membuat tombol share atau share button blogger type ini.

Manfaat Tombol Share / Share button blogger

Manfaat tombol share adalah memberikan kesempatan para pengunjung / visitor blog agar mereka bisa berbagi dengan teman atau jaringan mereka melalui fitur share yang tersedia pada blog anda. Tentunya ini sangat penting, secara langsung pengunjung akan mengajak orang lain untuk megunjungi blog anda. Selamat kebanjiran visitor dengan memasang tombol share / share button pada blog anda.
Tweet

106 comments:

  1. alhamdulillah sukses. thanks sob tutornya

    BalasHapus
  2. ok sama2 mz... thankssudah mampir

    BalasHapus
  3. tanks bos,tutornya,,,ane coba dulu

    BalasHapus
  4. @Fenomania: yup sama2.. thanks juga sudah mau mampir dan meninggalkan komentar disini :)

    BalasHapus
  5. Makasih banayak infonya sob,happy blogging.

    BalasHapus
  6. @Er'end: yua,, thanks sudah bersedia mampir disini sobat :)

    BalasHapus
  7. nice tutor. thx

    BalasHapus
  8. @kakalushop: iyah sama2 thanks juga sudah mampir

    BalasHapus
  9. Terdampar disini mencari cara memasang tombolbshare .Makasih tipsnya sob,happy weekend and happy blogging.

    BalasHapus
  10. @Laras Mays: iyah sama2 mbak... makasih sudah mampir juga :)

    BalasHapus
  11. Many Thnaks Gan langsung ke TKP

    BalasHapus
  12. @Pruproteksi: iyah.. sukses yah :)

    BalasHapus
  13. nice info kaka...like it...

    siap dicoba...:)

    BalasHapus
  14. @Akhsa Nant: silahkan di coba :D semoga sukses

    BalasHapus
  15. thk ya http://mashasih.blogspot.com

    BalasHapus
  16. iyah sama2 thanks juga sudah mampir

    BalasHapus
  17. Muantap gan infonya...

    mampir ke warung ane gan..

    BalasHapus
  18. @Alam Maya: iyah nanti saya mampir makan2 kkwwwkwkw

    BalasHapus
  19. Terima kasih infonya. Sangat membantu.

    BalasHapus
  20. @Wikarso: iyah sama :) thanks juga sudah mampir

    BalasHapus
  21. Nice info gan....
    follow balik ya...

    BalasHapus
  22. @Ekhyshare: ia sama2

    BalasHapus
  23. campor baworDec 7, 2011 08:10 AM

    makasi ilmunya mas bro..salam knal...

    BalasHapus
  24. @campor bawor: iyah sama2 mas

    BalasHapus
  25. andaikupunyaDec 8, 2011 04:17 AM

    keren mas,udah akau cobak langsung berhasil

    BalasHapus
  26. saya sudah coba, tapi ga ada google plus one nya ya?
    klo FB, Digg n twitter ada..
    salah dimana ya saya? hehehe

    BalasHapus
  27. @andaikupunya: mantab dah :)

    BalasHapus
  28. @ayunakudo: mungkin koneksinya yg lelet mas.. kadang ilang2an itu :0

    BalasHapus
  29. Edykurniawan27blogDec 10, 2011 04:59 AM

    Dicoba dulu ah, mudahan bisa sukses. udah nyoba pasang berdasarkan tutorial dari blog lain tapi kagak berhasil. mudahan yang ini berhasil. makasih gan ilmunya...

    BalasHapus
  30. @Edykurniawan27blog: yup silahkan di coba dulu, kalo berhasil ditunggu laporannya hehe :)

    BalasHapus
  31. Blogger TutorialsDec 12, 2011 10:01 AM

    nice unfo.. saya coba dulu di blog kesayanganku..

    BalasHapus
  32. @Blogger Tutorials: silahkan semoga sukses

    BalasHapus
  33. makasih infonya... sangat membantu loh

    BalasHapus
  34. @thaufan: iyah sama2 :)

    BalasHapus
  35. thank's mas bro muantap pool...
    simple n' gampang di pasang..

    BalasHapus
  36. @sentir: sama2 mas,, :)

    BalasHapus
  37. cara hapus digg nya gimana ?
    kalo bisa digg nya di ganti sama fb like button..
    tolonh yaa...

    BalasHapus
  38. @Fumi: tinggal hapus script yang digg :D

    BalasHapus
  39. scrip fb ike untuk di post apa yaa ?

    BalasHapus
  40. @Fumi: <a href='http://bamz.us/2011/12/memasang-facebook-like-di-blog.html">Memasang facebook like di blog</a>

    BalasHapus
  41. Computer TriksDec 29, 2011 02:56 AM

    nice info

    BalasHapus
  42. @Computer Triks: iyah sama2

    BalasHapus
  43. Pecandu Wordpress Dan BloggerJan 2, 2012 06:16 AM

    awalnya saya gagal,, ternyata saya slah meletakkan kode yg dikarenakan banyaknya kode entry d tempate saya,, hhe,, terima kasih gan,,

    BalasHapus
  44. @Pecandu Wordpress Dan Blogger: hehe yah sama2 mas :)

    BalasHapus
  45. thx gan infonya,,, bermanfaat bgt.. mampir gan ke tempat ane,,

    BalasHapus
  46. @Hnd324: ok sama2 :)

    BalasHapus
  47. wohoo makasih om tutorialnya :)

    BalasHapus
  48. Takdir Rizki A.Jan 14, 2012 05:36 PM

    thanks tutorialnya.
    salam kenal tyan-bima.blogspot.com

    BalasHapus
  49. @beby: yup sama2 mas

    BalasHapus
  50. @Takdir Rizki A.: iyah, semoga sukses promosinya

    BalasHapus
  51. terima kasih mas Bamz...sudah saya coba and sukses,,,nice info

    BalasHapus
    Balasan
    1. yup sama2 mz :D

      Hapus
  • selalu aja tutorial dari mas Bamz yg berhasil, blogger2 yg laen kok ga bisa kayak gini ya hehehe...mas bamz salam kenal, udah berulang kali pake tutorial mas bamz selalu berhasil... :)

    BalasHapus
    Balasan
    1. hehe sip dah, salam kenal juga mz. :)

      Hapus

◄ Posting Baru Posting Lama ►
 

Copyright 2011 BLog Bamz Submit Artikel | About | Contact | Sitemap | Guest | Privacy