How to make a cool floating notification widget on blogger

Dear all bloggers, today CoolTips2u want to share a cool floating notification widget on blogger. You can see the demo on this blog. Yes! a cool floating notification bar on the top-side of this blog! :D Okay, now let me show you how to make the widget.

1. Log-in to your blogger and click on Design tab.

2. Click on Edit HTML tab.

3. Find (Ctrl+F) the <body> code.

4. Place the following codes AFTER it.

<br />
<br />
<style type='text/css'>
#ut-sticky
{
background: #09C; /* Old browsers */
background: -moz-linear-gradient(top,  #09F 6%, #09F 9%, #09C 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(6%,#09F), color-stop(9%,#09F), color-stop(99%,#09C)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #09F 6%,#09F 9%,#09C 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #09F 6%,#09F 9%,#09C 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #09F 6%,#09F 9%,#09C 99%); /* IE10+ */
background: linear-gradient(top,  #09F 6%,#09F 9%,#09C 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#09F', endColorstr='#09C',GradientType=0 ); /* IE6-9 */

border-bottom:2px solid #999;

color:#fff;
text-align: center;
margin:-12px auto;
padding-bottom:1px;
border-top: 10px solid #333;
height:40px;
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><br />
<div id='ut-sticky'><p style='padding-top:5px;'>Get more updates by <br />
<a class='twitter-follow-button' href='https://twitter.com/CoolTips2u'>Follow @CoolTips2u</a><br />
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><br />
</p><a href='http://www.cooltips2u.com/2012/09/how-to-make-cool-floating-notification.html' target='_blank' title='Add this widget on your blog!'><img alt='Add this widget to your blog!' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK75vTJU7mpcpm4a_HS2kzSkfQWtLWQbj_QjeY0Y3vONmbSAmhWRiEedzT7CCJvxDPl_9nZkaRm_JflLyDrj_hSMYQcQ0M5_daoeiVNJKbAYZIBq-Twyu5iMGjVuGg9KLCWdrqAEyqSC_-/s1600/question+mark.png'/></a><br />
<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 />

5. Click Save Template. That's all! :D

6. Customization:

1. You can change the background bar to your favorite color. Just replace the color code on background: #09C; on #ut-sticky section (don't forget to change all the background code: background: -moz-linear-gradient(top, #09F 6%, #09F 9%, #09C 99%); | background: -webkit-gradient(linear, left top, left bottom, color-stop(6%,#09F), color-stop(9%,#09F), color-stop(99%,#09C)); and so on).

2. You can also change the background bar (when mouse over) to your favorite color. Just replace the color code on background-color:#333; on #ut-sticky:hover section.

3. You can also change the content of the bar with your desired text or widget. Just replace the code within <p style='padding-top:5px;'> and </p>. In this case, I put some texts and my twitter widget.

7. If you have some questions, please comments on the comment box below. Thanks for coming! :D

4 Responses on 'How to make a cool floating notification widget on blogger'

Unknown said...: This site sounds awesome friends and also check this out http://snacksofhacks.blogspot.in/
where hacking never stops; 25 February 2013 at 14:53
Unknown said...: Thank you very much Krishna!

Your site is also very nice! ;); 26 February 2013 at 08:42
Unknown said...: Why there is no add ?; 22 April 2014 at 17:26
Unknown said...: Hi Vivek..

What do you mean of 'add'?; 23 April 2014 at 08:02