How to Add Sticky Notification bar to Blogger

Sticky Notification Bar for Blogger

Sticky Notification bar is the best way to highlight the latest topics or updates of any blog.It sits on the top of blog and display latest and popular stories of blog and attracts blog visitors to check out the popular articles of a blog without any headache.It also helps in increasing page views of the blog.This guide is about adding a simple CSS powered Sticky Notification bar to Blogger blogs.

Features of our sticky notification bar
1. Stylish and attractive design.
2. Inbuilt close button for hiding the bar.
3. Light weight CSS and small JavaScript code.
4. Easily customizable according to your blog design.
5. Easy integration with blogger blogs.
6. It do not slow blog`s loading speed.

Add this notification bar to blogger:
• Log in to your Blogger dashboard.
• Select your blog.
• Select Template.
• Click Edit Html and then click Proceed.
• Tick Expand Widgets.
• In the Template Code search for </body>
• Paste following code just above the </body>

<style>

#wcsticky-container {

  height:46px;

  width:100%;

 position:fixed;

z-index:99999;

  top: 0px;

left:0px;

 background:#222222;

    -moz-border-radius:5px;

    -webkit-border-radius:5px;

color:#ffffff;

 border-bottom:solid 2px green;

-moz-box-shadow:5px 5px 5px #333333;

-web-kit-box-shadow: 5px 5px 5px #333333;

-goog-ms-box-shadow: 5px 5px 5px #333333;

box-shadow:3px 2px 4px green;

}

#wc-stickylinks

{

color:green;

font:14px verdana;

margin-top:12px;

margin-left:20px;

text-decoration:none;

}

#wc-stickylinks a

{

font:14px verdana;

color:#ffffff;

text-decoration:none;

}

#wcstickyclose

{

float:right;

margin-top:15px;

margin-right:20px;

}

#wcstickyclose a

{

color:#ffffff;

text-decoration:none;

font:14px verdana;

padding:3px;

background:red;

border-radius:10px;

}

#wcsticky-main

{float:left;

}

</style>

<script language='JavaScript'>

function closesticky() {

document.getElementById("wcsticky-container").style.visibility = "hidden";

}

</script>

<div id='wcsticky-container'>

<div id="wcsticky-main">

<p id='wc-stickylinks'> Popular Topics:<a href='http://ablogfortuts.blogspot.com/search/label/money%20making'>  Make money online</a> | <a href='http://ablogfortuts.blogspot.com/2014/04/how-to-add-sticky-notification-bar-to.html'>Get this notification bar</a></p>

</div>

<div id="wcstickyclose">

<a href="javascript:closesticky();" >X</a>

</div>

  </div>

After pasting the code save the template and open your blog to see the new notification bar in action.

SOURCE