Add Sticky Notification bar to blogger

Add Sticky Notification bar to 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 displays the popular stories of blog. It also helps in increasing page views of the blog. This guide is about adding an amazing CSS powered Sticky Notification bar to Blogger blogs.

sticky notification bar for blogger

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’s design.
  5. Easy integration with blogger blogs.
  6. Does not affect blog`s loading speed.

Add sticky notification bar to blogger

Step 1: Log in to your Blogger dashboard.
Step 2: Select your blog.
Step 3: Select Template.
Step 4: Click Edit Html.
Step 5: In the Template Code search for </body>
Step 6: Paste following code just above the </body>
Note : In the following code, modify the red colored code according to your requirements.

Code

<style>
#wcsticky-container {
  height:46px;
  width:100%;
 position:fixed;
z-index:9999999;
  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:orange;
font:14px verdana;
margin-top:12px;
margin-left:20px;
text-decoration:none;
}
#wc-stickylinks a
{
font:14px georgia, 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='paste Notification 1 link here'>  Notification 1</a> | <a href='paste Notification 2 link here'>Notification 2</a></p>
</div>
<div id="wcstickyclose">
<a href="javascript:closesticky();" >X</a>
</div>
  </div>

Comments

Popular posts from this blog

Truecaller hookup With Google Duo: Rolls Out New SMS and Flash Messaging Services to Users

Mobile Balance Transfer for different networks – Vodafone, Airtel, Aircel, Idea, BSNL and Tata DOCOMO