Sticky sliding notifications bar for blogger

Hello Readers, in this post I am going to tell you, how you can add a sticky notification bar to your blogger blog with JQuery sliding effect. Unziptech has already shared few blogger widgets in previous posts and this post focuses on the same category. You must have seen many blogs use this kind of sticky notifications bar to display the latest news, announcements or events on their blogs, so that their readers do not skip any important information. It is very important to provide your online reader with the latest info about the blog so that you can increase your readership. This Sliding sticky notification bar will surely help you to reach out to our readers. Later in this post we will see how to add and customize this sliding notification bar.

This sticky notification bar is coded using HTML/CSS and JQuery which is a stable and lighter version of JavaScript. You can see cool sliding effects created using JQuery to show and hide this sticky notification bar (see the demo above). This sliding bar has no flash content or heavy images, so it will not increase your blog page load time. You can also customize the look and feel of this notification bar, which i will tell you in the customization part. First we will take a look at the procedure to add this widget in your blog.

How to add JQuery Sticky Notification Bar

Login in to your Blogger account.
Click on template and take backup of your blogger blog. It is recommended before you make any change to the template.
Now after taking backup find the <head> tag and add the following code just under the <head> tag:

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

If you have already added any JQuery file in to your blog, you can skip the above mentioned step.
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 this 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> or like this <body (because in some templates body have some other attributes).
Just beneath this tag place the following code:

<div id="UT-notifications-Wrap">
    <div id="UT-down">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHUKrlg9Ci5_zoIuFub1kLil1jGagmkUhNra2JDukzKiVVTVdCdP4dNPQFCQuVwdtkzQtIavk9amrl5LU2sK0P83cuJBJiU81c1GU8CsRheLi2mKsOa2EVfTLy64s3FwdLBCNciwI6c4Vx/s1600/down.png" title="Show Notification bar" alt="show-notice" id="UT-down-img"/>
    </div>
    <div id="UT-notify">
        <span id="UT-up">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvR5y3DP4NNhSZx5YOU7wobAHdpKZayKT2jfcYXsoNhM9y8So3yvKhyphenhyphen9rISBAkLcms9oib_e1gNJ9-Yd72rbHL7GiXo5KlPx5hQMTBgs9uDt2Xbnb7D5KaY_m-8vrp4C1NWN2hM4u79Ou9/s1600/top.png" title="Hide Notification bar" alt="hide-notice"/>
        </span>
        <div id='UT-nofifications'>
            
            <a href="http://www.unziptech.com/2013/03/how-to-get-approved-easily-for-fileice.html" target="_blank">
            Fileice Approval
            </a> | 
            <a href="http://www.unziptech.com/2013/03/10-killer-seo-tips-for-bloggers.html" target="_blank">
            SEO for Bloggers
            </a> | 
            <a href="http://www.unziptech.com/2013/04/earn-money-with-qadabra-adsense-alternative.html" target="_blank">
            Qadabra Review
            </a> | 
            <a href="http://www.unziptech.com/search/label/blogger%20widgets" target="_blank">
            Blogger Widgets
            </a> | 
            <a href="http://www.unziptech.com/2013/05/sticky-sliding-notifications-bar-blogger.html">
            Get this Notification bar
            </a>
        </div>
    </div>
</div>

Now change the notifications titles as per your needs and replace the hyperlinks with your links.
Save the template and click View Blog to see this notification bar in action.

Useful Tip:

If you want to regularly change the contents of this notification bar, then I recommend you to add the code mentioned below the 8th point in HTML/JavaScript Gadget from the layout window rather than to add it under body tag. It will help you easily update this notifications bar regularly without editing the template every time.

Copyrights:

This widget is a sole property of Unziptech. You are not allowed to share this anywhere without giving proper attribution and back link to Unziptech. I have not added any watermark or link in the notification bar, the image above is edited, so that no one copies it. Before distributing or sharing it on your blog contact me admin@unziptech.com.

Customizations:

To change the main background color change the code highlighted in green.
To change the hyperlinks color change the code highlighted in yellow.

You have successfully added the JQuery sticky notifications bar with sliding effects to your blog. If you have any problem adding this widget to your blog, comment here. I will be Glad to help you. I love to hear from my readers, so please mention any improvement you want in this notification bar or any other blogger widget posted on this blog. I will try to make improvements for you guys.

You can checkout our blogger tips and tricks section for more Blogging and SEO optimizations tips. It will improve your blogging experience.

If you like my work; you can show your regards by hitting Facebook like button, following us on Google+ or Twitter, stumbling our posts on stumbleupon or giving us a link back via the links below. Stay tuned for more updates.

Do you like this post? Please link back to this article by copying one of the codes below.

URL:

http://unziptech.blogspot.com/2013/05/sticky-sliding-notifications-bar-blogger.html

HTML link code:

<a href="http://unziptech.blogspot.com/2013/05/sticky-sliding-notifications-bar-blogger.html">Sticky sliding notifications bar for blogger</a>

BB link code:

[url=http://unziptech.blogspot.com/2013/05/sticky-sliding-notifications-bar-blogger.html]Sticky sliding notifications bar for blogger[/url]

Author: Mohammad Zafar Ahmad

Zafar Ahmad is PHP/Java Developer and a Passionate Blogger. He likes to write about Blogging tips, SEO tips, Blogger Widgets, Smart phones, Tablets and Online Earnings. You can find him on Facebook, Twitter or Google+

Wednesday, 22 May 2013