Add Premium Smooth Sticky Bar for Bloggers Blog

Add Premium Smooth Sticky Bar for Bloggers Blog

Comments: 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.

Speak Your Mind

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 Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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 *