Home » Tutorials » Sticky Bar: Add top sticky notification bar to blogger

Saturday, 27 July 2013

Sticky Bar: Add top sticky notification bar to blogger

By Muhammad Aseel at July 27, 2013 Labels: Blogger, notification, sticky bar, Tutorials

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.

Demo!!!

Is you liked top sticky notification bar? want to add it? so you are at right place.

also read:

Add auto hide social bookmarking widget to blogger.

Fade-in read more in JavaScript.

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.