Floating Social Network
| Pin It | Tweet |
|
Floating Social Network – Saat ini untuk mendatangkan visitor sebuah website tidak melulu mengandalkan kekuatan Search Engine ( SEO ) tapi juga perlu mempertimbangkan banyaknya pengguna Social Network ( SNO )saat ini.
Nah, langsung saja …. berikut ini adalah script sederhana untuk menambahkan floating Social Network pada website :
<!-- Mulai Floating Social Media Share -->
<style>
#floatingbuttons { background: #357EC7; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #357EC7), color-stop(1, #357EC7)); background: -moz-linear-gradient(top, #357EC7, #357EC7); border: 1px solid #357EC7; 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 6px; }
.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>
<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><fb:like href="<?php echo get_permalink(); ?>" send="true" layout="box_count" width="60" show_faces="true" font=""></fb:like>
</div>
<div class='floatbutton' id='stumbleupon'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</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>
<a class="DiggMedium DiggThisButton"></a>
</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>
</div>
<div class='floatbutton' id='linkedin'>
<script src="http://platform.linkedin.com/in.js"></script>
<script data-counter="top"></script>
</div>
<div class='floatbutton' id='gplusone'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall"></g:plusone>
<!-- Place this tag after the last plusone tag -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</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'>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'></script>
</a></div>
<div class="addbuttons">
<span class="sharebuttons">trackingnews.info</span></a>
</div>
</div>
<!– Akhir Floating Social Media Share –>
kode di copy dari imherry blog
