Random Posts in a Compact Format for Contempo...

A few months ago, Blogger rolled out new templates. The popular posts gadget is a new feature of the Contempo template which displays a handful of snippets for the most popular posts. For the popular posts, I didn't necessarily want full blown snippets, but, rather just a handful of links. So, I adapted a custom Related Posts gadget to create a Compact Popular Post gadget. Then, I came across code for random posts on the Blogger Help forum and adapted the code for my own purposes into the following gadget to display random posts in a compact format:

<script type="text/javascript">
var randomposts_number = 3;
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;
}};//for/if-j-found random post
if (found) {i--} else {randomposts_current[i] = rndValue}
}//for-i-count random posts
};//end-function

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 = "";
var randompoststhumb = "";
if (String(entry)!="undefined") {
randompoststitle = entry.title.$t.replace("...", "");
for (var j = 0; j < entry.link.length; j++) {
if (entry.link[j].rel == 'alternate') {
var randompostsurl = entry.link[j].href.replace("http:", "https:");
if ('media$thumbnail' in entry) {
randompoststhumb = entry.media$thumbnail.url.replace("http:", "https:").replace('s320','s72-c');
} else {
randompoststhumb = "";
}//if-else-thumbnail
}//if-alternate
};//for-j-entrylink
var d=document;
var divs;
var popularposts;
var popularpostsDivs;
var popularpostsHeader;
var destinationDiv;
divs=d.getElementsByTagName('div');
for (var p=0;p<divs.length;p++){
if (divs[p].className=='widget PopularPosts'){
if (divs[p].innerHTML.indexOf('related_posts_container')==-1) {
divs[p].innerHTML += "<div class='related_posts_container'></div>";
}
popularposts=divs[p];
}
}//for/if-p-divs
var pps = new String(popularposts);
if (pps!="undefined") {
popularpostsDivs = popularposts.getElementsByTagName('div');
popularpostsHeader = popularposts.getElementsByTagName('h3');
popularpostsHeader[0].innerHTML="Popular and Random Posts";
for (var r=0;r<popularpostsDivs.length;r++){
if (popularpostsDivs[r].className=='related_posts_container'){
destinationDiv=popularpostsDivs[r];
}}//for/if-r-popularpostsDivs
if (destinationDiv.innerHTML.indexOf(randompoststhumb)==-1){
if (destinationDiv.innerHTML.indexOf('related_item_spacer')==-1){
destinationDiv.innerHTML+='<div class="related_item_spacer"></div>';
}//if-spacer
destinationDiv.innerHTML+='<div class="related_item_box"><a href="'+randompostsurl+'"><img src="'+randompoststhumb+'" class="related_item_img" alt="" title="'+randompoststitle+'"/></a><br/><a href="'+randompostsurl+'" title="'+randompoststitle+'" class="related_item_txt">'+randompoststitle+'</a></div>';
}//if-thumbnail already exists
}}//if-entry undefined
}//for-i-count random posts
}//end function-randomposts(json)
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>

The random post gadget shown above, displays random posts in the same container as the popular posts with a class name widget PopularPosts. and also provides a container div to separate the popular and random posts with a class name related_item_spacer and if needed will also provide a container for the random posts related_posts_container. Also, please note that the random post gadget requires that the popular post gadget be enabled (display box checked) in the page layout menu. The highlighted line above specifies the number of random posts to display.

The compact random post gadget should be added to the page layout menu. This gadget should function as is, but, might require some additional CSS to style the output appropriately. The size of the thumbnail image is controlled by the height and width elements in the sample CSS code shown below, highlighted in yellow while the code highlighted in orange, specifies the size of the container which encloses the thumbnail and link text:

.related_posts_container {
width:100%;
height:150px;
}
.related_item_box {
float:left;
font-size:.8em;
width:100px;
height:150px;
display:block;
margin:10px;
}
.related_item_box img {
width:100px;
height:100px;
}

The above CSS style would need to be added to the advanced section of the customize theme menu. Also, please note that the compact random post gadget requires that the popular post gadget be enabled (display box checked) in the page layout menu. In addition, in the popular post gadget, you should also make sure to check the box for image thumbnail and uncheck the box for snippet. By the way, the image above is Misaka from A Certain Scientific Railgun. Enjoy.