Random Posts Widget is a widget all bloggers must have on their blog because it allow your blog readers to stay on your blog for a longer time which will in turn increase your blog post page view. This widget displays posts on your blog in a random manner.
Today, I want to share a simple JavaScript code that fetches random post from your blog feeds including older and newer post.
| “Important Notice: Always Back Up Your Templates before Making Any Changes On it” |
How To Add Random Post Widget To Your Blogger Blog
#1. Login to Blogger > Go to Layout > Add a Gadget > Click on HTML/JAVASCRIPT
#2. Paste the code below into the pop up window and title it Random Posts.
| “Important Notice: Always Back Up Your Templates before Making Any Changes On it” |
How To Add Random Post Widget To Your Blogger Blog
#1. Login to Blogger > Go to Layout > Add a Gadget > Click on HTML/JAVASCRIPT
#2. Paste the code below into the pop up window and title it Random Posts.
<script type='text/javascript'>
var relatedpoststitle="";
</script>
<script type='text/javascript'>
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
for(var i = 0; i < relatedUrls.length; i++)
{
if(relatedUrls[i]==currentposturl)
{
relatedUrls.splice(i,1)
relatedTitles.splice(i,1)
}
}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>1)
document.write('<ul>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
</script>
<div id="categorylist">
<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&callback=related_results_labels&max-results=10"></script>
<script type="text/javascript">
var currentposturl="";
var maxresults=10;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
You can tweak the above code by changing the number of posts to display. The default number of posts is 10, so you can change it by changing the 10 in “max-results=10” in the above code to any number that suit you most and then save.
#3. Let us add some CSS code to give the random posts widget a better look. To add the CSS code, go to Blogger Dashboard -> Template tab -> Edit HTML tab (New Blogger Interface) or Go to Blogger Dashboard -> Design tab -> Edit HTML tab (Old Blogger Interface)
#4. Click on Expand Template Widgets check box and Search for ]]></b:skin> and replace it with the code below
/* Start Random Posts Widget CSS Code by http://www.justnaira.com */
#categorylist{float:left; margin-top:0px; margin-bottom:10px}
#categorylist ul{float:left; margin:0px; margin-left:20px; padding:0px; font-size:11px}
#categorylist li{list-style:disc outside url("http://4.bp.blogspot.com/-SIzxtuS5HrU/TgX2jub0HzI/AAAAAAAAEi8/CAXs53FBd1I/s1600/bullet-point-image-8.png"); width:auto; margin-bottom:0;margin-top:0;padding:0;vertical-align:middle;}
#categorylist a{font-family: "Droid Sans",arial,sans-serif;text-decoration:none; color:#1C262F; font-size:12px}
#categorylist a:visited {color:blue; text-decoration: none}
#categorylist a:hover{color:green}
/* End Random Posts Widget CSS Code by http://www.justnaira.com */
]]></b:skin>
Now save your template and view your blog to see your Random Posts Widget working.
Awesome. How would you display thumbnails with this?
@ James Shields, I will post how that could be done one of this day.
make to include image in post please
Finally, I've been looking for this, man
lemme try it at http://www.stalyfblog.com and see if it works. thanks for the info anyway
Very nice blogger random post widget.
tahnk you, its work fine
@Anders, the random post script will display posts from the same label, try and label your post.
@Chinedu Da Silva, What is the name of your site? you can also contact me directly through admin@justnaira.com
I am developing a site such as yours but quite different from yours. I am still starting on the blog with my address at http://www.nigerianuniversities.edu.tf.
I want to register a domain name with .com.ng and I need you to guide me through out the process and also help me build a site as wonderful as yours.
Help me with a link to my site, just to increase my ranking. That’s a plea.
Thanks and God bless as you help me through this because I know that I would be able to provide assistance to you one day. Trust me.
I am sorry, but the script will not display a random post. It always displays the latest posts. Am I doing something wrong?
nice post i am using it on my blog thanks
This comment has been removed by a blog administrator.
@daayur Thanks for reading and commenting.
great post,i like this article,very informative.