Add Stylish Notification Bar At The Bottom Of Your Blog Templates

Notification Bar is now widely used in most popular blog site as a result I have shared with you earlier a Premium sticky bar at the top of a blog with minimize and maximize options. However today I will share another Sticky bar which is also known as Notification Bar for the bottom if your blogger templates. It is helpful for announcing any notice or offer from your side towards the visitors. The main features of this Notification Bar is that It looks elegant, simple with transparent effects with a closing option. It won’t bother for the visitors because audience will be able to see your blog page through transparency. So lets go in tutorial that is very easy to apply in your blog.

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find this code </body> by Pressing Ctrl + F

<!-- http://www.bloggerspice.com Notification Bar start -->
<style type='text/css'>
#bssticky
{
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW71oqfVECOc70HFdnp_qvetuKXbNMYZMjgcaNeUpqiWLMOglwFtjd-ldTtkemueIuz5jnjZqssiw5wqeXjmVoqWtJPNHGhAxJ-pnyFrwUh7sA19zuxTYs9ehlL6QYfBRlHge6mWTMJ-oQ/s1600/ut-bg.png&#39;) repeat;
color:#fff;
text-align: center;
margin:0 auto;
border-top: 3px solid #FF3300;
height:28px;
font-size:13px;
position:fixed;
bottom:0;
z-index:999;
width:100%;
border-top-left-radius:15px;
border-top-right-radius:15px;
display:block;
font-weight: bold;
font-family: arial,&quot;Helvetica&quot;;
font-color:#fff;
}
#bssticky:hover
{background:#111;}
#bssticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}
#bssticky p a{ text-decoration:underline; color:#FF3300;}
.bscross{display:block; position:relative; right:15px; float:right;}
.bscross a{font-size:18px; font-weight:bold; font-family:&quot;Arial&quot;; color:#FF0000; line-height:30px;}
</style>
<div id='bssticky'>
<p><blink>Add Premium Sticky Bar</blink> <a href='http://www.bloggerspice.com/2013/02/add-premium-smooth-sticky-bar-for_3258.html' target='_blank'>Add Premium Sticky Bar</a> | <blink>Premium Free Blogger Template</blink> <a href='http://www.bloggerspice.com/2013/02/bs-yellow-mag-premium-blogger-templates_1306.html' target='_blank'>Premium Free Blogger Template</a></p><div class='bscross'><a href='javascript:hide_cross();'>X</a></div>
</div>
<script language='JavaScript'>
function hide_cross() {
crosstbox = document.getElementById(&quot;bssticky&quot;);
crosstbox.style.visibility = &#39;hidden&#39;;
}
</script>
<!-- End of Notification Bar by- http://www.bloggerspice.com -->