Tricks: Blogger: 08 Random posts widget for Blogger with image thumbnails



Random posts widget for Blogger with image thumbnails


When your website has way too many posts, visitors don't always have the time or want to go through all the posts written there in order to make an idea of the blog's content. Therefore, arandom posts widget which will allow people to discover content more readily could be really useful. This tutorial will reveal to you just how to put in a random posts widget to display a summary of posts in a random order with excerpts and thumbnails.
Random posts widget

Adding Random Posts Widgets for Blogger with image thumbnails

Please follow below steps to add Random posts widget for Blogger with image thumbnails in your blogger blog:

Step 1

Login to your own blogger account, pick your blog and go to Layout as shown in below image.

Random posts widget for Blogger

Step 2

Add widget by clicking on the Add a gadget link and select Html/JavaScript from the popup window as shown in below image.
Random posts widget for Blogger with thumbnails

Step 3

After adding the HTML/JavaScript you have to copy the following script and paste it in the Content box.
<style>
#random-posts img {
border-radius: 10px;
float: left;
margin-right: 5px;
width: 75px;
height: 75px;
background-color: #F5F5F5;
padding: 3px;
transition: all 0.2s linear 0s;
}
#random-posts img:hover {
opacity: 0.6;
}
ul#random-posts {
list-style-type: none;
padding: 0px;
}
#random-posts a {
font-size: 12px;
text-transform: uppercase;
padding: 0px auto 5px;
}
#random-posts a:hover {
text-decoration: none;
}
.random-summary {
font-size: 11px;
background: none;
padding: 5px;
margin-right: 8px;
}
#random-posts li {
margin-bottom: 10px;
border-bottom: 1px solid #EEEEEE;
padding: 4px;
}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 5;
var randomposts_chars = 110;
var randomposts_details = 'yes';
var randomposts_comments = 'Comments';
var randomposts_commentsd = 'Comments Disabled';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Array(randomposts_number);
function randomposts(json) {
total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');
function getvalue() {
for (var i = 0; i < randomposts_number; i++) {
var found = false;
var rndValue = get_random();
for (var j = 0; j < randomposts_current.length; j++) {
if (randomposts_current[j] == rndValue) {
found = true;
break
}
};
if (found) {
i--
} else {
randomposts_current[i] = rndValue
}
}
};
function get_random() {
var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
return ranNum
};
</script>
<script type='text/javaScript'>
function random_posts(json) {
for (var i = 0; i < randomposts_number; i++) {
var entry = json.feed.entry[i];
var randompoststitle = entry.title.$t;
if ('content' in entry) {
var randompostsnippet = entry.content.$t
} else {
if ('summary' in entry) {
var randompostsnippet = entry.summary.$t
} else {
var randompostsnippet = "";
}
};
randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, "");
if (randompostsnippet.length < randomposts_chars) {
var randomposts_snippet = randompostsnippet
} else {
randompostsnippet = randompostsnippet.substring(0, randomposts_chars);
var whitespace = randompostsnippet.lastIndexOf(" ");
randomposts_snippet = randompostsnippet.substring(0, whitespace) + "&#133;";
};
for (var j = 0; j < entry.link.length; j++) {
if ('thr$total' in entry) {
var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
} else {
randomposts_commentsnum = randomposts_commentsd
}; if (entry.link[j].rel == 'alternate') {
var randompostsurl = entry.link[j].href;
var randomposts_date = entry.published.$t;
if ('media$thumbnail' in entry) {
var randompoststhumb = entry.media$thumbnail.url
} else {
randompoststhumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRt-Y2gmBTrrPhXb92MgV0SgDozWaG2mUMTP5ClzzcDaUjYwLdw-zKnzf4fb2ZqjozmVn6Ho2gXiYfVGY2cNiu6qfGThTKSzKlVVZ3ZniqI55Qy_-r2ah80HiuPQIpMHta2nw-2bRbQuo/s1600/no_thumb.png"
}
}
};
document.write('<li>');
document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>');
document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
if (randomposts_details == 'yes') {
document.write('<span><div class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'
};
document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>')
}
};
getvalue();
for (var i = 0; i < randomposts_number; i++) {
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
};
</script><small><a style='align:center;' href='http://www.haakblog.com/2015/03/random-posts-widget-for-blogger.html' target='_blank'>Random Post Widget</a></small></ul>

Customize Random Posts Widgets

  • Thumbnail Size: to change the size of the thumbnails in pixels, replace the 75px value.
  • Summary Size: you can control the the length of the summary (in characters) by changing the 110 value from var randomposts_chars=110; 
  • Post information: if you want to hide the post date and comment count change 'yes' from var randomposts_details='yes'; to 'no';
  • Font Size for Posts Titles and Summary: to modify the font size for the post snippet modify the 11px value and for the posts title, the 12px value;

Step 4

Click on the Save button and viw your blog to display a random posts widget on each of your blog pages.

Comments