Bismillah Hir-Rahman Nir-Rahim.
Top sticky notification bar is mostly used when you have any notification. You can easily put your any link to this top sticky bar, You can use this top sticky notification for any reason i.e add top sticky notification bar to blogger by click here. You can also see the top sticky notification bar to my blog and at lots of blogs. If you want to see a demo of this top sticky notification bar so just click to demo button.- also read:
Adding top sticky notification bar to blogger:
- Go to blogger,
- go to template >> edit HTML,
- now paste the below code just below the <body> tag:
<style type='text/css'>
#obt-sticky
{
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 6%, #7d7e7d 9%, #0e0e0e 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(6%,#7d7e7d), color-stop(9%,#7d7e7d), color-stop(99%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7d7e7d 6%,#7d7e7d 9%,#0e0e0e 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7d7e7d 6%,#7d7e7d 9%,#0e0e0e 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7d7e7d 6%,#7d7e7d 9%,#0e0e0e 99%); /* IE10+ */
background: linear-gradient(top, #7d7e7d 6%,#7d7e7d 9%,#0e0e0e 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
border-bottom:2px solid #999;
color:#fff;
text-align: center;
margin:-12px auto;
padding-bottom:1px;
border-top: 1px solid #333;
height:38px;
font-size:13px;
position:fixed;
vertical-align: baseline; overflow:hidden;
z-index:999;
width:100%;
border-bottom-left-radius:6px;
border-bottom-right-radius:6px;
display:block;
font-weight: bold;
font-family: arial,"Helvetica";
font-color:#fff;
-moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
-webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
}
#obt-sticky:hover
{
background-color:#333;background-image:-moz-linear-gradient(top,#555555,#434343);background-image:-ms-linear-gradient(top,#555555,#434343);background-image:-webkit-gradient(linear,0 0,0 100%,from(#555555),to(#434343));background-image:-webkit-linear-gradient(top,#555555,#434343);background-image:-o-linear-gradient(top,#555555,#434343);background-image:linear-gradient(top,#555555,#434343);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#434343',GradientType=0)
-webkit-transition:all 1.3s ease-in-out;-moz-transition:all 1.3s ease-in-out;-o-transition-duration:all 1.3s ease-in-out;transition:all 1.3s ease-in-out;
-moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
-webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
}
#obt-button {background:#fff; padding:4px; color:black;text-shadow:0 -1px 0 rgba(255,255,255,0.25);background-color:white}
#obt-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}
#obt-sticky p a{ text-decoration:underline; padding:4px; color:#FFFF33;}
.obt-cross{display:block; position:relative; right:15px; top:4px;float:right;}
.obt-cross a{font-size:18px; font-weight:bold; font-family:"Arial"; color:#FF0000; line-height:30px;}
.obt-cross, a:hover{color:#DDD; text-decoration:none;}
</style>
<div id='obt-sticky'>
<p style='padding-top:17px;'>Your Text <a class='obt-button' href='http://onlinebloggertricks.blogspot.com/2013/07/sticky-bar-add-top-sticky-notification.html' target='_blank'>link Here!</a></p>
<div class='obt-cross'><a href='javascript:hide_cross();'>x</a></div>
</div>
<script language='JavaScript'>
function hide_cross() {
crosstbox = document.getElementById("obt-sticky");
crosstbox.style.visibility = 'hidden';
}
</script>
Customization:
- Find your text and replace it with your text,
- find link here and change the link text with your own,
- find http://onlinebloggertricks.blogspot.com/2013/07/sticky-bar-add-top-sticky-notification.html and change the link with your own.
Share This Post
Do you Like this Article?
Subscribe us and get daily updates directly to your email inbox.
We will not share you email with anyone so you don't have to worry.
Assalamualaikum! My name is Muhammad Aseel, I started this blog to provide you the best tutorials of blogger and give you suitable templates, widgets etc. My nationality is Pakistan and I am living in Karachi. 
Hi,
ReplyDeleteI found your tutorial easy to implement and very useful. I implemented it at my site http://www.indian-share-tips.com/ without any problem and it is looking great.
Can you tell us that how we can change the colour scheme of the notification bar background to make it in sync with site color scheme. It will be great if you can dwell on gradient colors also.
Regards
@Analyst
ReplyDeleteI will post your request soon.
Hi,
ReplyDeleteThanks for replying. I am sure a lot of people can get benefitted with your superb advice.
I have another suggestion that notification bar again appearing on the landing page is not correct. Can you tell the procedure that how we can hide the notification bar on the landing page. I will eagerly wait for your reply.
A detailed guideline will help a number of bloggers.
Regards
HI,
ReplyDeleteHow can we make sure that the sticky bar does not appear on the landing page. I have installed widget but I am facing a problem that it is appearing on the landing page.
Your help will be appreciated. I wrote comment yesterday also but did not elicit any response.
Regards
Analyst sorry for late response because I was busy in some work.
ReplyDeleteAnalyst is you want sticky bar like my blog or you want that sticky bar only display at homepage...
Hi,
ReplyDeleteIt should display on all pages less the page on which it is being directed. Like I want my link to direct to http://www.indian-share-tips.com/2009/10/jackpot-tip-is-sure-shot-way-to-make.html but do not want the sticky bar to appear on this page. Presently it is appearing on all the pages. Your help will be highly appreciated.
Regards
@analyst
ReplyDeleteIt might be impossible. Yea but I have great suggestion for you, what your review about my blog sticky bar? It can easily collapse and expand. Or May I give you sticky bar that only display at homepage?
that's awesome explanation. Notification bar for blogger is always a professional
ReplyDeletelook of thinking. Thanks for sharing.
@analyst
ReplyDeletehere you can easily make your type or your like sticky Bar
Hello Bar
http://visitorengage.com provides a notifications feature with much customization and behavioral targeting rules and a feedback button too for visitors to contact. Would be great if you can write about this startup.
ReplyDelete