Add A Transparent Notification Bar To Your Blog


Add The Transparent Notification Bar To Blogger
Guest Post By Pushker Yadav.

Hello Friends! First i want to pay thanks to the Admin of this blog who give me a chance to share something with you. This is my first Guest post on Spice Up Your Blog.Many Popular blogs use a notification bar to show a News feed and latest content because it attracts your visitors attention.You can add a link to a featured post, your Rss feed, social profile or an affiliate offer.So here I will show you how to add an awesome notification bar with close button.Its very simple and looks very cool.You can use it on a blogger blog and wordpress blog or even in your websites.

View Demo Button

Add The Transparent Notification Bar To Blogger

Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

Step 1. In Your Blogger Dashboard Click Design > Edit Html

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)


Step 3. Copy and Paste the following code Directly Above / Before </body>

<!-- Notification code start -->
<style type='text/css'>
background:url(&#39;;) repeat;
text-align: center;
margin:0 auto;
border-top: 1px solid #fff;
font-weight: bold;
font-family: arial,&quot;Helvetica&quot;;
#ut-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}
#ut-sticky p a{ text-decoration:underline; color:#FFFF33;}
.ut-cross{display:block; position:relative; right:15px; float:right;}
.ut-cross a{font-size:18px; font-weight:bold; font-family:&quot;Arial&quot;; color:#FF0000; line-height:30px;}
<div id='ut-sticky'>
<p>Add This Transparent Notification Bar To Your Blog <a href='' target='_blank'>Transparent Notification Bar</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;); = &#39;hidden&#39;;
<!-- End of Notification code, info - -->

How to change color and Notification Message.

In this code i have chosen such a color combination so that its looks transparent and whenever you take your mouse on this bar it become more visible.

Change Message - The message and link are highlighted in red above, change as required.

The colors used for the bar are highlighted in yellow and can be changed as required, find hex color codes.

Drop Your Comments And Questions Below.

Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative

If You Enjoyed This Post Please Take 5 Seconds To Share It.


  1. So i've always been intimidated by HTML because I have no computer background, but I wanted to try this because it looks pretty cool. It only took a minute and was very simple and easy.

    Thank you for making you blog so accessible to simple people like me!

  2. How did you get the Facebook like button to pop up on the demo/test blog homepage?

  3. @ Rishabh - I'm currently working on the Facebook pop up and will have the tutorial published over the weekend.

  4. Hi.
    Thanx for this!
    I've placed it in my blog and its working perfectly! Thanx!
    Also patiently waiting for the Facebook pop up i saw on the test blog ;D

  5. works perfect! you made it very easy for us beginners - thanks.

  6. Wonderful! It's a piece of gold for me. Ill try it later and get back to this blog to say my comment on that transparent tool bar because im on mobile right now.

    @ cristofer - don't worry buddy! You'll learn the basics oo html in the long run if you just continue to heat up your passion on blogging. It'll automatically come to you. Just like you, I don't have any background on computer but now i can say that I know now the basics by just following these simple instructions like this.

  7. love the banner in the demo page! Did you have any tutorial of this before?

  8. how to add multiple links in the bar?

  9. Thanks for the fantastic posts.Your blog has turn into component of my everyday routine, I am thrilled when I come across a new post of yours on my rss reader, just thought I would let you know. Thanks

    1. Thanks for your kind words Varinder :)

  10. Hi. I've implemented this awesome addition to my blog... could u create one that appears at the top of the blog also? or is there a way to alter this one so it appears at the top also? Thanx

  11. Hello,i found your blog through search,yours blog is excellent and a nice blog...

    The contents are nice &will grow higher in future...


  12. Love it, thanks for the code! Is there any way to customize the size of the banner? I'd love to have it be a bit taller...

  13. One more question: Is it possible to have the notification bar appear only once a day or so? I'd imagine that having it show up on every single page when someone views more than one page would be annoying. Thanks for your help!

  14. Thanks for your work at this blog and for all the great resources you expose here.

    Ontopic: I have a limited experience on blogging and i ask maybe a n00b question, but where this piece of code can be added on a wordpress blog ?

    Thanks in advance!

  15. Hello Paul,

    Awesome little gadget. I am trying it out on my blog right now. But I am encountering a problem after a few days of use. When I press on the X, the gadget does not close. It doesn't seem to work on both the Chrome and Firefox browsers.

    I recopied the code again, but I get the same results. Can you please help me solve this problem.

    Thanks in advance.

  16. Awesome , but can i add it to top above the header of my blog?

  17. Best I used it my blog
    If I want to change the location of bar then what should i do ??
    I want this notification bar at the top of my blog(header).

  18. Thanks PAUL!
    i Just implemented on my blog ;)

  19. This is great, but demo is not working in IE8. (I know, but I still have a lot of visitors that use that browser!)

  20. How do i take the transparent bar off? I put it a while ago, but now I can't change it, because of the new blogger format.

    Is there a way to take it off?


  21. How did you get the Facebook like button to pop up on the demo/test blog homepage?

  22. how to make this bar appear at top of the blog

  23. How do you center it so it's in middle, it appears to be in the lower right corner? i tried changing the code to "center" but it does nothing.

  24. How did you get the Facebook like button to pop up on the demo/test blog homepage?

  25. Can I insert this only in pages with a particular label?

  26. Very nice gadgets.. I want to install on my blog.

  27. Love it, thanks for the code! Is there any way to customize the size of the banner? I'd love to have it be a bit taller...

  28. great notification bar is good and most imp, it is working...

  29. Please advise on how to add multiple texts or messages in a scrolling, fading or sliding manner.


Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.

Hire Us