How to Create A Simple CSS Sticky Notification Bar

Hello Friends In this tutorial i will tell you about how you can create a simple style sticky notification bar. A stick navigation bar is used to highlight or show the trending content of your website. 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.Welcome bar is widely used by bloggers to provide their special offers or updates on the top of the website.This sticky bar is used to show updates or important news or information, hence you can place it either in top of blog or bottom of blog.. It is work likes an ad of your blog. A welcome bar helps your visitors to go some other or special link or as its name suggest it is widely used for welcoming your visitors on your blog.

Must Read :- Make A Sticky Welcome Bar For Blogger

Features of CSS Sticky Notification Bar-

•  Awesome CSS styled bar.
• Stylish In Look. and Attractive Design
• Small in size, small javascript codes.
• Easy to customize according to your blog theme.
• Doesn't slow down load time of blog.
• User Friendly and easy integration to blogs.
• Easy to put it on your blog.

How to Add A CSS Sticky Notification Bar To Your Blog ?

1. Go to Blogger Dashboard.
2. Now select Template.
3. Click on Edit HTML and proceed.
4. Now Search for </body> .
5. Now paste the following code above </body>.

/**Begin-HT4U-Notification Bar code**/
<style>
#HT4Uwcsticky-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;
}
#HT4Uwc-stickylinks
{
color:green;
font:14px verdana;
margin-top:12px;
margin-left:20px;
text-decoration:none;
}
#HT4Uwc-stickylinks a
{
font:14px verdana;
color:#ffffff;
text-decoration:none;
}
#HT4Uwcstickyclose
{
float:right;
margin-top:15px;
margin-right:20px;
}
#HT4Uwcstickyclose a
{
color:#ffffff;
text-decoration:none;
font:14px verdana;
padding:3px;
background:red;
border-radius:10px;
}
#HT4Uwcsticky-main
{float:left;
}
</style>
<script language='JavaScript'>
function closesticky() {
document.getElementById("HT4Uwcsticky-container").style.visibility = "hidden";
}
</script>
<div id='HT4Uwcsticky-container'>
<div id="HT4Uwcsticky-main">
<p id='HT4Uwc-stickylinks'> Popular Topics:<a href='Paste Your Link Here'>  Title Of Content</a> | <a href='Paste Your Link Here'>Title Of Content</a></p>
</div>
<div id="HT4Uwcstickyclose">
<a href="javascript:closesticky();" >X</a>
</div>
  </div>

    6. Now edit the Bold Texts And Save the Blogger Template. And now a sticky css styled welcome,               navigation bar will be appear on your blog or website.
   

Final Words-

If you have any problem by applying this code then please tell us by commenting below or fill our contact form. If you like or find this article helpful then please -

Comment, share on facebook , circle us on google plus, subscribe to our mailing list.

Share This

Related Post