how to add random posts widget for your blogger/site

how to add random posts widget for your blogger/site:

many visitors visit your website/blog . so they search for their see only recent posts .so i came up with post how to add random posts widget for your blogger/site.useful content .in the site many visitors 

live demo: see right side of screen

go to blogger->select blog

                        ->go to layout

                        ->select add a widget 

                        ->select html/javascript

                        ->copy and paste code below and enjoy it

	<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 = "http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/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://tech-mask.blogspot.com/2015/10/how-to-add-recent-posts-widget-for-your.html' target='_blank'>Random Post Widget</a></small></ul>

view raw how to add random posts widget for your blogger site hosted with ❤ by GitHub