Saturday, 27 July 2013

Sticky Bar: Add top sticky notification bar to blogger

Sticky Bar: Add top sticky notification bar to blogger
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.

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

  • 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=&#39;#7d7e7d&#39;, endColorstr=&#39;#0e0e0e&#39;,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,&quot;Helvetica&quot;;
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=&#39;#555555&#39;, endColorstr=&#39;#434343&#39;,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:&quot;Arial&quot;; 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(&quot;obt-sticky&quot;);
crosstbox.style.visibility = &#39;hidden&#39;;
}
</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.

Do you Like this Article?

rss twitter facebook
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.

10 comments:

Post a Comment

Subscribe this blog and get daily this blog articles to your email.