cara mudah membuat tombol berbagi social share button blogger




cara mudah membuat tombol berbagi social share button blogger
cara mudah membuat tombol berbagi social share button blogger

Pada kesempatan siang ini saya saya menjelasakan cara mudah membuat tombol berbagi social share button blogger, namun sebenarnya saya sudah banyak men-share cara membuat tombol berbagi social share button pada blog saya, tapi tidak jauh beda juga di waktu yang santai saya ini akan membagikan cara menggunakan social share buttons dan saya merekomendasikan anda untuk memakainya tombol share tersebut di blog anda, untuk kegunaaanya pasti ada pastinya. Nah biarpun social share buttons ini dari pihak ketiga, tetapi ternyata tombol share button ini benar-benar ringan.

Social share button ini yang dilengkapi dengan counter atau jumlah klik berbagi yang memudah kan kita untuk mengetahui ada berapa banyak postingan kita yang sudah dibagikan di sosial media. Nah kelebihan dari tombol share button ini sudah responsive sehingga tampilannya akan aman di berbagai ukuran device.

Yang membuat tombol berbagi sosmed ini ringan yaitu ternyata js dari sosmed ini dapat kita defer sehingga tidak akan mengganggu loading blog kita. Untuk demo silahkan lihat di halaman ini bisa anda lihat gambar di atas atau lihat pada animasi gif di atas.

Bagi Anda yang ingin mencobanya tombol share button ini, maka silahkan anda ikuti langkah-langkahnya di bawah ini.

tombol berbagi social share button blogger

  1. Pertama , pastikan anda udah masuk di dasbhor anda sendiri
  2. Kemudian anda masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Dan anda bisa cari kode ini <b:includable id='post' var='post'> kemudian gulung layar ke bawah dan temukan kode di bawah ini atau yang mirip seperti di bawah ini.
     <data:post.body/>
          <div style='clear: both;'/> <!-- clear for photos floats -->
        </div>
  4. Silahkan anda simpan kode di bawah ini di bawah kode di atas (di bawah kode </div>).
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class="don-share" data-limit="3">
      <div class="don-share-total"></div>
      <div class="don-share-facebook"></div>
      <div class="don-share-twitter"></div>
      <div class="don-share-google"></div>
      <div class="don-share-linkedin"></div>
      <div class="don-share-pinterest"></div>
      <div class="don-share-tumblr"></div>
      <div class="don-share-stumbleupon"></div>
      <div class="don-share-reddit"></div>
      <div class="don-share-pocket"></div>
    </div>
    <div class='clear'/>
    </b:if>
  5. Jika ternyata lebar halaman postingan tidak muat untuk 3 buah tombol tampilan normal, maka bisa anda rubah kode angka 3 yang saya tandai di atas menjadi 2 sehingga tampak seperti pada halaman 
  6. Kemudian anda simpan javascript defer js social share button ini di atas kode </body>.
    <script src="http://share.donreach.com/buttons.js"></script>
  7. Untuk sedikit merapihkan tampilannya, silahkan tambahkan CSS di bawah ini di atas kode </head>
  8. Salin kode di bawah ini dan di letakan di atas kode </head>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    .don-share .don-share-total{position:relative!important}
    .don-share .don-share-total:after{bottom:0!important}
    </style>
    </b:if>
  9. Jika sudah maka bisa anda klik save template dan lihat hasilnya.
    Social share buttons ini memerlukan waktu untuk menampilkan jumlah klik berbagi, jadi anda janagn aneh jika jumlah kliknya tidak langsung tampil pada share button ya. Widget ini tidak hanya dapat digunakan di Blogger tapi juga dapat digunakan di Wordpress.
Demikian penjelasan pada siang ini, jika anda mengalami kendala, bisa anda klik tombol komentar di bawah ini, saya akan membantu anda segera mungkin jika saya tidak dalam bekerja, dan semoga bisa bermanfaat untuk anda, thks sudah berkunjung.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect