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) {$('.BSbar-stub').slideUp('fast', function() { $('.BSbar').show('bounce', { times:3, distance:15 }, 300); $('body').animate({"marginTop": "32px"}, 300);});}
else {$('.BSbar').show('bounce', { times:3, distance:15 }, 500); $('body').animate({"marginTop": "32px"}, 250);}}
function BSbar_hide() {$('.BSbar').slideUp('fast', function() {$('.BSbar-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() {BSbar_show();}, 0);});
var mstub_showing = false;
function mBSbar_show() {if(mstub_showing) {$('.mBSbar-stub').slideUp('fast', function() {$('.mBSbar').show('bounce', { times:3, distance:15 }, 300);$('body').animate({"marginTop": "32px"}, 300);});}
else {$('.mBSbar').show('bounce', { times:3, distance:15 }, 500); $('body').animate({"marginTop": "32px"}, 250);}}
function mBSbar_hide() {$('.mBSbar').slideUp('fast', function() { $('.mBSbar-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() {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: 'Arial, Helvetica, sans-serif;'><font style='text-decoration:blink; color:#FFCC00;'>Latest News >></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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN5xaasiKB8BMq2VjReMFu1c-hfFFBfA820640peSRhdsTKykGgJjT8Tnk_lvGY66P206hvkRn9PHP67YJPTPhG7PszwXPjJciNjvGBdfbn62IcyuSTl_RSRoCgYrmgOqyrgYTwoQ06iqz/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Utyi45NiPKSKFkxeZQufpo-EO_4EWi9EVppUwWYtEoqCcqnLU78mPBHyJp47WkER-2TkfsHgj40AOtH5YAVWPEsVqxCTPkCyH8SDs4NYsNymHMgwxW5ictP_XVoQEklPEycaadv2eIAT/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.
0 comments:
Post a Comment