Cara Membuat StickyBar Dengan Facebook Like Dan Google+ di Blog

Tutorial Blog - Kali ini saya akan membahas bagaimana cara membuat menu bar melayang dengan tombol like dan google+, menu ini namanya StickyBar. Dengan memasang StickyBar di Blog kamu, pastinya bisa membuat pengunjung blog kamu tidak lupa untuk menLike Facebook Fan Page kamu, dan juga tampilannya yang cukup keren, sehingga enak untuk dilihat.

Cara Membuat :

1. Login ke Blog kamu.

2. Pilih Rancangan.

3. Pilih Edit HTML.

4. Cari kode ]]></b:skin>

5. Setelah ketemu letakan kode di bawah ini tepat di atas kode nomor 4 berwarna merah.

#mbt_bar{
background:#0080ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiDzi6vN1KVAuBKZMbs_v7N1bImmtQ3IPHSftUVuVE3zhkjYhZ7obeCmQ9mUVuT9oLSz1tplHylFSP8wIBAFHxfqeDR2VfyPZuaa18eaCZpjrHfTjB-imz6AbQPKijpPW_VT5_RVcEZN0/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:3px 0 0 0;
border-bottom: 1px solid #888888;
-moz-box-shadow: #666666 0px 1px 3px;
-webkit-box-shadow: #666666 0px 1px 3px;
box-shadow: #666666 0px 1px 3px;
z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
color:#fff;
font-size:12px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
}
#mbt_bar a{
text-decoration:underline;
color:#E2E504;
}
#mbt_bar a:hover{
text-decoration:none;
}
#mbt_bar p {margin:0; list-style:none;}
#mbt_bar img {vertical-align: middle;
margin-right: 6px;}

6. Selanjutnya cari kode </head>, setelah ketemu letakan kode di bawah ini tepat di atas kode </head>

<script type='text/javascript'>
//<![CDATA[
var mbt_arr = new Array();
var mbt_clear = new Array();
function mbtFloat(mbt) {
mbt_arr[mbt_arr.length] = this;
var mbtpointer = eval(mbt_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mbtsrc = document.all? document.all[mbt] : document.getElementById(mbt);
this.mbtsrc.height = this.mbtsrc.offsetHeight;
this.mbtheight = this.cmode.clientHeight;
this.mbtoffset = mbtGetOffsetY(mbt_arr[mbtpointer]);
var mbtbar = 'mbt_clear['+mbtpointer+'] = setInterval("mbtFloatInit(mbt_arr['+mbtpointer+'])",1);';
mbtbar = mbtbar;
eval(mbtbar);
}
function mbtGetOffsetY(mbt) {
var mtaTotOffset = parseInt(mbt.mbtsrc.offsetTop);
var parentOffset = mbt.mbtsrc.offsetParent;
while ( parentOffset != null ) {
mbtTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mbtTotOffset;
}
function mbtFloatInit(mbt) {
mbt.pagetop = mbt.cmode.scrollTop;
mbt.mbtsrc.style.top = mbt.pagetop - mbt.mbtoffset + "px";
}
function closeTopAds() {
document.getElementById("mbt_bar").style.visibility = "hidden";
}
//]]>
</script>

7. Terakhir cari kode <body> setelah ketemu letakan kode di bawah ini tepat di bawah kode <body>

<div id='mbt_bar'> <span style='padding-right:5px; float:right'> <img align='absmiddle' border='0' onClick='closeTopAdsundefined);return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUVliTvm9jKdxnhbtpAeS4Nmv7wodKdsP1mGbX4g6mAvdSJFxyl0p_suZ6PVsp5rNayEyIsE14JbdpU4cM1btjgnDa2FlBVXVEvgRuaFIqQg1UIkP_C_zZCP2ScAhMPFff80XgCS1R0PY/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span><div style='float:left; padding-left:10px;'>Stickybar with social Plugins</div> <div style='float:right; padding-right:0px;'> <p style='font:bold 12px arial; float:left; margin:5px;'>Liked us?</p><iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fvicky-blog&send=false&layout=button_count&width=80& show_faces=false&action=like&colorscheme=light&font&height=21' style='border:none; overflow:hidden; width:80px; height:21px;'/> <g:plusone href='http://vickyblog26.blogspot.com/' size='medium'/> </div> </div>

Ganti kode yang berwarna biru dengan Username Facebook fan page anda.
Ganti kode yang berwarna merah dengan URL Blog kamu.

Untuk mengaktifkan Google+ harap pasang Script di bawah ini dan letakan di bawah kode ]]></b:skin>