How to add an advance random post widget in blogger blog

Random Post Widget is Helpful for your blog readers. It will help your Blog readers to find your blog posts more easily. If you are looking for a Random post widget then you found it. Because in this post, I am going to tell you How to add an advance random post widget in blogger blog. Also, read this: how to change mouse cursor in your blogger blog.

Add an advance random post widget in Blogger blog.

Go to the blogger.com and sign in your account.
Now select your blog where you want to show random post widget.
From your blog dashboard click on the layout option.
Now click on the add gadget link from the sidebar section.
A new window will appear from this window Select HTML/javascript Gadget.
In the next page, you will see a text box paste the following code in this text box. And Click on the save button.
Visit your blog and see the random posts are displaying in the sidebar.

<style>
#random-post img {
border-radius: 5px;
float: left;
margin-right: 5px;
width: 75px;
height: 75px;
background-color: #F5F5F5;
padding: 3px;
transition: all 0.2s linear 0s;
}
#random-post img:hover {
opacity: 0.6;
}
ul#random-post {
list-style-type: none;
padding: 0px;
}
#random-post a {
font-size: 12px;
text-transform: uppercase;
padding: 5px;
}
#random-post a:hover {
text-decoration: none;
}
.random-summary {
font-size: 11px;
background: none;
padding: 5px;
margin-right: 8px;
margin-top:5px;
}
#random-post li {
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
padding: 4px;
}
</style>
<ul id='random-post'>
<script type='text/javaScript'>
var randomposts_number = 5;
var randomposts_chars = 100;
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 = "";
}
};
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) + "";
};
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/AVvXsEgfdYjqMy2klTnfdKHl8hwt8pI-2KCwc2raWGSSiIfxoBRpT3CKjhy3yvwwCTHUoTyWePYZj7mpXaPZbqGQSOjJJBjFF0KepVQ8eIb39OkyvukrkVMsZTreWX5gQg2fXV0fAKHeQyhBeXI/s1600/no-image-available.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

With this widget, five posts will appear on your blog. But you can show more than five posts by replacing the 5 number that is marked with red color. If you want to show more than 100 characters with the post then you can do by replacing the 100 that is also marked with the red Color. To hide or show the detail of your blog post you can replace no yes or no. Also, read this: How to add related posts widget with Thumbnail to blogger blog.

That's it. That was the random post widget for Blogger blog. I hope it was useful for your blogger blog. Thanks for reading my this post. Keep visiting for more useful posts. If you will face any problem you can ask me by dropping your comments below.

Saturday, February 11, 2017