Membuat Icon Share Melayang Di Samping Blog

Terkadang ketika kita ingin menaikan trafik kita  akan mengshare wbsite kita atau artikel kita, akan tetapi tombol di bawah postingan kurang menarik bagi pengunjung mengshare wabsitekita. sekarang saya akan menjelaskan bagaimana membuat icon share melayang di samping website.

1. Masuklah terlebih dahulu ke Blog anda

2. Pilih Tata Letak/Rancangan

3. Tambah widget baru yaitu HTML/Javascript.
4. Masukan script berikut ini :


<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'> <div><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><a class="DiggThisButton DiggMedium"></a> </div><br> <script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://www.jintoples.blogspot.com" title="Add floating social media share buttons to your blog!"><span class="getfloat">Jin Toples</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div></div>

5. Kemudian pilih Simpan.

Penjelasan : Warna Script Merah : Posisi Icon share anda (dapat anda ganti [left | rigt | center])

                   Warna Biru : Lebar icon share