Cara Membuat Share Button [Facebook,Twitter,Google+] Untuk Mobile
Kali ini kita akan membuat share button. Padahal kemarin kita sudah membuat share button yang tak kalah bagusnya. Tapi tidak masalah mungkin yang kemarin kurang bagus,jadi buat yng baru.Share button ini sebenarnya hampir mirip seperti share button yang saya bagikan kemarin yang membedakan adalah share button ini lebih ringan dan lebih kecil serta ramah SEO.
Yang pastinya share button ini tidak akan berpengaruh terhadap kecepatan loading blog sobat. Jika loading blog anda cepat maka setelah memasang share button ini loading blog akan masih akan tetap cepat. Jika loading blog anda lambat maka setelah memasang share button ini akan tetap lambat. 😄
Share button ini berukuran mini serta support untuk mobile device. Jadi jangan khawatir jika pengunjung anda kebanyakan menggunakan mobile,mereka maih bisa membagikan artikel anda. Untuk lebih lengkapnya,berikut Fitur yang terdapat dalam share button ini :
- Responsive
- Seo Friendly
- + ada counternya
- dll.
Cara Membuat Share Button Sederhana dan Seo Friendly
#1. Buka blogger ,Template ➞ Edit HTML
#2. Salin kode berikut lalu pastekan diatas kode </body>
<script src="http://share.donreach.com/buttons.js"></script>
#3. Salin kode berikut dan pastekan dimana share button ingin ditampilkan. Biasanya ditampilkan dibawah artikel jadi 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="don-share" data-bubbles="right" 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-vk"></div>
</div>
<script type="text/javascript">
(function() {
var dr = document.createElement('script');
dr.type = 'text/javascript'; dr.async = true;
dr.src = '//share.donreach.com/buttons.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr);
})();
</script>
Ganti kode yang berwarna merah dengan jumlah ikon sosial media yang ingin anda tampilkan.
Lalu simpan template.
Sekarang coba anda buka blog sobat lalu lihat hasilnya. Gimana keren dan sederhana buka. Itulah tutorial yang bisa saya bagikan. Semoga membantu dan bermanfaat.
Related Posts :
Cara Menambahkan Sidebar Baru Diatas Multitab SidebarApakah anda pengguna template evo magz seperti saya? Jika iya pasti ada multitab sidebar di blog anda. Nah jika anda bukan pengguna template… [Read More]
Cara Memasang Widget Video Youtube Di Sidebar BlogJika anda memiliki video dan ingin menampilkan di blog/situs maka anda cara ini sangatlah tepat. Banyak sekali manfaat yang bisa anda dapatk… [Read More]
Membuat Menu Navigasi + Sosial Media [CSS,Responsive Dropdown] Di BlogspotBanyak tutorial-tutorial cara membuat menu navigasi yang bisa anda temukan di google. Tapi pasti yang anda cari adalah menu navigasi yang re… [Read More]
Cara Membuat Menu Navigasi Responsive Seperti Evo Magz [CSS Keren]Kali ini saya akan membagikan tutorial cara membuat menu navigasi. Untuk menu navigasi yang akan kita buat ini adalah menu navigasi yang res… [Read More]
5 Widget Search Box Dengan CSS Bootstrap Keren Di Blogspot - Search ButtonSearch box atau search button sangat penting di blog/situs anda. Karena memiliki fungsi yang penting bagi pengunjung blog. Apa fungsi dan ma… [Read More]
Wah menarik infonya. Bisa diterapkan sewaktu-waktu di blog saya
ReplyDeleteHehe, bagus nih artikel.
ReplyDeleteTapi lagi males ngoprek template nih mungkun bookmark dulu ahh
Makasih ilmunya gan
ReplyDeleteSama-sama,makasih juga atas kunjungannya
DeleteMakasih gan artikelnya bermanfaat apalagi punya saya belum di pasang kayak gitu....
ReplyDeleteSama-sama mas
DeleteMantap infonya gan.. nanti saya terapin di blog baru..
ReplyDelete