How to add Random posts widget for Blogger with image thumbnails and excerpt

Some blog visitors find it difficult to locate there favourite post, due to alot of post in the blog, sometimes they do end up not getting what they want.

Here is a widget code that will help your blog reader get the best out of your blog.

With the help of the random post display widget your visitors can easily find the post of there choice.

How to add a random post widget that displays list of posts in a random order with thumbnails and snippet

The image below is how you home page will look like.



1. Login to your blog dashboard. Locate the layOut option and click on it.

2. Click on Add Widget, from the popup window click on HTML/Javascript. See image below.



3. Copy the below code and paste it inside the triangular box you see.

<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/AVvXsEjavhJe-UVtHrgH68g5nTfAASsX1umlgl15dHyJGJfsgAs8Fo9Nh4SeNm4qOy_oOIusFC1RRFU845rdyPERlvUeDFYRODBY49KU_6a4VcdXdQBVaXGlYRUR2TC5tdiPKrSq6TZe6-TEPtQ/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&#160; 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></ul>

To edit the code to your choice, change the value in thick black colour according to the instructions below.


Adjust the thumbnail dimension by changing the value "75"

Control the the length of the summary (in characters) by changing the110value from var random posts_chars=110;-

Hide the post date and comment count change 'yes' from var random posts_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;

How helpful is this post, if it helped you let me know, if you are finding any thing difficult ask question and I will answer you.

posted from Bloggeroid