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.
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;
}
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) {$('.PTBbar-stub').slideUp('fast', function() { $('.PTBbar').show('bounce', { times:3, distance:15 }, 300); $('body').animate({"marginTop": "32px"}, 300);});}
else {$('.PTBbar').show('bounce', { times:3, distance:15 }, 500); $('body').animate({"marginTop": "32px"}, 250);}}
function PTBbar_hide() {$('.PTBbar').slideUp('fast', function() {$('.PTBbar-stub').show('bounce', { times:3, distance:15 }, 100);stub_showing = true; }); if( $(window).width() > 1024 ) {$('body').animate({"marginTop": "0px"}, 250);}}
$().ready(function() {window.setTimeout(function() {PTBbar_show();}, 0);});
var mstub_showing = false;
function mPTBbar_show() {if(mstub_showing) {$('.mPTBbar-stub').slideUp('fast', function() {$('.mPTBbar').show('bounce', { times:3, distance:15 }, 300);$('body').animate({"marginTop": "32px"}, 300);});}
else {$('.mPTBbar').show('bounce', { times:3, distance:15 }, 500); $('body').animate({"marginTop": "32px"}, 250);}}
function mPTBbar_hide() {$('.mPTBbar').slideUp('fast', function() { $('.mPTBbar-stub').show('bounce', { times:3, distance:15 }, 100); mstub_showing = true; });
if( $(window).width() > 1024 ) { $('body').animate({"marginTop": "0px"}, 250);}}
$().ready(function() { window.setTimeout(function() {mPTBbar_show(); }, 0); });
</script>
<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) {$('.PTBbar-stub').slideUp('fast', function() { $('.PTBbar').show('bounce', { times:3, distance:15 }, 300); $('body').animate({"marginTop": "32px"}, 300);});}
else {$('.PTBbar').show('bounce', { times:3, distance:15 }, 500); $('body').animate({"marginTop": "32px"}, 250);}}
function PTBbar_hide() {$('.PTBbar').slideUp('fast', function() {$('.PTBbar-stub').show('bounce', { times:3, distance:15 }, 100);stub_showing = true; }); if( $(window).width() > 1024 ) {$('body').animate({"marginTop": "0px"}, 250);}}
$().ready(function() {window.setTimeout(function() {PTBbar_show();}, 0);});
var mstub_showing = false;
function mPTBbar_show() {if(mstub_showing) {$('.mPTBbar-stub').slideUp('fast', function() {$('.mPTBbar').show('bounce', { times:3, distance:15 }, 300);$('body').animate({"marginTop": "32px"}, 300);});}
else {$('.mPTBbar').show('bounce', { times:3, distance:15 }, 500); $('body').animate({"marginTop": "32px"}, 250);}}
function mPTBbar_hide() {$('.mPTBbar').slideUp('fast', function() { $('.mPTBbar-stub').show('bounce', { times:3, distance:15 }, 100); mstub_showing = true; });
if( $(window).width() > 1024 ) { $('body').animate({"marginTop": "0px"}, 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: '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>
<span style='font-family: '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.
I am developing a new template for blogger, what features are you expecting in this new template? Leave your views about it.
Follow PcTricksBlog! 
 Get free daily email updates! |
Share your views...
12 Respones to "Add Premium Notification Bar for Blogger blog."
wow great tutorial bro.keep it up
hey man Thanks!but i sure this is have bug!
Not working for me!
Hey Sergan..
Can you tell me the URL of your blog so that I can find some solution for that.
This post is so essential. Thanks to the administrator. I am giving a new essential link for seo tutorial.
Thanks.
I really like this widget. This is awesome!
Thank you for sharing this... :)
Amazing. I love how you purely share without ya logo :)
It also interfere lightbox script. After putting in my lightbox on image no longer work.
hey bro it's not working for mee
Up arrow and down arrow not showing
The element type "span" must be terminated by the matching end-tag "".
You can replace the colored code with this one containing ending span tag... IDM full Version FREE!
working perfectly....
Post a Comment
Please don't spam !!! And DO NOT put more than ONE link in comment.