Home Blogging Tips How to Add Advanced Random Posts Widget in Blogger

How to Add Advanced Random Posts Widget in Blogger

0
0
48

Blogger provide different widgets for blogger users. The Random Posts widget or gadget is also one of them. This widget will display the random posts published on your blog. Many important articles will hide and get easily lost deep in your archives, so random posts gadget will show all these posts randomly.

random-posts-widget-for-blogger

Most of the time, when many new and unique visitors comes to your site, they rarely bother to going back to find something according to their interest.

There are many other ways to show these posts to your new visitors but the most amazing and best ways to give a new life to your most older posts is the random posts widget.

It is the most easiest way to display your blog random posts in your sidebar. Here in this tutorial, I will show you how to adding advanced random posts widget into your blogger sites.

You can also able to fully customized this widget according to your blog design. It displayed the thumbnails of your posts, with pretty fast loading speed and show total no of comments on posts too.

Add Advanced Random Posts Widget to Blogger Blog

Step1 – First of all go to Blogger website and login to your account.

blogger-homepage

Step2 – Now select your blog and go to the “Layout” option from the left sidebar.

blogger-layout-options

Step3 – Now in the sidebar, click on the link “Add a Gadget” a box open in which different widgets/gadgets available.

Step4 – From the list find the “HTML/JavaScript” gadget and click on it. A blank box open.

html-javascript-blogger-gadget

Step5 – Copy below piece of CODE, and paste it in the box and click on the SAVE button.

<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 = “bloggerhope.com/wp-content/uploads/2017/10/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>
</ul>

Customization of Random Posts Widget

You can easily customize your random posts widget according to your interest and taste.

Post info: If you want to hide or show the post date and comment count then simply change the “YES” from the var randomposts_details=’yes’; to ‘no’.

Thumbnail Size: You can also change the size of the posts thumbnail by simple replace the 75px value.

Description: You can change the length of the post description by changing the ‘no’ value from the var randomposts_chars=’no’.

Font Size: You’re able to change the font size, title size, color, fonts, summary by simply changing the CSS properties.

So simply click on the “SAVE” button and view the amazing and beautiful advanced random posts widget into your blogger blog. If you face any problem then comment below this post and I’ll help you as soon as possible.