Selasa, 05 Juni 2012

Cara Membuat StickyBar Dengan Facebook Like Dan Google+ di Blog


By on 14.00

Blazer Blog, Tips 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('http://3.bp.blogspot.com/-zQeUG7PU9Uw/TmkiptyZ1eI/AAAAAAAAE98/At4tRBC9HQc/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='http://1.bp.blogspot.com/-MSEzL6EtjrM/Tt-hrSkKVnI/AAAAAAAAFiQ/AGUGFpnSUHk/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%2Fblazer_blog&amp;send=false&amp;layout=button_count&amp;width=80&amp; show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21' style='border:none; overflow:hidden; width:80px; height:21px;'/> <g:plusone href='http://blazerracing.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>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

2 komentar:

  1. saya tdk ada kode body bagaimana ??

    BalasHapus
  2. Setiap website atau Blog pasti ada kode tersebut, namun jika benar-benar tidak ada, coba aja gan letakan kode nomor 7 pada Add Gadget > HTML/JavaScript.

    BalasHapus