December 7, 2011

How to Create a Stickybar with "Close Button"?


Make a stickybar with close buttonThe Stickybar or fixed Bar that we released was warmly welcomed. What we all have been searching for was a Close Button or Cancel button that would hide the bar display. May be not every visitor enjoys viewing that fixed bar at the top, so they deserve to be provided with an option to view or hide the bar. While viewing one of the Wordpress Blogs I found this button next to their updates bar. I managed somehow to fetch the script half broken. Making it work with blogger template was difficult because blogspot templates are programmed via XML and the rules of XML are really harsh when it comes to Character case. Debugging the script was difficult but Alhamdulillah the hard work paid off. You can see it Live just to the right of my Stickybar at the top. I am excited to share it with you all. Lets get to work!

Create a Sticky Bar With Close Button in  Blogger

The steps are really simply as we already discussed in our previous tutorials. I will be not be discussing on how to change the font colors and background color of the bar because you can find all such details on my previous tutorials. Kindly have a look at them later in order to change the CSS style properties:

Follow these easy steps:

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Search for this

]]></b:skin>

 

    4.   Just above it paste the following CSS code,

#mbt_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;
}
#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.    Next search for </head>   and paste the following Javascript code just above it


<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.     Finally search for <body>  and just below it paste the following HTML code

<div id='mbt_bar'> WRITE YOUR TEXT 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/>

 

    To write an announcement, update news or notice to readers, just replace the yellow highlighted text with your message. If you wish to change the Close button image then simply replace the bolded black link with your button's link.

    7.     Save your template

    8.     You are all done!

Visit your blog to see it fixed to the top just beautifully with a close button waiting to be clicked!

How it works?

The close button when clicked triggers the function closeTopAds();  which then searches for function definition. The function is defined such that it sets visibility of bar to hidden. That's how the bar hides once the button is clicked and reappears only upon page refresh. Indeed a pretty neat way to make a user friendly bar.

Need help?

You are most welcomed to ask for any help if needed. If you wish to share the tutorial and scripts above with your readers then kindly attach attribution to MBT blog. Peace and blessings pal! :)





If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

26 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Great tutorial but you should fix this "when you scroll down images appears above sticky bar as should be below.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. wow thats become more efficient , we may call it beta version??
    MY BLOG

    ReplyDelete
  4. @ndark
    Could you kindly explain it buddy or add a screenshot. Are you adding an image to sticky bar?


    @Faiz
    lol sure its a beta version because we are soon going to add more stuff to the bar like search box, social plugins etc. :d

    ReplyDelete
  5. No i am not changing anything in this codes. check this image

    ReplyDelete
  6. This is exactly what I was searching for, waiting for the social buttons to be added. I created a bar with buttons which is a bit incomplete, but I'm lazy now. Thanks ;)

    ReplyDelete
  7. Nice! I changed the other sticky bar for this one.

    But I need help, were do I have to go to change the space between the bar and the beginning of the main structure?

    see my blog to understand: www.Ganha-Facil.com

    Thanks again for this great tutorial

    ReplyDelete
  8. bhai can u tell how to add this at the bottom of page ?

    ReplyDelete
  9. @ndark
    Oh you mean that. It is because we have not added a z-index property to it. But it wont bother the design a lot bud.

    @Sagar
    I will be working on it pal. thanks for the idea. :>

    @David
    Delete this line from this code:
    <br/><br/>


    @Haider

    I have shared the link above dude: http://www.mybloggertricks.com/2011/09/notification-bar-for-blogspot-with.html

    ReplyDelete
  10. this sticky bar is hiding my upper labels how to bring upper labels down
    plz check it at
    www.x9wallpapers.com

    ReplyDelete
  11. @Mohammad Mustafa Ahmedzai Buddy I made a custom sticky bar with social buttons, now how do I add the close button to it ? You can have a look at my blog : http://www.technetsavvy.com

    ReplyDelete
  12. Hey the thing is that i applied the bar on my website http://hackinguniversity.in/ but after adding its not scrolling with my page. Please can you help me out i making it scroll or can you tell me which part i have missed.

    ReplyDelete
  13. @Rishabh Jain Add "position:fixed" to the "#mbt-stickybar" CSS rule.

    ReplyDelete
  14. Cool bro. thank you :)
    http://softtechz.com

    ReplyDelete
  15. close button is not working
    pls send me full brief on my email my email is
    kishang1989@gmail.com

    ReplyDelete
  16. great post.. i had been searching this at Google and finally i got it here (The Only Blog i Follow)
    thks for sharing.............

    ReplyDelete
  17. thkx for sharing this.. i have created one and added twitter & facebook to it with little bit of creativity.. have a look..
    again thanking for sharing this...
    http://mlmtrainingindia.blogspot.com/

    ReplyDelete
  18. nice tutorial..good job bro


    htp://www.mycsestuff.blogspot.com

    ReplyDelete
  19. Hi Mohammad, I love your tutorial and I would like to replace img cancel.png with the word close. Can you be of any assistence. Thanks very much

    ReplyDelete
  20. Really great tutorial thank you so much!!
    by the way how can we delay the sticky bare to load after 5 or 7 seconds ??
    because adding too much CSS and Java scripts make the blog very slow, it will be a great idea if you make tutorial about delaying the script to load after X seconds !!

    ReplyDelete
  21. I surmise I have chosen an intelligent and mind blowing website with interesting material.
    Web Development

    ReplyDelete
  22. i tried this code according to the above steps on my Educational and Earning Blog but the following errors appears

    Error parsing XML, line 742, column 3: The element type "head" must be terminated by the matching end-tag "".

    please help how to remove this erro

    ReplyDelete
  23. This comment has been removed by the author.

    ReplyDelete
  24. how to add sidebar within blog posts as you have in this blog..
    i.e.. sidebar in right of posts attached as yours!

    Thanks,
    http://bhejamatpaka.blogspot.in

    ReplyDelete

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!