Blogger Popular Post Responsive Sticky Footer Bar

Add a beautiful popular post responsive sticky footer bar at the footer of your blog. The bar will show randomly popular post from your blog at each page load. This will engage your visitors to read other articles of your blog. It will give a professional look to your blog and will also contribute to decrease bounce rate.

Setting up popular post responsive sticky footer bar at the footer of your blog is easy as ABC. In this post, I will show you how to create a responsive sticky floating footer bar in your website/blog in just three steps. I've tested with Blogger and Wordpress, probably it will work in all platforms. Here we go:

Copy past the code and paste it below your footer area.

<b:section class='footer-sidebar' id='footer-sidebar' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<div class='fixedBar'>
<div class='boxfloat'>
<div class='container'>
<ul id='tips'>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showSnippets == &quot;true&quot;'>
<!-- (2) Show only snippets -->
<div class='tips-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='tips-snippet'><data:post.snippet/></div>
<div style='clear: both;'/>>
</b:if>
</li>
</b:loop>
</ul>
</div>
</div>
</div>
</b:includable>>
</b:widget>
</b:section>

The next step is adding the CSS. Paste the following code:

/*strapboot Footer Bar*/
.fixedBar{background: #bc482c; bottom: 0px; color:#fff; font-family: Arial, Helvetica, sans-serif; left:0; padding: 0px 0; position:fixed; font-size:16px; width:100%; z-index:99999; float:left; vertical-align:middle; margin: 0px 0 0; opacity: 0.95; font-weight: bold;}
.boxfloat{text-align:center; width:100%; margin:0 auto}
#tips, #tips li{margin:0; padding:0; list-style:none}
#tips{width:100%; font-size:20px; line-height:120%;}
#tips li{padding: 15px 0; display:none}
#tips li a{color: #ED702B;}
#tips li a:hover{text-decoration: none;}
#tips .tips-title {font-size:16px;}
#tips .tips-snippet {font-size:14px; color: #fff;}

Lastly, let’s add our small jQuery code:

<script type="text/javascript">
this.randomtip = function(){
var length = $("#tips li").length;
var ran = Math.floor(Math.random()*length) + 1;
$("#tips li:nth-child(" + ran + ")").show();
};
$(document).ready(function(){ 
randomtip();
});
</script>

I hope that you find this useful. I’d love to hear your thoughts in the comments.