Create a Auto Scrolling Sticky Bar? With Close Button

Advertisements
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# 1Go to Blogger.com >> Your Blog >> Template
  • Step# 2Now just Backup your template in case any thing goes wrong
  • Step# 3Then just press Edit HTML >> Proceed
  • Step# 4Search for the following
]]></b:skin>
  • Step# 5As soon as you find it just above it Paste the following CSS styling code
#mbl_bar{ 
background:#333 url('http://3.bp.blogspot.com/-zQeUG7PU9Uw/TmkiptyZ1eI/AAAAAAAAE98/At4tRBC9HQc/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='http://1.bp.blogspot.com/-MSEzL6EtjrM/Tt-hrSkKVnI/AAAAAAAAFiQ/AGUGFpnSUHk/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
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

12 comments

June 10, 2012 at 1:00 PM

Great Sir Thanks For Share :)

Anonymous
June 10, 2012 at 7:40 PM

nice sticky bar, keep it up,
Recent Post: SmartBOT
Regards,
PRoBloggersTricks

Anonymous
June 11, 2012 at 1:38 AM

Thanks friend :-), nice post

June 11, 2012 at 12:08 PM

What should we search in step 4??

Editorial Team MOD
June 11, 2012 at 12:43 PM

@Lasith
Thanks Mate, Post has been Updated. However, You Need To Search ]]></b:skin> While Rest Steps Remains the Same. Peace and Blessing Pal.

June 11, 2012 at 2:24 PM

nice post but, Sorry sir, your title must, "create an auto. . . ." :)
I'll recommend this post, it can help you. .

http://www.netmobileshare.net/2012/05/write-good-blog-post-title.html

Tips to Write A Good Blog Post Title

Editorial Team MOD
June 12, 2012 at 12:06 AM

@Jie Muñoz
Thank For your Suggestions, But the Post you have Pointed "Tips For Titles" Is originally Written by Me For MBT (MyBloggerTricks) as a Guest post. You have Simply Copied it. Having a Good Faith Please Either add our Source Link Or Remove it. Other wise we have to Complain it to DMCA. Peace And Blessings

Anonymous
June 12, 2012 at 6:02 PM

good Share Lot Thanks To MBL

June 16, 2012 at 8:42 AM

Brother Faizan I was Searching this tutorial & I find it ☺ but brother I have some Problem in finding body tag in my templete so I hope you help me brother ☻

June 16, 2012 at 9:54 AM

Sir How To Add Links In This..

Editorial Team MOD
June 16, 2012 at 11:35 AM

@Subul us Sallaam
We're Certain that you Liked it! Yeah sure Buddy I Would be More Then Happy to Help you out. Just Dispatch a Detailed Email. Peace Buddy.

@sunil bishnoi
Brother I have Also Mention in the Tutorial. Just Replace "Your Text And Links Will Be Written Here" with the anchor links and text which you want to display in the sticky bar. Peace Buddy

July 14, 2012 at 3:55 AM

how to make it to the bottom???

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.