Add Stylish Notification Bar At The Bottom Of Your Blog Templates

Add Stylish Notification Bar At The Bottom of your Blog Templates

2
data:blog.title
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;http://3.bp.blogspot.com/-7oGSlq30cTw/Tv33CS4WGgI/AAAAAAAAA0w/HxId_tRUae8/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
Add Stylish Notification Bar At The Bottom Of Your Blog Templates
4 Stars stars - "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...

Post a Comment

Anonymous 4/21/2013

Hello mates, its impressive paragraph concerning cultureand completely defined, keep it up
all the time.

Check out my blog: moving company Austin texas

Anonymous 4/21/2013

Hi, i think that i saw you visited my website thus i came to
“return the favor”.I'm attempting to find things to enhance my web site!I suppose its ok to use some of your ideas!!

Visit my blog ... moving companies Austin TX

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *