Cara Membuat Widget Like Box Melayang Di Blogger

Hallo shobat wah udha lama nih kita ga ketemu heee, dalam pertemuan ini mungkin ada sedikit tutorial yang saya akan bagikan kepada shobat blogger semua, yang kali ini saya akan bagikan adalah Cara Membuat Widget Like Box Melayang Di Blogger.
widget ini juga saya gunakan di blog ini bisa anda liat langsung, sederhana, namun bisa memberikan kesan positif, pengunjung bisa menambahkan Like/Suka ke blog anda langsung.
oky ne penjelasan udha lumayan oky yukk kita intip cara membuatnya langsung.

Cara Membuat Widget Like Box Melayang Di Blogger

Cara Membuat Widget Like Melayang Di Blogger

Memasang Code Widget Like Melayang Di Blogger

Pertama-tama silahkan anda masuk ke Menu Blogger Tatat Letak Jika sudah masuk silahkan pilih Tambahkan Widget lalu silahkan anda masukan Code di bawah Ini Pada area Code

<br />
<div id="seocipssharebtn" title="Share This With Your Friends">
<div class="sbutton" id="gb">
<fb:like font="" layout="box_count" show_faces="false"></fb:like></div>
<div class="sbutton" id="gplusone">
<script src="https://apis.google.com/js/plusone.js" type="text/javascript"></script><g:plusone size="tall"></g:plusone></div>
<div class="sbutton" id="su">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
</div>
<script type="text/javascript">
          var _gaq = _gaq || [];
          _gaq.push(['_setAccount', 'UA-52127658-1']);
          _gaq.push(['_trackPageview']);
          (function() {
            var ga = document.createElement('script');
            ga.type = 'text/javascript';
            ga.async = true;
            ga.src = (document.location.protocol == 'https:' ?
                      'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(ga, s);
          })();
        </script>

Jika Sudah selesai silahkan kalian Simpan/Pertinjau terlebih dahulu terakhir masukan Code CSSnya. Silahkan kamu masuk ke Menu Template lalu Pilih Edit Html Silahkan anda cari Code ]]></b:skin> atau </style> pada area Html, jika sudah ketemu silahkan anda masukan code di bawah ini tepat sebelum code yang saya suruh cari tadi di atas. untuk mempercepat pencarian silahkan anda klik tombol pada keyboard

CTRL

untuk mempercepat pencarian. jika sudah silahkan anda masukan code di bawah ini tepat sebelum code yang saya suruh cari tadi.

/*Share Button*/
#seocipssharebtn {position:fixed; bottom:20%; left:10px; float:left; background-color:#fff;padding:0 0 2px
0;z-index:10;box-shadow:0 2px 2px #666;-webkit-box-shadow:0 2px 2px #666;border-radius:4px;-webkit-border-radius:4px;border: 1px solid #ddd;moz-animation:bawah 7s;-webkit-animation:bawah 7s;animation:bawah 7s;}
#seocipssharebtn .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
@media screen and (max-width:480px){#seocipssharebtn{display:none;}}
@-webkit-keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}
@keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}

oky jika sudah silahkan anda simpan template anda. Semoga Berhasil ya.