Add Premium Smooth Sticky Bar for Bloggers Blog

Add Premium Smooth Sticky Bar for Bloggers Blog

8
data:blog.title
Notification Bar

A Notification Bar which is known as Sticky Bar now is very useful widget that work as a content highlighter or generally people use it to announce something important or about latest events. I have already introduced about Hello Bar but it has some limitations. However, I am going to share with you a new Notification bar that really wonderful.

Features of Notification Bar

  • This is based on very small and simple script.
  • It has an amazing bouncing effect when you just click on Show/Hide button
  • Easily customizable. You can change its style as per as your desire.
                   
                           

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl + F

Step 4 Copy the below code and Paste it Before/above ]]></b:skin> 

/*--Sticky Bar by www.bloggerspice.com--*/.BSbar{
position: fixed;
top: 0px; left: 0px; width: 100%;
height: 24px; z-index: 100;
padding: 5px 0 2px 0;
text-align: center;
font-size: 14px;  font-weight:bold;
color: rgb(208,249,238);
background-color: #444343;
border-bottom: 2px solid #FFF;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
-webkit-box-shadow: 0 8px 6px -6px #333;
-moz-box-shadow: 0 8px 6px -6px #333;
box-shadow: 0 8px 6px -6px #333;
}
.BSbar-stub {
position: fixed; top: -10px; left: 0px;
width: 100%; height: 19px;
z-index: 200;
padding: 7px 0 5px 0;
text-align: center;
}
.BSbar span {
float: left;  width: 95%;
text-align: center;
padding-top: 2px;
}
.show-notify {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 3px solid #fff;
box-shadow: 0 0 5px rgb(0,0,0,0.35);
-moz-box-shadow: 0 0 5px rgb(0,0,0,0.35);
-webkit-box-shadow: 0 0 5px rgb(0,0,0,0.35);
float: right;  margin-right: 10px;
color: #fff;
width: 35px;  height: 33px;
text-decoration: none;
background-color: #ddd;
cursor:pointer;
}
.show-notify:hover {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 3px solid #fff;
box-shadow: 0 0 5px rgb(0,0,0,0.35);
-moz-box-shadow: 0 0 5px rgb(0,0,0,0.35);
-webkit-box-shadow: 0 0 5px rgb(0,0,0,0.35);
float: right;  margin-right: 10px;
color: #fff;
width: 35px;  height: 33px;
text-decoration: none;
cursor:pointer;
}
.close-notify {
float: right;
margin-top:-2px;  margin-right: 20px;  color: #fff;
width: 21px; border:1px solid #959695;  height: 23px;
text-decoration: none;  background-color: rgb(125,201,241);
cursor:pointer;
}
.BSbar-link {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
color: #FFF; margin-right:10px; text-decoration:none;
}
.BSbar-link:hover {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-bottom:1px dotted #DDD;  text-decoration: none;
}

Step 5 Now Find this code </Head> 

Step 6 Copy the below code and Paste it Before/above </Head>  


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js' type='text/javascript'/><script> var stub_showing = false;function BSbar_show() {if(stub_showing) {$(&#39;.BSbar-stub&#39;).slideUp(&#39;fast&#39;, function() { $(&#39;.BSbar&#39;).show(&#39;bounce&#39;, { times:3, distance:15 }, 300);            $(&#39;body&#39;).animate({&quot;marginTop&quot;: &quot;32px&quot;}, 300);});}
 else {$(&#39;.BSbar&#39;).show(&#39;bounce&#39;, { times:3, distance:15 }, 500); $(&#39;body&#39;).animate({&quot;marginTop&quot;: &quot;32px&quot;}, 250);}}
 function BSbar_hide() {$(&#39;.BSbar&#39;).slideUp(&#39;fast&#39;, function() {$(&#39;.BSbar-stub&#39;).show(&#39;bounce&#39;, { times:3, distance:15 }, 100);stub_showing = true;      });  if( $(window).width() &gt; 1024 ) {$(&#39;body&#39;).animate({&quot;marginTop&quot;: &quot;0px&quot;}, 250);}}
 $().ready(function() {window.setTimeout(function() {BSbar_show();}, 0);});
var mstub_showing = false;
function mBSbar_show() {if(mstub_showing) {$(&#39;.mBSbar-stub&#39;).slideUp(&#39;fast&#39;, function() {$(&#39;.mBSbar&#39;).show(&#39;bounce&#39;, { times:3, distance:15 }, 300);$(&#39;body&#39;).animate({&quot;marginTop&quot;: &quot;32px&quot;}, 300);});}
else {$(&#39;.mBSbar&#39;).show(&#39;bounce&#39;, { times:3, distance:15 }, 500);          $(&#39;body&#39;).animate({&quot;marginTop&quot;: &quot;32px&quot;}, 250);}}
function mBSbar_hide() {$(&#39;.mBSbar&#39;).slideUp(&#39;fast&#39;, function() {          $(&#39;.mBSbar-stub&#39;).show(&#39;bounce&#39;, { times:3, distance:15 }, 100);        mstub_showing = true; });
 if( $(window).width() &gt; 1024 ) { $(&#39;body&#39;).animate({&quot;marginTop&quot;: &quot;0px&quot;}, 250);}}
 $().ready(function() { window.setTimeout(function() {mBSbar_show(); }, 0); });
</script>



Step 7 Now Find this code  <body>



Step 8 Copy the below code and Paste it Below/after <body>  and Save the templates.



<div class='BSbar' style='display:none;'><span style='font-family: &apos;Arial, Helvetica, sans-serif;'><font style='text-decoration:blink; color:#FFCC00;'>Latest News &gt;&gt;</font><a class='BSbar-link' href='http://www.bloggerspice.com/2013/02/bs-yellow-mag-premium-blogger-templates_1306.html' style='color:#009999'>Free BS Yellow Mag Premium Template </a> | <a class='BSbar-link' href='http://www.bloggerspice.com/2013/02/get-another-100-do-follow-backlinks_20.html' style='color:#FF3300'>Get Do-Follow Backlinks! </a> | <a class='BSbar-link' href='http://www.bloggerspice.com/2013/02/upload-your-mediafile-in-multiple-file.html' style='color:#99FF00'>Upload file in Multiple Hosting Site! </a></span><a class='close-notify' onclick='BSbar_hide();'><img class='BSbar-up-arrow' src='http://4.bp.blogspot.com/-fXQAbHAc0C4/UScNNcmyWxI/AAAAAAAABqM/kr33YlX9VXg/s320/BS+Down+Arrow.png'/></a></div><div class='BSbar-stub' style='display: none;'><a class='show-notify' onclick='BSbar_show();'><img class='BSbar-down-arrow' src='http://4.bp.blogspot.com/-veIVFPJzFzo/UScNNfiwpdI/AAAAAAAABqQ/CgE6SDOnaJk/s320/BS+Up+Arrow.png'/></a></div>


Customization:

  • If you find below code in your blog then paste the code without this two line.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js' type='text/javascript'/> 
  • Change http://www.bloggerspice.com/2013/02/bs-yellow-mag-premium-blogger-templates_1306.html  lines with your link locations
  • Change Those lines  Free BS Yellow Mag Premium Template with your Post Titles.
Add Premium Smooth Sticky Bar for Bloggers Blog
4 Stars stars - "Add Premium Smooth Sticky Bar for Bloggers Blog" A Notification Bar which is known as Sticky Bar now is very useful widget that work as a co...
Debashis 2/23/2013

Plz. Help me...its not working in my templates.

Copy the code from Step 6 and Step 8. Now just paste it before/above (Closing Body). Now it will work

That's really nice and good work.
kind regards
www.b

thanks bro ton of thanks. what happen long time no new????

always live news.
Thank you for your important post. I think it will be helpful for every body............

hey can you tell me how to make navigation bar like yours?

I didn't understand bro..are you talking about sticky bar or something else???

Hi..was here today
Used your sticky bar script and wonder if I can use a marquee of recent post headings within this sticky bar, Is it possible to do so please help me in script, Post your reply at www.santosh007.com

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *