Membuat Floating Social Media Share pada Blog

Tampilan

Sebenarnya posting saya ini ada di blog axazax.com, tapi script sudah saya modifikasi dengan menambahkan tool Google Buzz dan Google+. Jadi terserah anda mau pakai yang aslinya atau hasil modifikasi dari saya.

1. Pertama buka acount Blogger anda dan masuk ke dalam Dashboard.
2. Pilih menu Settings - WP-Highslide (jika tidak ada menu WP-Highslide, aktifkan dahulu pluginnya)
3. Copy code yang berada di posting ini, kemudian paste kan disana.
Bisa juga anda paste di widgets Any HTML. Kemudian Save.


Untuk pengguna Blogger atau Blogspot, bisa anda copy paste dimana saja, asal tidak di paste ke dalam posting.. 

Berikut code nya :

<!-- Mulai Floating Social Media Share --><br /> <style> #floatingbuttons { background: #C15F24; 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; color: #fff; float: left; font-weight: normal; font-size: 13px; padding:0 0 3px 0; position: fixed; text-decoration: none; bottom:15%; left:0; z-index:10; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); } #floatingbuttons .floatbutton { float:left; clear:both; margin:5px 5px 0 4px; } .addbuttons { clear:both; color:#fff; font-size:7px; text-align:center; padding-top:5px; font-family:tahoma, verdana, helvetica, arial, sans-serif; font-weight:bold; line-height:1.4; } .addbuttons a { color:#fff; background:none; } .addbuttons a:hover { color:#fff; background:none; } .sharebuttons { font-size:7px; } </style><br /> <div id='floatingbuttons' title="Share this post!"><div class='floatbutton' id='facebook'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><br /> <fb:like layout="box_count" show_faces="false" font=""></fb:like><br /> </div><div class='floatbutton' id='stumbleupon'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script><br /> </div><div class='floatbutton' id='digg'><script> (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><br /> <a class="DiggMedium DiggThisButton"></a><br /> </div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a> <script src='http://platform.twitter.com/widgets.js'></script><br /> </div><div class='floatbutton' id='linkedin'><script src="http://platform.linkedin.com/in.js"></script><br /> <script data-counter="top"></script><br /> </div><div class='floatbutton' id='gplusone'><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><br /> <g:plusone size="tall"></g:plusone><br /> </div><div class='floatbutton' id='gb'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'><br /> <script src='http://www.google.com/buzz/api/button.js' type='text/javascript'></script><br /> </a></div><div class="addbuttons"><a href="http://zabrahkomputer.blogspot.com/2012/05/membuat-floating-social-media-share-di.html" title="Get This Widgets">Get Widgets<br /><span class="sharebuttons">Beben</span></a><br /> </div></div><!– Akhir Floating Social Media Share –><br />

Selamat mencoba…