How to add Advanced Random post widget for Blogger with Image thumbnail, To increase your Blog page View.
This is a very cool widget that 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.
Contents
Guide On Advanced Random post widget for Blogger with Image thumbnail
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) + “…”;
};
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=”https://geeksblogger.com/advanced-random-post-widget/” >Advance Random Posts Widget</a></div>
NOTE: you cant copy the above code because we have disabled copy and paste on this site, just use the download button below to download its and follow up with other instructions here
Also Read: How to Find Website IP Address
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 “60” from [ var randomposts_chars = 60; ].
- Posts Information >> If the post date and comment count bothering you, Change the ‘yes’ to ‘no’ from [ var randomposts_details = ‘yes‘; ]
That is all on Advanced Random post widget for Blogger with Image thumbnail, Hope you enjoyed reading it. Wish you all the Best.
How to add Advanced Random post widget for Blogger with Image thumbnail, To increase your Blog page View.
This is a very cool widget that 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 post widget for Blogger with Image thumbnail
1. Go to blogger dashboard.
Also Read: Getbarter Online Virtual Card: How To Create New Account
2. Click on layout.
3. Choose Add a Gadget. 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) + “…”;
};
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=”https://geeksblogger.com/advanced-random-post-widget/” >Advance Random Posts Widget</a></div>
NOTE: you cant copy the above code because we have disabled copy and paste on this site, just use the download button below to download its and follow up with other instructions here
Also Read: How to Find Website IP Address
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 “60” from [ var randomposts_chars = 60; ].
- Posts Information >> If the post date and comment count bothering you, Change the ‘yes’ to ‘no’ from [ var randomposts_details = ‘yes‘; ]
That is all on Advanced Random post widget for Blogger with Image thumbnail, Hope you enjoyed reading it. Wish you all the Best.
Hey Sir!
I hope you are doing great, This is a very helpful Article for beginners, Thanks For Sharing.
Thanks a lot for stopping by, really glad you love it and its work for you.