Performa Widget Random Post Thumbnail Plus Summary

by dharlaferdana

HTML

<div id='random-post-container'></div>

CSS

body {
  margin-left:20px;
  padding:50px;
  background-color:#bbb;
  font:normal normal 11px/1.4 Arial,Sans-Serif;
  color:black;
}
#random-post-container {
    margin-bottom:5px;
    background-color:#333;
    border:4px solid #ddd;
    width:400px; // Style by: www.dhf.web.id/
}

#random-post-container a {
    text-decoration:none;
    color:#fff;
}

#random-post-container a:hover {
    text-decoration:underline;
}

#random-post-container ul {
    padding:0 7px;
}

#random-post-container li {
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  padding:5px 7px;
  color:#aaa;
  list-style:none;
  overflow:hidden;  
}
#random-post-container img {
  display:block;
  float:left;
  margin:2px 7px 5px 0;
  padding: 4px 4px;
  background-color: #222;
  border: 1px solid #111;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 0 #444;
  -moz-box-shadow: 0 1px 0 #444;
  box-shadow: 0 1px 0 #444;  
}
#random-post-container a {
  font-weight:bold;
  font-size:110%;
}
#random-post-container .clear {
  display:block;
  clear:both;
}

JavaScript

/* Performa Widget Random Post
 * By Dharla Ferdana
 * http://www.dhf.web.id
 * https://plus.google.com/113542517587930625517/posts
 */

// Feed configuration
var homePage = 'http://www.dhf.web.id',
	maxResults = 7,
	summaryLength = 150,
	noImageUrl = 'http://2.bp.blogspot.com/-KVohdXsE11U/UZw-FEiC2iI/AAAAAAAACZI/9qi93dj09K4/s1600/dHF-logo1.png',
	containerId = 'random-post-container';

// Function to generate random number limited from `min` to `max`
// Used to create a valid and safe random feed `start-index`
function getRandomInt(min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Function to shuffle arrays
// Used to randomize order of the generated JSON feed
function shuffleArray(arr) {
	var i = arr.length, j, temp;
	if (i === 0) return false;
	while (--i) {
		j = Math.floor(Math.random() * (i + 1));
		temp = arr[i];
		arr[i] = arr[j]; 
		arr[j] = temp;
	}
	return arr;
}

// Get a random start index
function createRandomPostsStartIndex(json) {
	var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
	if (window.console && window.console.log) console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults)); 
	document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}

// Widget's main function
function randomPosts(json) {
	var link, summary, img,
		ct = document.getElementById(containerId),
		entry = shuffleArray(json.feed.entry),
		skeleton = "<ul>";
	for (var i = 0, len = entry.length; i < len; i++) {
		summary = ("summary" in entry[i]) ? (entry[i].summary.$t.replace(/<.*?>/g, "")).substring(0, summaryLength) + '&hellip;' : "";
		img = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s72-c") : noImageUrl;
		for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
			link =...