Rasanya sudah lama saya tidak update blog mengenai widget blogger. nah, pada kesempatan kali ini saya akan berbagi satu widget yang sangat menarik, yaitu Widget StickyBar pada blogger. ok, langsung saja kita lihat penampakannya..


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('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. 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='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%2Fdarmasite&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://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 :)

Posting Komentar

  1. kok ruwet sekali sih cara pakainya,,,,
    saya bingung ne, terus apa bedanya sama tombol like fb yang ada di blog saya???

    BalasHapus

Catatan:
1. Komentar Anomin telah kami buka, silahkan berkomentar yang sopan
2. Jika kurang mengerti dengan posting di atas silahkan ajukan pertanyaan
3. Kami usahakan membalas komentar anda secepat kilat!
4. Masalah "Link Rusak" bisa anda laporkan lewat komentar
5. Jika meninggalkan Link Aktif pada komentar terpaksa kami hapus

Salam Admin
Darma Jaya

 
Top