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.
Features of our sticky notification bar
- Stylish and attractive design.
- Inbuilt close button for hiding the bar.
- Light weight CSS and small JavaScript code.
- Easily customizable according to your blog’s design.
- Easy integration with blogger blogs.
- 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>
- And You Have DONE !
Share If You Like MY work
Post a Comment