You must have seen many websites or blogs use this kind of sticky notification bar to display the important announcements or events on their blogs, so that their readers do not skip any important information.
This bar grabs the attention of visitors very strongly and thus helps in reducing bounce rate of your blog. It shows manually specified links, so you can add or remove links to it according to your needs. To add this sticky notification bar to your Blogger blog, follow below instructions.
This bar grabs the attention of visitors very strongly and thus helps in reducing bounce rate of your blog. It shows manually specified links, so you can add or remove links to it according to your needs. To add this sticky notification bar to your Blogger blog, follow below instructions.
Steps To Follow:
Step1. Log in to your blogger account.
Step2. From dashboard click on drop down menu and choose template.
Step3. First of all backup your template and then click on Edit HTML button.
Step4. Now search this <body expr:class='"loading" + data:blog.mobileClass'>
Step5. Now paste the below code just below the above code.
<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;'>TITLE<a class='obt-button' href='LINK' target='_blank'>LINK NAME</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>
Now make sure that you changed the Red Colored words with your own.
Step6. Save the template.
You are Done!!
Comments
Post a Comment