How To Add Notification Bar In Blogger Easily (Blogspot)

Adding A notification bar in Blogger is quite simple and can be easily done even if you are not familiar with the blogger template area in your blog. A notification bar is a highly useful blogger widget which can be used to display advertisement, hot deals, a link to your facebook page and other related links. Apart from the fact that it helps makes displaying of important notification easier, it also makes your blog design look more professional and presentable. And the Notification bar is also away to promote your affiliate links and be sure to get links because it stands out visible without even affecting your blogs elegant look. That been said, the usefulness of the notification bar cannot be over emphasize, so I would go straight to the point and teach you how to add it to your blog


How To Add Notification Bar In Blogger (Simple Method)

  • STEP 1

1. Go To Blogger Dashboard Chose Your Blog
2. Click on Templateand select Edit HTML
Use the search command of on the browser to find the code. To bring out a search bar, click on the template area and Press Ctrl + F(its usually that on most browsers)copy and paste this code in the bar that appears to search for it ]]></b:skin>   If you can’t find the whole line, search for skin
Now Right Above this, paste the code below

  /*————-Moon T&T Notification Bar —————-*/
#bloggernotificationWrap {
    display: none;
    height: 41px;
    margin: -41px 0 0;
    padding: 0;
    position: fixed;
    width: 100%;
    z-index: 999999;
#bloggernotification {
    background: none repeat scroll 0 0 #000000;
    border-bottom: 3px dotted #FFFFFF;
    border-radius: 10px 13px 7px 5px;
    color: #FFFFFF;
    font-family: arial,sans-serif;
    font-size: 14px;
    font-weight: bold;
    height: 37px;
    margin: -30px 5px 5px -1200px;
    padding-top: 7px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000000;
    width: 500%;
    z-index: 9998;
#bloggernotification a {
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
    color: #000000;
    font-family: Calibri,sans-serif;
    font-size: 13.5px;
    padding: 1px 7px;
    text-decoration: none;
#bloggernotification a:hover {
    text-decoration: underline;
#bloggernotification img {
    display: none;

If you are good with CSS feel free to play around with the above code to customize the display of the notification bar to your taste and size.
Now Hit Save
After Doing that, move to

  • STEP 2
How to Build a Full Width Site: Tips to Remove Sidebar in Blogger

Now Using the same method to find Search for <Body> Right above the body tag, Paste the code below

<div class=’ openbloggernotification’ id=’bloggernotificationWrap’ style=’display: block; margin-top: 0px;’>

<div id=’bloggernotification’>
Post what ever message you want here

Replace “Post what ever message you want here” with your own message. You can use image links, and customize the message any how you want it to display using basic HTML codes, color etc.
Save the template and preview blog to review your work

Now Your Turn

After following this procedure and encounter any issue, use the comment box to ask for help and tips. Good luck.

Previous ItemHow To Put Adsense Ads 728×90 Leaderboard Below Nav Bar in Blogger
Next Item5 Known Reasons That Could Get Your Google Adsense Account Disabled
Kyle Stevens
Kyle Stevens is an out going creative writer and tech blogger who has a passion for helping people and building creativity in the mind, through his outstanding tutorials, articles and excellent reviews of any gadget.


  1. its not working on my blog ( pls help me out via email albert.anietie.okon[at]

    • Hi Albert,

      You can use the free services of cloudflare or to achieve this. Neither of them needs a complicated setup or code modification.

  2. This is absolutely helpful… I’m trying to build a list on my blog,


Please enter your comment!
Please enter your name here