Cara Membuat Share Button Melayang di Blog

Share button melayang di pinggir bikin tampilan blog jadi keren and gak ngabisin tempat gan. Loe pengen pasang share button melayang di blog tapi gak tau caranya, ni gw kasi tau caranya gan langsung di simak. Sekalian gw kasi banyak pilihan biar loe puas milihnya gan.

Cara Membuat Share Button Melayang

• Share button dari AddThis, favorit gw gan. Cara pasangnya loe masuk ke Blogger trus klik Layout dan add gadget, scroll ke bawah pilih HTML/JavaScript. Setelah muncul pop up copy kode dibawah gan lalu pastein disana dan save. Beres gan sekarang blog loe udah ada share button melayangnya. Tinggal loe atur aja posisinya sesuai selera gan. Caranya edit aja angka yang ada di style="left:50px;top:50px;">. 

 Kode buat yang kayak gambar disebelah gan.

<!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="left:50px;top:50px;"> <a class="addthis_button_preferred_1"></a> <a class="addthis_button_preferred_2"></a> <a class="addthis_button_preferred_3"></a> <a class="addthis_button_preferred_4"></a> <a class="addthis_button_compact"></a> </div> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-50d0ae6c0cd052be"></script> <!-- AddThis Button END -->

    Kode buat yang kayak gambar disebelah gan.

    

    <!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;"> <a class="addthis_button_facebook_like" fb:like:layout="box_count"></a> <a class="addthis_button_tweet" tw:count="vertical"></a> <a class="addthis_button_google_plusone" g:plusone:size="tall"></a> <a class="addthis_counter"></a> </div> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-50d0aeef5baf97c2"></script> <!-- AddThis Button END -->

Kalo kalian pengen model yang lain dan nambah tombol biar banyak cek langsung di AddThis.

• Yang ini share button melayang dari ShareThis gan. Langsung aja di copas kodenya di bawah ini gan, langkahnya sama kayak di atas.

         

         <script type="text/javascript">stLight.options({publisher: "ur-c3a4ec0a-6f7b-f499-fd4e-9f4b8059218c"});</script> <script> var options={ "publisher": "ur-c3a4ec0a-6f7b-f499-fd4e-9f4b8059218c", "position": "left", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter", "googleplus", "email", "sharethis"]}}; var st_hover_widget = new sharethis.widgets.hoverbuttons(options); </script>

Kalo yang ini loe juga harus nambahin kode lain gan. Copy kode diwah, terus loe masuk ke Template lalu Edit HTML gan. Cari <head/> terus loe pastein kode tadi di atasnya. Sebelum ngesave preview dulu gan. Kalo mau nambah tombolnya lansung aja meluncur ke ShareThis gan.

<script type="text/javascript">stLight.options({publisher: "ur-c3a4ec0a-6f7b-f499-fd4e-9f4b8059218c"});</script> <script> var options={ "publisher": "ur-c3a4ec0a-6f7b-f499-fd4e-9f4b8059218c", "position": "left", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter", "googleplus", "email", "sharethis"]}}; var st_hover_widget = new sharethis.widgets.hoverbuttons(options); </script>

• Yang terakhir gan share button melayang dari Lockerz Share, yang satu ini keren gan simple tapi mantap cuma sayang bentuknya horisontal gan. Oke langsung aja copy kodenya trus paste di gadget / widget blog loe gan and save.

<!-- Lockerz Share BEGIN --> <a class="a2a_dd" href="http://www.addtoany.com/share_save"><img src="http://static.addtoany.com/buttons/share_save_171_16.png" width="171" height="16" border="0" alt="Share"/></a> <script type="text/javascript" src="http://static.addtoany.com/menu/page.js"></script> <!-- Lockerz Share END -->

Tampilan gambar di sebelah setelah share buttonya di klik gan, jadi tampilan standarnya cuma bar yang di atas doank. Mau model lain cek aja di Lockerz Share gan.


Note : Jangan takut copy kodenya gan, coz semua kode gak gw tambahin link dari blog SEO Ciyus kok aman.

Sekian tips dari gw semoga bermanfaat buat kalian yang pengen pasang share button melayang di blog.  Silahkan berkomentar gratis gan... » Loe suka postingan ini? Silahkan di link back dengan mengcopy kode dibawah gan.
URL :
http://maknyusblogger.blogspot.com/2013/09/cara-membuat-share-button-melayang-di.html HTML link kode :
<a href="http://maknyusblogger.blogspot.com/2013/09/cara-membuat-share-button-melayang-di.html">Cara Membuat Share Button Melayang di Blog</a>

» Luangin waktu 5 detik donk gan buat share postingan ini.

Anda baru saja membaca artikel tentang - Cara Membuat Share Button Melayang di Blog. Silahkan baca artikel berikutnya Tentang - Next - Jangan lupa g+1 / fb / twit :)