Add Stylish Notification Bar At The Bottom Of Your Blog Templates

Add Stylish Notification Bar At The Bottom of your Blog Templates
notification bar

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.

Note: You will see blinking effects of Post Title only On Firefox Browser

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

Step 4 Copy the below code and Paste it Before/above </body> and Save the templates.


<!-- 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 -->


Customization:

  • Change Add Premium Sticky Bar with Post Title
  • Change http://www.bloggerspice.com/2013/02/add-premium-smooth-sticky-bar-for_3258.html with Post links
Go Up