How To Add Notification Bar in Blogger

In blogger you won't get many options to customize your site. 




And the themes of a blogger site look very outdated and old fashioned, and it won't engage your customers or visitors as well. 

But you can add some fancy features like notification bar popup that makes your site looks bit professional. 

It is also used to display best deals, advertisement, a link to your page, etc.


Also Read: How to do blogging in Nepal.


So, in this article I will be telling you how to add popup notification in blogger in best way possible. 


Follow the steps:

1. Go to dashboard of your blogger



After going to the dashboard click on the theme as in the picture above.

2. Click on Edit HTML





After clicking EDIT HTML you will be redirected to the main code, make sure to take a backup of your theme, so that you can restore it if you make any mistakes.


Now, where should you paste the code?


Use the search command to find the code. click on the template area and press ctrl + f and you will get a search interface. like this




Now what you have to do is you have to Copy this code and search it. ]]></b:skin> 



But in case If you didn't find just 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 customize with the above code to customize the display of the notification bar to your shape and size.


Then Save it


After Doing that,


Now Using the same method which I have taught above to find Search for <Body> Right above the body tag, Just 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
</DIV>
</DIV>

In that red color highlighted text "POST WHAT EVER MESSAGE YOU WANT HERE" you can write whatever you want. 


Save it and preview your blog, either it is changed or not. 

Thanks for reading this article. 



Please Don't spam any Harmful Links on the comment

Post a Comment

Please Don't spam any Harmful Links on the comment

Post a Comment (0)

Previous Post Next Post