Bagaimana? menarik bukan..
nah, jika sobat tertarik, mari kita lanjutkan ke tahap - tahap pemasangan!
1. Pergi ke Blogger > Design > Edit Html
2. Untuk berjaga - jaga, silahkan Backup dulu Template Sobat
3. Kemudian cari kode dibawah ini, untuk memudahkan pencarian gunakan CTRL + F
]]></b:skin>
5. Tepat di atas itu paste kode CSS berikut,
/*MBT Stickybar*/
#mbt_bar{
background:#0080ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4odxiC5CneV29uZWr617NpRWS7oceqP-9D40IsEBlfpy2MkUAPc_lxoiqnpHnOk84ybAdtsc1C-egBO6A9R4HUt8F5aGgD3LFFjWJoKLVlfORjQsfSjk2f7wzDJOZ5ODqjpACk5gRfJk/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. Pencarian berikutnya untuk </head> dan paste kode Javascript berikut tepat di atasnya
<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. Kemudian mencari <body> dan tepat di bawah itu paste kode HTML berikut
<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/AVvXsEjehvGHDn-CwfvlYjz4e2rdRHgaR6poqFp0MiwzFd7mJPcaYVUXExv18CnPi6SeLd9yOr9nHKEMbErH87P9lzJg-a_nOeTE0t4tVMUpJ0JdsWg0bo6LGCULAjRR9zww-H7h0t9IEJsFLgw/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%2Fdarmasite&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://www.darmasite.blogspot.com' size='medium'/> </div> </div>
KETERANGAN :
- Ganti kode berwarna Ungu dengan selera sobat, misalnya news, pengumuman atau sejenisnya, terserah
9. Terakhir Simpan Template sobat, dan sekarang lihat hasilnya :)
kok ruwet sekali sih cara pakainya,,,,
BalasHapussaya bingung ne, terus apa bedanya sama tombol like fb yang ada di blog saya???