Add Beautiful Notification Bar At The Bottom Widget For Blogger

Rohan Mod
22 May, 2013
3

How to add beautiful notification bar at the bottom of your blog, A new widget for blogger, You can insert social bookmarking icons or anything in this widget.

Add Beautiful Notification Bar At The Bottom Widget For Blogger
Add Beautiful Notification Bar At The Bottom Widget For Blogger


VIEW DEMO



A notification bar at the bottom of your blog is a great way to divert user attention on some of the links, For example you can manually insert your new post link so that it gets maximum user attention and page views or you can add popular post link or anything for which you want some user attention. You can also put social media sharing icons at the bottom in this notification bar so your posts get more Facebook likes and a plus one, well for social media sharing we have many other widgets like:-




More Tricky things to do with notification bar



There are many things to do with the notification bar at the bottom of blog like, If you want to earn money then you can insert your affiliate links in the notification bar along with you can promote your other blogs through anchor text of your blog's keyword or add social bookmarking icon at the bottom so you get more page views and traffic. So it is your choice what to do with this notification bar. Ok so lets get started, Below are the code and method to add a notification bar at the bottom of a blog with this new widget for blogger.

How to add blog bottom notification bat widget to blogger



Go to blogger dashboard.

Go to template.

Now hit CTRL+F.

And search for this piece of code </body>

Now copy the below code and paste it before the </body> and you are done.

<!-- Start of notification bat by http://www.avdhootblogger.com -->
<style type='text/css'>
#avdhootbar
{
background-color:#1b1a1c;
color:#fff;
text-align: center;
margin:0 auto;
border-top: 3px solid #0ebfe9;
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;
}
#avdhootbar:hover
{background:#111;}
#avdhootbar p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}
#avdhootbar p a{ text-decoration:underline; color:#0ebfe9;}
.avdhootss{display:block; position:relative; right:15px; float:right;}
.avdhootss a{font-size:18px; font-weight:bold; font-family:&quot;Arial&quot;; color:#0ebfe9; line-height:30px;}
</style>
<div id='avdhootbar'>
<p><blink>Get awesome and new</blink> <a href='http://www.avdhootblogger.com/search/label/blogging%20tips' target='_blank'>Blogging Tips</a> | <blink>With all new and

creative </blink> <a href='http://www.avdhootblogger.com/search/label/blogger%20widget' target='_blank'>Blogger widgets</a></p><div class='avdhootss'><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 bat by http://www.avdhootblogger.com -->

Customization

Here are some customization That you have to make. I the yellow highlighted text type your text and in light blue colored text insert your links and you are done.

I hope you like this beautiful notification bar at the bottom widget for blogger. Please feel free to comment if you get any trouble in installing this blogger widget.
Next Post Previous Post