Thursday, June 08, 2017

Advanced Random posts widget for Blogger with Image thumbnail


How to add Advanced Random posts widget for Blogger with Image thumbnail, To increase your Blog page View.

This is a very cool widget which can be added at the blogger sidebar and also Blogger footer to increase your Blog page view. The widget will show the Thumbnail and also the title of the Post as well, which is why it is  Advanced Random Post Widget. The Widget is coded with CSS and can also be Customized as well to suit your Standard.

The Advantage of this Widget is that it will display your very old post. And your visitors will stay longer on your Blog reading Random Post.

Guide On Advanced Random posts widget for Blogger with Image thumbnail.

1. Go to blogger dashboard.
2. Click on layout.
3. Choose Add a Gadget.

Check Also: How To Add Floating Social Sharing Widget To Your Blog

4. Choose HTML/JAVASCRIPT.
5. Copy the below code and paste it. and Do not forget to add Random Post as your title.

Code:
[<style>
#random-posts img {
float: left;
margin-right: 10px;
width: 65px;
height: 65px;
background-color: #F5F5F5;
padding: 3px;
}
ul#random-posts { list-style-type: none;}
#random-posts li {
margin-bottom: 10px;
}
.random-summary {
display: block;
}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 5;
var randomposts_chars = 60;
var randomposts_details = 'yes';
randomposts_details2 = 'no';
var randomposts_comments = 'Comments';
var randomposts_commentsd = 'Comments Disabled';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Arrayundefinedrandomposts_number);
function randompostsundefinedjson) { total_randomposts = json.feed.openSearch$totalResults.$t
}
document.writeundefined'<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');
function getvalueundefined) {
for undefinedvar i = 0; i < randomposts_number; i++) {
var found = false;
var rndValue = get_randomundefined);
for undefinedvar j = 0; j < randomposts_current.length; j++) {
if undefinedrandomposts_current[j] == rndValue) {
found = true;
break
}
};
if undefinedfound) {
i--
} else {
randomposts_current[i] = rndValue
}
}
};
function get_randomundefined) {
var ranNum = 1 + Math.roundundefinedMath.randomundefined) * undefinedtotal_randomposts - 1));
return ranNum
};
</script>
<script type='text/javaScript'>
function random_postsundefinedjson) {
for undefinedvar i = 0; i < randomposts_number; i++) {
var entry = json.feed.entry[i];
var randompoststitle = entry.title.$t;
if undefined'content' in entry) {
var randompostsnippet = entry.content.$t
} else {
if undefined'summary' in entry) {
var randompostsnippet = entry.summary.$t
} else {
var randompostsnippet = "";
}
};
randompostsnippet = randompostsnippet.replaceundefined/<[^>]*>/g, "");
if undefinedrandompostsnippet.length < randomposts_chars) {
var randomposts_snippet = randompostsnippet
} else {
randompostsnippet = randompostsnippet.substringundefined0, randomposts_chars);
var whitespace = randompostsnippet.lastIndexOfundefined" ");
randomposts_snippet = randompostsnippet.substringundefined0, whitespace) + "&#133;";
};
for undefinedvar j = 0; j < entry.link.length; j++) {
if undefined'thr$total' in entry) {
var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
} else {
randomposts_commentsnum = randomposts_commentsd
}; if undefinedentry.link[j].rel == 'alternate') {
var randompostsurl = entry.link[j].href;
var randomposts_date = entry.published.$t;
if undefined'media$thumbnail' in entry) {
var randompoststhumb = entry.media$thumbnail.url
} else {
randompoststhumb = "http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/s1600/no_thumb.png"
}
}
};
document.writeundefined'<li>');
document.writeundefined'<img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/>');
document.writeundefined'<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
if undefinedrandomposts_details == 'yes') { document.writeundefined'<span>' + randomposts_date.substringundefined8, 10) + '.' + randomposts_date.substringundefined5, 7) + '.' + randomposts_date.substringundefined0, 4) + ' - ' + randomposts_commentsnum) + '</span>'
}
if undefinedrandomposts_details2 == 'yes') { document.writeundefined'<span class="random-summary">' + randomposts_snippet) + '</span>'
}
document.writeundefined'<div style="clear:both"></div></li>')
}
};getvalueundefined);
for undefinedvar i = 0; i < randomposts_number; i++) { document.writeundefined'<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 style="font-size: 10px; float: right;"><a href="http://whowantstuffs.blogspot.com/2015/11/add-simple-random-posts-widget-for-blogger.html" rel="nofollow">Random Posts Widget</a></div>]

Widget Customization
  • Thumbnail Dimensions >> To change the size of the thumbnail kindly modify the [ width: 65px; height: 65px; ] value with a red color to your desired width and height. Example width: 95px; height: 95px;
  • Number of Posts >> change the value "5" from [ var randomposts_number = 5; ] to the number of posts you want to show randomly.
  • Add Text Snippets >> Change "yes" to "no" from [randomposts_details2 = 'no';]
  • Snippets Length >> To add more snippets modify the "60from [ var randomposts_chars = 60; ].
  • Posts Information >> If the the post date and comment count bothering you, Change the 'yes' to 'no' from [ var randomposts_details = 'yes'; ]

That is all on Advanced Random posts widget for Blogger with Image thumbnail, Hope you enjoyed Reading it. Wish you all the Best.
Advanced Random posts widget for Blogger with Image thumbnail
4/ 5
Oleh

Subscribe via email

Get our latest updates straight to your inbox.