How to Add Cool Sticky Floating Notification bar in Blogger

Hello friends! Today in this article we are going to talk about Add Cool Sticky Floating Notification bar in Blogger. We will know How to Add Cool Sticky Floating Notification bar in Blogger. So stay with this article to know in more detail.

Everyone wants to show the important post in their blog above. This requires a floating notification bar where they can display their blog posts, policies or some important announcements. The advantage of this is that if a visitor visits any of your posts, they will see your message that they want to show you. 

If you give a link to one of your posts in this notification bar, if the post user likes it, he will also visit this post so that he will spend more time on your site. That's a good thing for your website. You can increase your page views by using this notification bar. 


The Floating Sticky Notification Bar is also on standby because this notification bar shows up at the top of your blog. Here's how to apply it to your blog. Below are some steps. You need to follow these steps carefully.

How to Add Cool Sticky Floating Notification bar in Blogger (Step by Step)

  • Login to your Blogger.com dashboard
  • Click on Theme Section and then click on the Customize arrow
  • Now click on Edit HTML
  • Now click on the code section and press Ctrl+F, you will see a search bar on the display screen.
  • Copy the below code

<!-- Notification code start -->
<style type='text/css'>
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;

text-align: center;
margin:-12px auto;
border-top: 1px solid #333;
vertical-align: baseline; overflow:hidden;
font-weight: bold;
font-family: arial,&quot;Helvetica&quot;;
 -moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
 -webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);

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;}

<div id='ut-sticky'>
<p style='padding-top:17px;'>Add Your Floating Notification Bar To Show In Your Blog <a class='ut-button' href='https://www.wikitechlibrary.com' target='_blank'>Click Here!</a></p>
<div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div>
<script language='JavaScript'>
function hide_cross() {
crosstbox = document.getElementById(&quot;ut-sticky&quot;);
crosstbox.style.visibility = &#39;hidden&#39;;
<!-- End of Notification code, info - https://www.wikitechlibrary.com -->

  • Search for <body>, Paste here the below code
  • After paste the above code change the Highlighted text on your own.
  • Now click on Save theme icon.
  • I hope you guys enjoyed the notification bar in your blog. Now enjoy the notification bar.


The purpose of today post is to provide you with the How to Add Cool Sticky Floating Notification bar in Blogger. Did you like these How to Add Cool Sticky Floating Notification bar in Blogger? You must definitely give us your feedback in the comment box below. If you also want to give us any kind of Suggestion, then share your opinion with us in the Comment Box.

Thank You!