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.
Recommended Articles:
- All in one Social network widget.
- Add premium style social subscription widget.
- Social sharing buttons widget under post titles.
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/AVvXsEj8Kig-7a1IXv7xOB19pwv0htTNhOKcCskeFoX8FnwghGX71iFQCBSHUJltLkGz3-l5T6zvGG-vqh80NO77y0c8AGzpCtn5oAhThvEg-e33M66p6MSMNkXpoQhVVQyrLI2K_AxcNiWFCq05/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/AVvXsEgpzWZ1Fx8EFE93HDXbxfYe-cAlpnCNuZsWHAD36qxecAkWUa2tcc4MkFFQO-Fp06jkvZKrlbEFkP6DcgorfgOh3NAlgLFMPF9DsH1ZAYHKvtpT1c5sQO4xBjo2nMsMCS2UT1vaU6VEt8Uw/s1600/top.png" title="Hide Notification bar" alt="hide-notice"/>
</span>
<div id='UT-nofifications'>
<!--Write Your Notifications below and give Hyperlinks-->
<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.
0 comments:
Post a Comment
Did You Enjoy this Article ?