Cara Membuat Tombol Berbagi [Share Button] Responsive di Bawah Postingan Blog

Tombol berbagi adalah tombol yang digunakan untuk mempermudah pengunjung untuk membagikan artikel yang ia baca. Tombol berbagi yang akrab disebut share button/share box ini bisa membuat blog anda terkenal. Caranya? Semakin banyak orang membagikan artikel di blog anda tentu blog anda akan semakin di kenal luas.

Untuk demo bagaimana penampakan share buttonnya,apakah responsive atau tidak bisa anda lihat di blog ini. Soalnya saya juga menerapkan di blog saya.Tentunya share buttton ini juga bisa meningkatkan jumlah visitor anda. Melalui orang-orang yang membagikan artikel anda.

Untuk membagikan suatu artikel sebenarnya tidak perlu harus menggunakan/memasang share button di blog. Namun hanya perlu menyalin url artikel yang dibaca lalu membagikannya kepada teman atau ke media sosial. Namun cara ini tergolong ribet. Dan tentunya sangat membuang-buang waktu. Oleh sebab itu,kita perlu memasang share button di blog kita.



Manfaat Share Button

Semakin banyak yang membagikan artikel kita maka juga akan meningkatkan SEO blog kita. Kok bisa? Tentunya jika artikel tersebut banyak yang share  maka membuktikan bahwa artikel tersebut bagus dan berkualitas sehingga layak untuk dibagikan. Oleh sebab itu akan memberikan nilai lebih untuk blog anda dimata mesin pencari. Baca juga : 4 Cara Mudah Supaya Artikel Cepat Terindex Google

Manfaat Share Button [Poin-Poin] :

  • Membantu pengunjung yang ingin berbagi 
  • Meningkatkan visitor
  • Pelangkap property blog
  • SEO
  • dan manfaat lainnya.

    Keuntungan Menggunakan Share Button Dari AnggaSave :

    1. Responsive dan Mobile Friendly
    2. Ada counternya (Jumlah share)
    3. Gak bikin loading blog lama
    4. No iklan ,No kredit
    5. Gratis
      Setelah mengetahui manfaatnya,kita beralih bagaimana cara menerapkannya di blog kita. Langsung saja berikut caranya :

      Cara Membuat Share Button di Blog

      Langkah 1
      Buka blogger ,pilih Template lalu Edit HTML

      Langkah 2
      Salin kode dibawah lalu letakkan diatas kode </body>
       
      <script src="http://share.donreach.com/buttons.js"></script>

      Langkah 3
      Salin kode berikut lalu pastekan dimana share button ingin anda tampilkan. Jika ingin ditampilkan dibawah artikel seperti di blog ini maka letakkan kode <data:post.body/>

      Karena kode  <data:post.body/> bisa anda temukan lebih dari satu ditemplate blog,oleh sebab itu maka silakan pilih kode <data:post.body/> yang paling akhir anda temukan atau coba cocokan satu per satu.

      <div class='berlangganan-box'>
      <div class='don-share' data-limit='3'>
      <div class='don-share-total'/>
      <div class='don-share-facebook'/>
      <div class='don-share-twitter'/>
      <div class='don-share-google'/>
      <div class='don-share-linkedin'/>
      <div class='don-share-pinterest'/>
      <div class='don-share-tumblr'/>
      <div class='don-share-reddit'/>
      <div class='don-share-hackernews'/>
      <div class='don-share-pocket'/>
      <div class='don-share-fancy'/>
      <div class='don-share-yummly'/>
      <div class='don-share-vk'/>
      </div>
      <script type='text/javascript'>
      (function() {
      var dr = document.createElement(&#39;script&#39;);
      dr.type = &#39;text/javascript&#39;; dr.async = true;
      dr.src = &#39;//share.donreach.com/buttons.js&#39;;
      (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(dr);
      })();
      </script></div>

      Ganti kode yang berwarna merah dengan jumlah share button yang ingin anda munculkan.

      Lalu simpan template.

      Cukup sekian tutorial cara membuat share box keren,semoga bisa bermanfaat. Dan coba lihat salah satu artikel di blog sobat,jika berhasil maka share button akan muncul seperti share button akan muncul seperti di blog ini.

      Subscribe to receive free email updates:

      7 Responses to "Cara Membuat Tombol Berbagi [Share Button] Responsive di Bawah Postingan Blog"

      1. Kalo cara buat tombol share di bawah postingan yang kaya blog ini gimana om ??? saya juga pengguna evomagz

        makasih

        ReplyDelete
        Replies
        1. Buka artikel ini gan untuk tutornya http://www.anggasave.com/2017/07/membuat-share-button-evo-magz.html

          Delete
        2. Mas, bagi css tombol share yang terbaru ini. saya suka dengan model itu karena pas ketika di buka lewat mobile.

          Delete
        3. akan saya buat tutornya secepatnya gan

          Delete
      2. mas kalo buat menu, about,contact, sitemap kaya di blog ini sih gmana,, kalo di mobile auto dropdown... mohon balasannya

        ReplyDelete
        Replies
        1. Pakai aja template evo magz yang ori mas,bisa dicari di google

          Delete