Sticky sliding notifications bar for blogger ~ Tricky Tricks 4U

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/AVvXsEi6VRvfv_O9MYlseIXlwj3sxE1vgQuwlqP3jOvw5D8PKy34wnsIPn0kl6aG2ePdFn8SfvfuR5OWZm6YINmVfoEJF-IJAxS1Vh5N43hy4HK-CQB98WhKSrwCYOiJ-Nx6HhRUZioDFBILmkb7/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/AVvXsEhM9h_NyQIHSmOVGx1r59hhY_TXU4l_f2OC2YE2uKWHL107fiBI0H0OlOpfOkrAstohfdbrJjIOtxXmWf1ghbY_3OEnqBK_jjXXd4RMJ6djmzPxyesbSN2800H-XZT5THdtcIItAd7GoF9f/s1600/top.png" title="Hide Notification bar" alt="hide-notice"/>
        </span>
        <div id='UT-nofifications'>
            
            <a href="http://www.trickytricks4u.com/2013/09/add-facebook-popup-like-box-with-jquery.html" target="_blank">
            Facebook Popup
            </a> | 
            <a href="http://www.trickytricks4u.com/2013/09/get-free-recharge-from-chateze.html" target="_blank">
            Chateze Free Recharge
            </a> | 
            <a href="http://www.trickytricks4u.com/2013/09/sevida-responsive-magazine-blogger.html" target="_blank">
            Sevida Template
            </a> | 
            <a href="http://www.trickytricks4u.com/2013/09/kaspersky-internet-security-2014-crack.html" target="_blank">
            Kaspersky 2014 crack
            </a> | 
            <a href="http://www.trickytricks4u.com/p/contact-us.html">
            Contact Us
            </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@trickytricks4u.com

Tricky Tricks 4U