Cara membuat Widget Tombol share melayang di postingan Blog

Tombol share di blog adalah hal yang harus ada dan wajib bagi setiap situs blog atau website, peran tombol share ini untuk mempermudah para pembaca saat akan membagikan artikel yang ada pada blog kita, tombol share yang bagus tentunya yang letaknya cukup mudah untuk di jumpai, dan tentu saja ringan untuk blog kita.


Cara memasang tombol sosial share ini cukup mudah, kali ini kita akan menggunakan script dari situs pihak ketiga, disini anda harus sedikit teliti dengan kode-kode tenplate, karena untuk memasang tombol sosial share melayang ini anda harus mencopi paste script dan meletakanya di dalam template pada blog sobat.

Ada dua situs yang bisa kita gunakan untuk memasang tombol share melayang ini, ada kekurangan dan kelebihan dari fitur yang ada dari situs penyedia yang ada, tetapi tentu saja tidak telalu berpengaruh jika artikel anda tetap berkualitas dan bagus.

Cara membuat Widget Tombol share melayang di postingan Blog


Berikut ini situs dan cara membuat widget sosial share pada blog yang bisa kamu praktekan dengan mudah di blogspot sobat.

1. Situs Addtoany



Situs www.addtoany.com adalah situs penyedia sosial share yang cukup bagus menurut saya, karena apa? alasan yang cukup untuk mengatakan ini cukup bagus adalah karena pemasangan pada blog cukup mudah dan simple, anda hanya harus menambahkan script yang ada www.addtoany.com di widget pada tata letak di blogspot sobat, tentunya sobat sudah tahu bukan bagaimana cara memasang widget di tata letak?

Anda bisa langsung mengunjungi situs www.addtoany.com secara langsung atau anda bisa mempraktekanya dengan tutorial berikut ini.

1.  Login ke Blogger.

2.  Klik  tab Template → Edit HTML.

<div class="example_parent_element" style="margin:0 auto; width:900px;">
<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" style="margin-left:-100px; top:150px;">
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_google_plus"></a>
<a class="a2a_button_pinterest"></a>
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
</div>
<script async src="https://static.addtoany.com/menu/page.js"></script>
</div>

Perhatikan kode script di atas, anda hanya tinggal menambahkan widget dan mencopi paste kode di atas, maka nantinya tombol share di blog sudah bisa langsung tampil tanpa harus mendaftar terlebih dahulu di addtoany, dan jangan lupa lihat yang ukuran 100 px yang sudah saya tebalkan pada script di atas, nomer tersbut untuk merubah posisi tombol share yang ada nanti, kadang di setiap template berbeda-beda jadi anda harus mengubah ukuranya untuk mengubah posisi sosial sharenya.

Untuk kekurangan dari sosial share yang satu ini adalah tidak bisa tampil pada mode mobile, untuk saat ini semuanya tampilan serba flexibel tidak hanya di desktop saja, tentu saja akan menjadi kendala sendiri jika tombol share yang di pakai tidak support di tampilan mobile. Bisa menjadi pertimbangan tentunya.

2. Sosial share melayang dari Addthis


Cara yang kedua adalah dengan menggunakan situs addthis.com, situs ini selain memasang tombol share melayang juga mempunyai fitur-fitur lainya yang cukup menarik, seperti arikel terkait melayang, dan beberapa fitur lain yang cukup elegan jika di letakan pada blog anda, selanjutnya adalah fitur versi mobile yang sangat bagus, menggunakan widget ini juga sudah mobile friendly tanpa harus mendit script yang susah, dan masalah tentang coding lainya.

Baiklah langsung saja berikut ini cara memasang widget tombol share melayang pada blogspot dengan addthis.
  • Kunjungi terlebih dahulu situs www.addthis.com
  • Selanjutnya silakan daftar terlebih dahulu pada Akun AddThis
  • Jika sudah akan tampil jendela dasboard addthis seperti gambar di atas. sobat bisa langsung klik share button dan atau widget lainya yang ada disitu, setalah semua widget anda pilih dan setting silakan klik simpan.
  • selanjutnya anda harus menemukan script dari addthis seperti di bawah ini
<!-- Go to www.addthis.com/dashboard to customize your tools --> 
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-590ec5390bec7ad3"></script>
  • selanjutnya masuk ke edit html pada blogspot anda.
  • cari kode </body> dan letakan script dari addthis di atas kode </body> tersebut. tampilanya seperti di bawah ini.
  • jika sudah di pastekan di atas kode </body> silakan simpan template dan lihat hasilnya.

Share this

Related Posts

Previous
Next Post »