MBT Like Auto Scrolling Sticky Bar? With Close Button

MBT full form is My Blogger Tricks.many other blogger just try to cheat this blog as i saw many blogger make there template same like MBL it is very irritating.

Recentally MBT add Auto scrolling bar to there header if you also want to add Sticky bar like that then in this post I will tell you How To add.

 To See Live preview of this sticky bar click on below Live Demo Button.

Live Demo

Picture Preview-

Step 1

Go To Blogger Dashboard>> Edit HTML >> Proceed

Now Search ]]></b:skin>

Add below Code above ]]></b:skin>

#mbl_bar{background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwd_DmCuwp9CFxEHoIHtyAMo-21WbQZ8agJGYjxfSgZfHwmRSg4AKC0PK5bCNN6vZ7DngLu5hDITgYmMBRi3QrW3fr2dwWLJVEJvM7sd6xXWVH96759W4bXhPQRZRLB4jR67ONLt4KRA4/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;}#mbl_bar a{text-decoration:underline;color:#E2E504;}#mbl_bar a:hover{text-decoration:none;}#mbl_bar p {margin:0; list-style:none;}#mbl_bar img {vertical-align: middle;margin-right: 6px;}

Step 2

Now Search </head> and paste below code above it.

<script type='text/javascript'>//<![CDATA[var mbl_arr = new Array();var mbl_clear = new Array();function mblFloat(mbl) {mbl_arr[mbl_arr.length] = this;var mblpointer = eval(mbl_arr.length-1);this.pagetop = 0;this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;this.mblsrc = document.all? document.all[mbl] : document.getElementById(mbl);this.mblsrc.height = this.mblsrc.offsetHeight;this.mblheight = this.cmode.clientHeight;this.mbloffset = mblGetOffsetY(mbl_arr[mblpointer]);var mblbar = 'mbl_clear['+mblpointer+'] = setInterval("mblFloatInit(mbl_arr['+mblpointer+'])",1);';mblbar = mblbar;eval(mblbar);}function mblGetOffsetY(mbl) {var mtaTotOffset = parseInt(mbl.mblsrc.offsetTop);var parentOffset = mbl.mblsrc.offsetParent;while ( parentOffset != null ) {mblTotOffset += parentOffset.offsetTop;parentOffset = parentOffset.offsetParent;}return mblTotOffset;}function mblFloatInit(mbl) {mbl.pagetop = mbl.cmode.scrollTop;mbl.mblsrc.style.top = mbl.pagetop - mbl.mbloffset + "px";}function closeTopAds() {document.getElementById("mbl_bar").style.visibility = "hidden";}//]]></script>

Step 3

Now Search </body> and paste below code above it.

<div id='mbl_bar'> Your Text And Links Will Be Written Here<span style='padding:0px; float:right'><img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-ytVU-hedK1DshaHMw13JEJJSrAOs0AMBvBQIWdOfJI4NZrWJqv3Rdbq1VoevJXMqkYSCJbC0NqD9WGJm4EsK_xYr1Lqa70K__-BSxNUNSJcSd-cc_scz5icn-GqXPKnMR6G5yxgitME/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span></div><br/><br/>

Now Replace the work which I highlighted with red and save the template.

Enjoy!!!

Comment Is Best Way To Say Thanks