In this post we are going to see how you can add a sticky notification bar to your Blogger blog with a jQuery sliding effect. You must have seen many blogs use this kind of sticky notification bar to display the latest news, announcements or events, so that their readers do not skip any important information. It is very important to provide your online readers with the latest info about the blog so that you can increase your readership.

This sticky notification bar is coded using HTML/CSS and jQuery. The cool sliding effects to show and hide the bar are created with jQuery. The bar has no Flash content or heavy images, so it will not increase your blog page load time. You can also customize its look and feel, which we will cover in the customization part. First, let's take a look at the procedure to add this widget to your blog.

How to add the jQuery sticky notification bar

Log in to your Blogger account.
Click on Template and take a full backup of your blog. This is recommended before you make any change to the template.
Now find the <head> tag and add the following code just under it:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

If you have already added a jQuery file to your blog, you can skip the step above.
Now, just before the </head> tag, place the following code:

<script type="text/javascript">
jQuery(document).ready(function()
{
  jQuery('#UT-up').click(function()
  {
    jQuery('#UT-up').fadeOut('100');
    jQuery("#UT-notify").slideUp('1000',function()
    {
      jQuery('#UT-down').slideDown('fast',function()
      {
        jQuery('#UT-down-img').fadeIn('2000');
      });
    });
  });

  jQuery('#UT-down').click(function()
  {
    jQuery('#UT-down').slideUp('fast',function()
    {
      jQuery('#UT-up').fadeIn('2000');
      jQuery("#UT-notify").slideDown('1000');
    });
  });
});
</script>

Use CTRL+F to find the code ]]></b:skin> and place the following code below it:

<style>
#UT-notify
{
height:30px;
background-color:#333;
font-family:Georgia, "Times New Roman", Times, serif;
color:#FFF;
position:fixed;
top:0;
left:0;
right:0;
width:100%;
text-align:center;
box-shadow:0px 0px 1px 2px #0F0;
border-radius:0px 0px 5px 5px;
z-index:1000;
}
#UT-notify a, #UT-notify a:hover, #UT-notify a:visited
{
color:#FFF;
text-shadow:#CCC 0px 1px 0px;
text-decoration:none;
}
#UT-up
{
position:fixed;
top:8px;
right:20px;
z-index:1000;
cursor:pointer;
}
#UT-down
{
position:fixed;
top:0px;
right:15px;
z-index:1000;
display:none;
cursor:pointer;
height:30px;
width:30px;
background-color:#333;
font-family:Georgia, "Times New Roman", Times, serif;
border-radius: 0px 0px 5px 5px;
box-shadow:0px 0px 1px 2px #0F0;
}
#UT-down-img
{
position:fixed;
right:20px;
top:10px;
}
#UT-nofifications
{
margin-top:5px;
}
</style>

Press CTRL+F to find the <body> tag (in some templates the body tag has extra attributes, so search for <body instead).
Just beneath this tag, place the following code:

<div id="UT-notifications-Wrap">
  <div id="UT-down">
    <img src="YOUR_DOWN_ARROW_IMAGE_URL" title="Show Notification bar" alt="show-notice" id="UT-down-img"/>
  </div>
  <div id="UT-notify">
    <span id="UT-up">
      <img src="YOUR_UP_ARROW_IMAGE_URL" title="Hide Notification bar" alt="hide-notice"/>
    </span>
    <div id="UT-nofifications">
      <!--Write your notifications below and give hyperlinks-->
      <a href="https://www.yourblog.com/your-first-link" target="_blank">First announcement</a>&nbsp;|&nbsp;
      <a href="https://www.yourblog.com/your-second-link" target="_blank">Second announcement</a>&nbsp;|&nbsp;
      <a href="https://www.yourblog.com/your-third-link" target="_blank">Third announcement</a>
    </div>
  </div>
</div>

Now change the notification titles as per your needs and replace the hyperlinks with your own links. Also replace the two arrow image URLs with your own small up/down arrow icons.
Save the template and click View blog to see the notification bar in action.

Useful tip

If you want to regularly change the contents of this notification bar, we recommend adding the code from step 8 in an HTML/JavaScript gadget from the Layout window rather than under the body tag. It will let you easily update the notifications regularly without editing the template every time.

Customizations

To change the main background color, change the background-color:#333 values in the CSS.
To change the color of the hyperlinks, change the color:#FFF value in the #UT-notify a rule.

You have successfully added the jQuery sticky notification bar with sliding effects to your blog. You can check out our Blogger tips and tricks section for more blogging and SEO optimization tips.

Sticky Sliding Notification Bar for Blogger

Recommended articles

How to add the jQuery sticky notification bar

Useful tip

Customizations