Membuat sticky bar sendiri dengan tombol close di blog

Membuat sticky bar sendiri dengan tombol close di blog - Sticky bar bisa digunakan untuk menaruh pesan -  pesan anda, promote artikel unggulan anda dll. Ok, screenshootnya seperti ini :




1. Login blog -> Template.
2. Edit HTML -> Lanjutkan.
3. Centang expand template widget -> gunakan ctrl dan f.
4. Cari kode ]]></b:skin> -> Letakan kode CSS dibawah ini diatasnya.
  •  #mbt_bar{
    background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJdiQxilSoP4gjSIkv7nqqRyPX5BqO3S_qapZ9P1iK0r8UlEvE9y4uYPxX_pLN0AUL9B0iboGrCZdehMUBsFhqb4qQLOhe_rk_9oT4illTXXSxDAHHHmZVNxtSt6AflOc5WKTfXDcuyPA/s400/stickybar.png') repeat-x;
    width:100%;
    margin:0 auto;
    text-align:center;
    padding:0px 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:13px;
    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;
    }

5. Letakkan kode berikut diatas tag </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>

6. Cari lagi, kode <body>. Untuk kode kali ini, gak perlu deh agan cari menggunakan Ctrl dan f. Cukup dengan scroll halaman ke bawah, sampai pucuk. Sudah ketemu? letakkan kode berikut dibawahnya ya.
<div id='mbt_bar'> INGIN MENJADI PENULIS TAMU DI BLOG INI ?
<a href='http://fauzischolovers.blogspot.com'>KLIK DISINI</a> 
<span style='padding:0px; float:right'>
<img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK7atMTUdVjaCG6fceUDh2IowVcfqU43QoqG1KIVqU6hCX7f-B959sTyLDci2rzVV4rtPw4mVV9phxOC0Fy1jGtxfknnBCuo_Mmixt1onCoRtZ47YK3RHMUY_sLxnwcWfuBcZUpYv5I0c/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span></div>
<br/><br/>

7. Save & Liat hasilnya!

Comments