How to Add a Random Post Button in Blogger

Advertisements
A worthy way to keep your visitors busy, and to allow them to spend more time on your website is to use “Random Post” button. Recently, one of our visitors asked us How to Add a Random Post button in Blogger. This button can be placed anywhere in your website, providing your visitors the flexibility that when clicked it will take the visitors to a complete random post. In other words, It will display random posts, every time the button is clicked. This is actually easy to achieve, so in this article we will show you How to Add a Random Post button in Blogger.

Before you start check out the live demo of this "Random Post" widget. You can play with it, and it will take you to the random post on each hit.


The first thing you need to do is to get yourself login into your Blogger account and go to Template >> Edit HTML section. Now within the template coding, search for the ending </body> tag and just above it paste the following piece of JavaScript coding.

<script type="text/javascript">
/*<![CDATA[*/
function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Random Post'; document.getElementById('mbl-random').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
/*]]>*/
</script>

Now to create a random post link and put it in a desired location of your website paste the following code anywhere you like. For example, in your navigation and it would automatically turn into a random post button. Once everything is done, save your template by pressing “Save Template” button.

<div id="mbl-random"></div>

Congratulations: You Successfully added a Random post button in your blogger blog. Now go and check your site to see if everything is working just according to the plans. If you have followed the instructions properly, we are sure you will not face any errors.

How to Style the Random Post button?

I am sure, people would like to make their random post button stand out (fancy from others). You can use the following piece of CSS code to customize or stylize your button. You can make it look entirely different and can also use the same CSS coding as we have provided below (Remember: you have to paste the following code just above the ]]></b:skin> tag present in your template coding).

#mbl-random a {
background-color:#3bb3e0;
padding:10px;
position:relative;
font-family: 'Open Sans', sans-serif;
font-size:12px;
text-decoration:none;
color:#fff;
border: solid 1px #186f8f;
background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(44,160,202)),
color-stop(1, rgb(62,184,229))
);
-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#mbl-random a::before {
background-color:#ccd0d5;
content:"";
display:block;
position:absolute;
width:100%;
height:100%;
padding:8px;
left:-8px;
top:-8px;
z-index:-1;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
-moz-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
-o-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
}
#mbl-random a:active {
padding-bottom:9px;
padding-left:10px;
padding-right:10px;
padding-top:11px;
top:1px;
background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(62,184,229)),
color-stop(1, rgb(44,160,202))
);
}

We hope this tutorial may have helped you in learning how to add random post button in blogger. How many of you are already using this button? What are its benefits and how much conversion it is bringing to your site. We would love to hear your reviews and inputs on this topic, feel free to leave you precious comments below.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

8 comments

November 4, 2013 at 12:57 AM

in demo, it go to page 2 ( always ), not random ?

Editorial Team MOD
November 4, 2013 at 1:00 AM

Its just a demo how the Button would look like!

Anonymous
November 6, 2013 at 4:12 AM

Thank you, I already implemented it on my blog.

Click here..

December 11, 2013 at 9:33 AM

Any way to change the colour?

Editorial Team MOD
December 11, 2013 at 12:12 PM

Yes, You can do it with CSS Search for this

#mbl-randoms a {

}

And than Change Background: and Background-image: to the color you like

December 25, 2013 at 3:13 AM

Does it work on firefox?

Editorial Team MOD
December 25, 2013 at 10:30 AM

Yep

March 7, 2018 at 1:38 AM

Can we use it differently with each category? For instance click and see blog posts from the 'business' category, click and see blog posts from 'technology' category only.

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.