Full CSS Notification Bar For Blogger

Hello bloggers, today i present to you a modern widget for Blogger Blogs : CSS Notification Bar with option for visitors to close or show. With this bar you can highlight a few posts or show to your visitors what`s hot on your blog. You can add text and links and it`s simple to install and customize. This bar is created purely from CSS and it`s very fast.

How To Add The CSS Notification Bar To Blogger

You can see this Notification Bar installed on my blog. So if you want to add this awesome notification bar to your blog, follow the next steps :

Step#1 : Add The Widget

Go to Blogger
Layout > Add widget > HTML/JavaScript
Add the below given code :

<style type="text/css">
/* Notification Bar For Blogger */
#abt-hotsmain{height:100px;left:0;position:fixed;top:0;width:100%}
#abt-hots{background-color:#242729;border-bottom:1px solid #349ecb;height:30px;left:0;position:fixed;top:0;width:100%;box-shadow:2px 2px 2px 2px;z-index:10000;color:#349ecb;}
#abt-hotsdata{color:#349ecb;font-family:serif;font-size:15px;padding:5px}
#abt-hotshide{cursor:pointer;height:20px;position:absolute;right:12px;top:4px;width:20px}
#abt-hotsshow{background-color:#242729;border-bottom:3px solid #349ecb;border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-left:3px solid #349ecb;border-right:3px solid #349ecb;cursor:pointer;height:25px;padding-top:5px;position:absolute;right:5px;top:0;width:30px}
.abt-hotsdownarrow{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #349ecb;height:0;width:0}
.abt-hotsblock{background-color:#349ecb;height:10px;width:8px}
.abt-hotsuparrow{border-bottom:10px solid #349ecb;border-left:10px solid transparent;border-right:10px solid transparent;height:0;width:0}
</style>
<div id="abt-hotsmain" >
<center id="abt-hotsshow" onmouseup="document.getElementById('abt-hots').style.display='block'"><div class="abt-hotsblock"></div><div class="abt-hotsdownarrow"></div></center>
<div id="abt-hots" >
<center id="abt-hotshide" onmouseup="document.getElementById('abt-hots').style.display='none'"><div class="abt-hotsuparrow"></div><div class="abt-hotsblock"></div></center>
<center id="abt-hotsdata" >
<a href="add your link"> add Text </a>
</center>
</div>
</div>