Auto Hide Notification Box in Blogger

Post written by
Notification boxes in blogs can be useful for notifying readers about something hot on your blog. But this notification box is a bit different from others, it hides automatically after a specified time.
You may find lots of tutorials about these types of notification boxes but this one is different. It hides itself after a specified time which is the best thing about this. It won't remain there on the page forever (which can possibly disturb the reader not interested in notifications).

Before we proceed to the tutorial check what you are going to add to your blog. 
Demo

Proceed to the tutorial to know how to add it to your blog.

The HTML


The first thing we need is the HTML code as always. The code is simple and you can edit its content easily to make it ready for your blog. This is the HTML snippet

<div id='float-bar' style='display:none;'>
<b class='notifyTextbld'>Notification:</b>
Hello! Welcome to our blog and blah blah blah. See this new post <a rel='nofollow' href='http://stramaxon.com'>Cookies!</a>
</div>
The box contains bold text "Notification" and below it is some message you want your readers to see. You may also include an anchor link to a post or website you want the readers to visit.

Edit the HTML

You will need to edit the text (on line number 3) to display your own message. You know how to do it, just replace the sample text with your own meaningful message. It also contains an anchor link :

<a rel='nofollow' href='http://stramaxon.com'>Cookies!</a>
If you want your readers to visit a page then you can add your own HTML anchor links or any element, you can even add images inside it.

 If you are not familiar with HTML but want to add different HTML elements use the Blogger post editor to set the elements in a graphical user interface, switch to the HTML tab, copy the HTML and paste it in the third line of the HTML.

Add the HTML

To add this HTML you have to edit your template HTML so it's good to backup your current template.

We can add this HTML anywhere in the template (inside body element) but to make sure it doesn't interfere with any other element in the template it is best to add it below everything. Follow this steps to do that :
  1. Go to your Blogger Dashboard
  2. Click on the Template tab
  3. Press the Edit HTML button, ignore the warning and proceed. 
  4. Now open the in-page search function in your browser (default CTRL+F)
  5. And search for </body> 
  6. When you find it, paste the HTML code just above it and save the template. 
Once done, check your blog for the HTML (it might be at the bottom), it may look dull, to make it beautiful we will need the CSS. So proceed to the next step.

The CSS

Yeah, this is what gives life to dead HTML skeleton.  The following CSS will be used to style the notification box.
#float-bar {
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
background-color:rgba(248, 248, 248, 0.85);
color:#000;
padding:10px 30px 30px 30px;
font-size:16px;
position:fixed;
right:10px;
top:0px;
width:500px;
border-radius:0px 0px 10px 10px;
z-index:99999;
}

#float-bar a {color:#000;}
#float-bar a:hover {color:#000;text-decoration:none;}

#float-bar .notifyTextbld {display:block;margin-bottom:20px;}

Editing the CSS

You might want to modify the codes. Edit the values in the highlighted lines.
  • Line 3: This the background color of the box. Replace the value with a rgba color value (with alpha transparency) or HEX color code. 
  • Line 4: This is the color of the text inside the notification box. Use HTML Color Picker to choose a HEX color code  
  • Line 6: This is the size of font inside the notification box. Change the 16px to a desired value.
  • Line 8: You can edit both the property name and its value. Change right to left if you want the notification bar to appear on the left side. And also you can change the 10px to a some other value, this decides how far the box should be from the position. 
  • Line 9: The number of pixels you can the box to be far from the top. 
  • Line 10: This is the width of the box. Change the pixel value if you want.
If you know about CSS (it's easy) you may try adding for removing properties to design your own different box.

Adding the CSS

Check this tutorial to learn how to add CSS in Blogger
http://stramaxon.blogspot.com/2012/03/how-to-add-css-to-your-blogger-blog.html

The JavaScript jQuery 

The final step is to add the JavaScript jQuery script. The script controls how the box should enter and exit. We can do a lot of things with it but for now we will just do the basic in and out stuff.

Including jQuery Library

If you already have jQuery library installed then skip this step. If not then copy the HTML line below :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
To add this in your template : Go to your Blogger Dashboard -> Template -> Edit HTML -> Search for </head> and paste the code just above </head> and save the template.

Now you may proceed to the next step.

The jQuery Script

This is the script you need.
<script type='text/javascript'>
$(document).ready(function(){
$('#float-bar').slideToggle(445,function(){
$(this).show(function(){
setTimeout(function (){
$('#float-bar').slideUp(445);
},5000);
});
});
});
</script>
You don't need to change anything in this script expect the number of seconds you want the notification bar to stay on the page.

The line number 7 contains a number value 5000 which is the number of milisecond after which the box will disappear. 1000ms = 1sec, so just change the value to set a different time for it to hide. If you want the box to stay on the page for 20 seconds you may change the value to 20000

Adding the Script

The procedure to add the script is same as adding the HTML in the body. To add it go to your Blogger Dashboard -> Template -> Edit HTML -> Use CTRL+F and find </body> in the template and then paste the jQuery code just above </body>.

Showing it just on Homepage

You might not want this notification bar everywhere so the question how do you set it to just display on homepage, post pages, or an index page and archive pages.

The best way to do this is to use Blogger conditional tag (which works on the backend) which will make the box render only on the page type you specify.

The code we will need is this
<b:if cond='data:blog.url == data:blog.homepageUrl'>
//The HTML/JS/CSS or any code you want.
</b:if>
Replace the 2nd line in this code with the HTML code of the notification box and then add it to your template as instructed in in the tutorial. All we did is added the <b:if> conditional tag around the HTML code provided in the tutorial.

Now check your blog for the new notification bar. How is it ? I hope you liked it but if you found any error in the code then do post it in the comments. Thanks.