Membuat Icon Share Melayang Di Samping Blog

Terkadang ketika kita ingin menaikan trafik kita  akan mengshare website kita atau artikel kita, akan tetapi tombol di bawah postingan kurang menarik bagi pengunjung mengshare website atau blog kita. 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">
<span class="sharebuttons">share buttons</span></a> </div>
</div>

5. Kemudian pilih Simpan.

Icon Share Melayang Di Samping Blog anda sekarang sudah selesai, baca juga tutorial blogger lainnya.