Floating Notification Bar for Blogger

Ammar Ali shares with us a great tutorial about floating notification bar for Blogger. This cool feature is very easy to integrate in your blog, simply copy the codes below and paste it in your Blogger and that’s it. You can also customize it to your preferred needs.
In adding it to your Blogger, go to Blogger Dashboard > Design > Edit HTML
Look for this code:

<body>

Below that code, copy and paste this code:

<!-- Notification code start -->

<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=&#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);

#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=&#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);

#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:&quot;Arial&quot;; 

color:#FF0000; line-height:30px;}

.ut-cross, a:hover{color:#DDD; text-decoration:none;}

</style>

<div id='ut-sticky'>

<p style='padding-top:17px;'>Add This Floating Notification Bar To Your Blog <a 

class='ut-button' href='http://www.allbloggingtips.com' 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(&quot;ut-sticky&quot;);

crosstbox.style.visibility = &#39;hidden&#39;;

</script>

<br/><br/>

<br/><br/>

<!-- End of Notification code, info - http://www.allbloggingtips.com --

>

Change the highlighted text and link to your own preference.

Floating Notification Bar for Blogger

0 comments:

Post a Comment

Floating Notification Bar for Blogger

Next

Newer Post

Previous

Older Post

0 comments:

Post a Comment