Add a beautiful responsive sticky floating bar at the footer of your blog. The bar will contain/show random text list. You can add as many list items as you want. Only one item will show up at each page load.
Ever since the day I put it on our blog, I got countless emails from users asking about how I created the responsive floating footer bar. I always reply back saying it is just some simple code. In this post, I will show you how to create a responsive sticky floating footer bar in your website/blog. I've tested with Blogger and Wordpress, probably it will work in all platforms. Here we go:
Open your template file and add the following codes right before the closing of the body statement.
The next step is adding the CSS. Paste the following code:
Lastly, let’s add our small jQuery code:
In my next post I will show you how to display your popular post in the footer bar. 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. I hope that you find this useful. I’d love to hear your thoughts in the comments.
Ever since the day I put it on our blog, I got countless emails from users asking about how I created the responsive floating footer bar. I always reply back saying it is just some simple code. In this post, I will show you how to create a responsive sticky floating footer bar in your website/blog. I've tested with Blogger and Wordpress, probably it will work in all platforms. Here we go:
Open your template file and add the following codes right before the closing of the body statement.
<div class="fixedBar"> <div class="boxfloat"> <div class='container'> <ul id="tips"> <li><a href="http://strapboot.blogspot.com/">strapboot is the most popular HTML, CSS, and JS crafter for developing responsive, mobile first projects on the web.</a></li> <li><a href="http://strapboot.blogspot.com/">strapboot: Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.</a></li> </ul> </div> </div> </div>
The next step is adding the CSS. Paste the following code:
/*strapboot Footer Bar*/
.fixedBar{background: #000; 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:920px; margin:0 auto}
#tips, #tips li{margin:0; padding:0; list-style:none}
#tips{width:920px; font-size:20px; line-height:120%;}
#tips li{padding: 15px 0; display:none}
#tips li a{color: #fff;}
#tips li a:hover{text-decoration: none;}
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>
In my next post I will show you how to display your popular post in the footer bar. 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. I hope that you find this useful. I’d love to hear your thoughts in the comments.
Post a Comment