Add Premium Notification Bar for Blogger blog.

Well in my previous articles about notification bar, its quite understood why we need Notification bar on blogs or websites. You can check out previous notification Bar's here.

• Simple scrolling Notification Bar for blogger.
• Blogger Notification Bar with social sharing buttons.

Today, I am sharing one new Notification Bar, which is just outstanding. As this is just a Premium Notification Bar. This bar is what most of bloggers are waiting for. So, feel relaxed now.

Why I call it Premium:

Well, generally we call some service premium when its features are outstanding. And this bar is not an exception. Its features are really great. This is quite simple in code, but its amazing at functionality.

• There is not any copyright link or some other back-link.
• This is based on very small and simple script.
• This notification bar has an amazing bouncing effect when click on Show or Hide button, as you can check it onevery page of PctricksBlog.
• This Notification bar is completely customizable. You are free to change its style as per as your choice.

How to add this Notification bar to blogger:

As usual, you need to place some code in your blog's template. So, just follow these simple steps to add this full featured Notification bar to your blog.

• Go to Blogger Dashboard.
• Click on Template >> Edit template. Make sure to keep a backup of your template.
• Now, you need to add some CSS and some script code to place this Notification bar.
• Search for ]]></b:skin>  and Place the following CSS code just above/before this closing skin tag.

.PTBbar{
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;
}
.PTBbar-stub {
position: fixed; top: -10px; left: 0px;
width: 100%; height: 19px;
z-index: 200;
padding: 7px 0 5px 0;
text-align: center;
}
.PTBbar 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;
}
.PTBbar-up-arrow:hover {
background: url(https://lh6.googleusercontent.com/-lqpq9ECgADA/UPozR1f0roI/AAAAAAAAA-g/cVpAAcyxnYo/s19/PTBbar-up-arrow-hover.png) scroll 0px 2px;
}
.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;
}
.PTBbar-link {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
color: #FFF; margin-right:10px; text-decoration:none;
}
.PTBbar-link:hover {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-bottom:1px dotted #DDD;  text-decoration: none;
}

• Now you need to add the script code. Search for </body> and place the below code just before/above this closing body tag.

<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 PTBbar_show() {if(stub_showing) {$(&#39;.PTBbar-stub&#39;).slideUp(&#39;fast&#39;, function() { $(&#39;.PTBbar&#39;).show(&#39;bounce&#39;, { times:3, distance:15 }, 300);            $(&#39;body&#39;).animate({&quot;marginTop&quot;: &quot;32px&quot;}, 300);});}
 else {$(&#39;.PTBbar&#39;).show(&#39;bounce&#39;, { times:3, distance:15 }, 500); $(&#39;body&#39;).animate({&quot;marginTop&quot;: &quot;32px&quot;}, 250);}}
 function PTBbar_hide() {$(&#39;.PTBbar&#39;).slideUp(&#39;fast&#39;, function() {$(&#39;.PTBbar-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() {PTBbar_show();}, 0);});
var mstub_showing = false;
function mPTBbar_show() {if(mstub_showing) {$(&#39;.mPTBbar-stub&#39;).slideUp(&#39;fast&#39;, function() {$(&#39;.mPTBbar&#39;).show(&#39;bounce&#39;, { times:3, distance:15 }, 300);$(&#39;body&#39;).animate({&quot;marginTop&quot;: &quot;32px&quot;}, 300);});}
else {$(&#39;.mPTBbar&#39;).show(&#39;bounce&#39;, { times:3, distance:15 }, 500);          $(&#39;body&#39;).animate({&quot;marginTop&quot;: &quot;32px&quot;}, 250);}}
function mPTBbar_hide() {$(&#39;.mPTBbar&#39;).slideUp(&#39;fast&#39;, function() {          $(&#39;.mPTBbar-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() {mPTBbar_show(); }, 0); });
</script>

• Now you need to add your links on the Notification bar, So, add the below Code before/above the </body> tag. This part also consist of the code for Show and Hide Buttons.

<div class='PTBbar' style='display:none;'>
<span style='font-family: &apos;Arial, Helvetica, sans-serif;'>
Endorsed by Readers... <a class='PTBbar-link' href='http://www.pctricksblog.com/2012/12/download-idm-607-cracked-full-version.html' style='color:#FFF'>IDM full Version FREE! </a></div>
<div class='PTBbar-stub' style='display: none;'>
<a class='show-notify' onclick='PTBbar_show();'><img class='PTBbar-down-arrow' src='https://lh3.googleusercontent.com/-5UyzcK4vc9c/UPozR9KpbcI/AAAAAAAAA-c/wliF_TedEUU/s35/PTBbar-down-arrow.png'/></a></div>

• Now click on Save Template. You must strictly specify particular class within the tags.
•  For eg. <a class='PTBbar-link' href='Link URL' style='color:#FFF'>Link Text</a>
• You can change the link highlighted with your own links. You can place multiple links as well, but place then inside <div class='PTBbar'> bla bla bla </div>

That's all done. Visit your blog page, You will see a featured Notification Bar on it.
I am developing a new template for blogger, what features are you expecting in this new template? Leave your views about it.