September 14, 2013

How to Add Cool Floating Notification bar in Blogger?

This Sticky Bar Or Fixed Bar Works Best By Clutching Readers Attention And Helps You To Focus Readers Towards Important Deals, Announcements Or Any Story, its works like the Floating Notification Menu. Blogger Notification Bar Needs No Registration And Offers Far Best Design Flexibility. The Scripts Are Less Than 7KB In Size And Fully Hosted At Your BlogSpot Server.
You Can Modify Its Look And Theme To Any Color That May Blend Your Layouts. Every Single Element Is Well Structured And Can Easily Be Configured. You Can See It Live Just To The Right Of My Notification Or Sticky Bar Or Fixed Bar At The Top Or Click Live Demo Baton Bellow. I Am Excited To Share It With You All. Let’s Get To Work!

First Always Back Up Your Template Before You Any Make Changes

    Goto Blogger => Design => Edit HTML
    Search for this code

<body> Using CTRL+F

      Just below it paste the following code,

<style type='text/css'>
#ut-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);
}
#ut-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);

}

#ut-button {background:#fff; padding:4px; color:black;text-shadow:0 -1px 0 rgba(255,255,255,0.25);background-color:white}

#ut-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}
#ut-sticky p a{ text-decoration:underline; padding:4px; color:#FFFF33;}
.ut-cross{display:block; position:relative; right:15px; top:4px;float:right;}
.ut-cross a{font-size:18px; font-weight:bold; font-family:"Arial"; color:#FF0000; line-height:30px;}
.ut-cross, a:hover{color:#DDD; text-decoration:none;}

</style>
<div id='ut-sticky'>
<p style='padding-top:17px;'>YOUR_NOTE_HERE <a class='ut-button' href='URL_HERE' target='_blank'>Click Here!</a></p>
<div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div>
</div>
<script language='JavaScript'>
function hide_cross() {
crosstbox = document.getElementById("ut-sticky");
crosstbox.style.visibility = 'hidden';
}
</script>
<br/><br/>
<br/><br/>