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 :

<style>
.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;
width:60px;height:60px;
}
.rp-pubdate {
font-style: italic !important;
margin-bottom: 3px !important;
}
</style>
<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;){
flag=0;
randarray.length=numofpost;
l=Math.floor(Math.random()*total);
for(j in randarray){
if(l==randarray[j]){
flag=1;
}
}
if(flag==0&&l!=0){
randarray[i++]=l;
}
}
document.write('<div>');
for(n in randarray){
var p=randarray[n];
var entry=json.feed.entry[p-1];
var item ="";
var posttitle = entry.title.$t || "[Untitled]";
"[Untitled]"
for(k=entry.link.length -1; k >= 0 ; k--){
if(entry.link[k].rel=='alternate'){
item +="<a class='rp-post-link' href='" + entry.link[k].href + "'>" + posttitle + "</a>";
break;
}
}
item += "<br"
item += "/>"

if('media$thumbnail' in entry)item += "<img class='rp-thumbnail' src='" + entry.media$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>";
document.write(item);
}
document.write('</div>');
}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts"
type="text/javascript">
</script>


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.