How To Show Recent Posts At Random In Your Blog
 |
| popular-post-to-blog.jpeg |
Blogger 'Popular Post' allows you to show a maximum of last 10 posts only but the number of posts to be shown may be increased with the help of the following widget easily. Not only that, this widget also helps you to display your posts at random. This means 'Popular Post' or 'Recent Post' displayed will never be fixed but shuffle itself automatically.
Now, follow the following steps to do this :-
#1) Log in to Blogger dashboard
#2) Now click 'layout' against the blog in which you want to post this widget
#3) Now click 'Edit' either at the 'Left Side Bar' or 'Right Side Bar' where you want to post this widget
#4) Now click 'HTML/Java Script' in the small box that opens
#5) Now copy the following code and paste it into the 'content' box
________________________________CODE____________________________________________
<style type='text/css'>
#random-posts img{display:block;margin:0;margin-right:10px;padding:0;width:72px;height:72px;border:1px solid #f5f5f5;overflow:hidden;float:left}
#random-posts img:hover{opacity:0.6;}
ul#random-posts{background:#fff;list-style:none;margin:0;padding:5px 0 0;overflow:hidden;border-top:none;}
#random-posts a{color:#64707a;transition:all .3s;display:block}
#random-posts li:hover a,#random-posts a:hover{color:#4285f4;}
.random-summary{font-size:13px;color:999}
#random-posts li{background-color:#fff;margin:0;padding:10px;min-height:65px;position:relative;border-bottom:1px solid #f5f5f5;transition:all .3s;}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 10;
var randomposts_chars = 0;
var randomposts_details = 'no';
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 = "";
}
};
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/AVvXsEj9tfelyeN1ykCv60C_HzYN7hYo7kV4moCbcqm3xbZ4j6uK3e4DewyTUrJNY1jUG1dnUMZtl5gYGHedOUqfG47WkW-Ti-mnU1au4Mo-u1JA8uqkJ_0tIDlQaHlFa7MatHW5NFzRn9x33MI/s1600/bungfrangki_no_image_100.png"
}
}
};
document.write('<li>');
document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '" width="' + 72 + '" height="' + 72 + '"/></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>
</ul>
<div class='clear'/>
</div>
_____________________________END OF CODE______________________________________
#6) Now in the 'Title Box' above you may write 'Recent Posts'
#7) Click 'Save'
CUSTOMISE
To change the number of posts to be shown, just change the number '10' here 'var randomposts_number = 10;
Just remember, the more you increase the number the slower your blog will be to load. Better to keep the number between '10 to 12' and your blog will be faster
You can also show 'Popular Post' widget of blogger on your left side bar and 'Recent Post' with the above CSS widget on your right side bar.
Read more
The easiest way to stop earning with your blog and start earning massive
9 Superior Adsense alternatives you will love to try for your blog
How to start a business with only 5 profitable niche blog topics that may make you millionaire
No comments