Create a Auto Scrolling Sticky Bar? With Close Button

Creativity has enormous significance when it comes to skill your Blog with dedication and perfection. Preferably a faultless design symbolizes our Blog as it’s the art which shines in the eyes our visitor, and hence we continue to uphold professionalism. The Sticky Navigation or Scrollable Bar that we introduced previously was whole heartedly welcomed. Since then all had been searching for an ideal Sticky Bar that is equipped with Hide button or Cancel button, which has the capabilities to conceal the displayed bar. Possibly every one does not enjoy viewing that fixed or irremovable bar. So they do deserve the functionality which would allow them to hide or remove the bar. While surfing on one of mine favorite Blogging websites I was able to discover a well styled Sticky bar. I just opened the chunk of code and recoded the whole widget and finally it worked, bang on target. I am eager to share this widget, so let’s roll our fingers on our tutorial.

Preview: I know you are excited to view this widget. Just look the the top of your screen and you will notice a sticky bar following you.

Features of MBL Sticky Bar:

• Has stylish and sleek bar capable of interchangeable color
• Easy to Customize, and built with easy to use interface
• Optimized with ultra speed technology
• Has elegant look with dismissible button
• One minute integration with any platform i.e. Blogger

How to add MBL Sticky Bar With Distillable Button:

Unlike our previous sticky bartutorial, the steps are in fact trouble-free that even a 7 year old kid can handle it with perfection. In this tutorial, we will talk about each and every thing from adding it in our Blogger Template to its customization.  The steps are pretty straightforward just do as follows and you will find no error whatsoever.

• Step# 1: Go to Blogger.com >>Your Blog >> Template

• Step# 2: Now just Backup your template in case any thing goes wrong

• Step# 3: Then just press Edit HTML >> Proceed

• Step# 4: Search for the following

]]></b:skin>

• Step# 5: As soon as you find it just above it Paste the following CSS styling code

#mbl_bar{ 
background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxeDX5nRImuMXqtdw54B64qxd87b3erGhFXPoisnChr8UIo_4E6p4LLxz7lv2B0jWRGkUKwdfApCxDjSQWovFyD3aXAsKhTo667LChwQvuKXeXBW2eLJMZmNAf54E6ryFlSjk-O9mrhwA/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# 6:  Now to insert JavaScript code just search for </head> and paste the following 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# 7:  Now to finish search for <body>and just below it paste the following HTML structure code

<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/AVvXsEjACEM7zuAUg_rbc_VdrP9ryLPZGaiIHwET4pCdTdxZlnk4frQn2XzNoQejTQgm7diGbvBTnLMQZgNVv0KYFduSvUl8hUgd7uobOL2ScVrmdMVmCtiYjkvAdvIXeIbzForrgfLhFwHhzL4/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span></div> 
<br/><br/> 

Customization:

Now to change the color of  the color simply replace #fff

To change the font size replace 13px

To change the color of the sticky bar simply replace #333

To Increase the height replace 28px

Replace "Your Text And Links Will Be Written Here" with the anchor links and text which you want to display in the sticky bar. 

• Step# 8: After customizing, simply press Save button. Now just go and view your blog and it will give a photo-finish effect.

From the Editors Desk:

So guys I think this is enough for today, you can use this widget without facing any sort of difficulties. To catch more attention of your visitors use it purposely, try to feature those posts which are of higher quality. This widget can be used to setup a notice for your visitors. Well in an ideal world it can be utilized for any purpose, depends on needs.  Give your suggestions about the sticky bar? Do drop your comments till then peace, blessing and happy sticking. We love what we does and credits to MBT

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

Create a Auto Scrolling Sticky Bar? With Close Button

4/ 5

By Editorial Board

Posted By Editorial Team On June 10, 2012 Comment