Cara Menambahkan Tombol Share Melayang 2015

Gambar share button yang sukses dipasang.

Halo rekan2 blogger semuanya, pada kesempatan ini saya akan memberitahukan bagaimana cara menambahkan tombol share melayang atau bahasa inggrisnya Floating social media buttons. Perlu anda ketahui, hampir semua template sudah memiliki tombol sharenya masing2, namun tempat tombol share tersebut rata2 dibawah dan diatas postingan dan tak jarang orang tidak melihatnya. Dengan menambahkan tombol share melayang ini, kamu memperbesar peluang blog mu untuk dishare. Berikut langkah2nya.

• Tutorial ini untuk semua platform dan dapat disesuaikan, dalam kesempatan ini saya menggunakan blogger.
• Login ke blogger.
• kemudian masuk kebagian Tata Letak.
• Klik add widget.
• Pilih HTML/JavaScript.
• Pastekan kode berikut pada konten.

<!-- Floating social media buttons by www.howbler.com --><style>
    #floatingbuttons{background:#C12424;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #F54F4F), color-stop(1, #C12424));background:-moz-linear-gradient(top, #F54F4F, #C12424);border:1px solid #B31919;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
    <div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div style="clear:both"></div>
<a href="http://beberapa-hal.blogspot.com/2014/02/cara-menambahkan-tombol-share-melayang.html"><span class="sharebuttons">share buttons</span></a> </div> <!-- end Floating social media buttons by www.howbler.com -->

•  Kemudian klik simpan.
• Selesai.

Semoga info ini bermanfaat untuk anda.

Tweet