How To Create Random Post with Thumbnail

It is not too difficult . There are so many bloggers that put a variety of widgets on the blog . However, these widgets less effect or benefit that was in progress blog .

Quality blogs are also seen on the display widgets installed . One of the widgets that are widely used by many bloggers is a random post widget , be it an ordinary Random Post or any random post that comes with a thumbnail or image .

How To Create Random Post with Thumbnail

Random Post

Random post or often called the article " Random " is a widget that displays posts / articles of our blog articles at random either newly created or that have a very long article , so that your older articles can be re- read by visitors to the blog .

Of course this is very advantageous , because the random post pageviews on each article of this blog can be increased from the previous siblings . And the effect that can be fairly large in improving the quality of your blog .

How to Install Random Post Along with Thumbnails

Similarly, the line can be fitted Post pictures , random post I will share this time also I have modified the image so that it will enhance your appearance . Not only that , in my random post this time also there is a summary postinganya which can make the visitors interested to read it .

For you who are interested in this random post widget installed , please follow the simple steps below :

1 . Login with your blog account
2 . Go to the menu LAYOUT
3 . Click add a gadget - > select HTML / Javascript
4 . Put the script below :

.rp-post-link {
font-weight: bold !important;
font-size: 12px !important;
.rp-summary {
margin-bottom: 5px !important;
border-bottom: 1px dotted #686868;
font-size: 12px !important;
line-height: 20px !important;
word-wrap: break-word !important;
.rp-thumbnail {
margin: 5px 5px 2px 0px !important;
float: left !important;
.rp-pubdate {
font-style: italic !important;
margin-bottom: 3px !important;
<script type="text/javascript">
var randarray = new Array();
var l=0;
var flag;
var lengthsummary = 120; //The number of posts displayed characters
var numofpost=5; //The number of posts shown
function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0; i < numofpost;){
for(j in randarray){
for(n in randarray){
var p=randarray[n];
var entry=json.feed.entry[p-1];
var item ="";
var posttitle = entry.title.$t || "[Untitled]";
for( -1; k >= 0 ; k--){
item +="<a class='rp-post-link' href='" +[k].href + "'>" + posttitle + "</a>";
item += "<br"
item += "/>"

if('media$thumbnail' in entry)item += "<img class='rp-thumbnail' src='" +$thumbnail.url + "'>"
var summary = "";
if ("content" in entry) {
summary = entry.content.$t;
else if ("summary" in entry) {
summary = entry.summary.$t;
var re = /<\S[^>]*>/g;
summary = summary.replace(re, ""); item += "<p class='rp-summary'>" + summary.substring(0,lengthsummary) + " ...</p>";
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts"

Description above code:
  • Color Code Green: Set the width and height of the image / thumbnail on random post later.
  • Color Code Red: Number of Post you want to display.
  • Code Blue: The number of characters / letters in the summary that you want displayed.
5. Click save.

How? Easy is not making random posts along with a thumbnail.

Please Enable JavaScript!
Mohon Aktifkan Javascript![ Enable JavaScript ]