Hello Everyone, Today in this post I am going to share a tutorial on How To Create Random Post Widget in Blogger Website. Random Post widget is a gadget containing random snippets from our blog. If you want to display it, let's look at how to create a random post widget on Blogger below.
Displaying a widget containing the post title in the sidebar or footer is one way to make visitors feel at home on our blog. If they finish reading one article, they can find other interesting articles easily.
In Blogger itself there is actually a default widget that can display post titles like this. Unfortunately on the widget, the posts that are displayed are articles that have a high level of popularity on our blog.
At first glance, there is nothing wrong with this, however the purpose of the widget is to keep visitors on our blog. Of course the list of posts that are displayed must be the best articles!
Unfortunately, this can backfire, because popular articles on our blog can be an inspiration for other blogs. If in the end our article is overtaken, of course this will be a loss for our blog.
Well, if you want to display a widget containing article titles without showing the most popular posts, then you can use the random post widget. With this gadget, we will display post titles randomly. How to create a random post widget on Blogger is also quite easy to do.
How To Create Random Post Widget in Blogger Website
<style>
#random-posts img {
border-radius: 0px;
float: left;
margin-right: 5px;
width: 75px;
height: 75px;
background-color: #FFFFF;
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: 13px;
text-transform: capitalize;
padding: 0px auto 5px;
}
#random-posts a:hover {
text-decoration: none;
}
.rp-snippet {
font-size: 11px;
background: none;
padding: 5px;
margin-right: 8px;
}
#random-posts span {
}
#random-posts li {
margin-bottom: 10px;
border-bottom: 1px solid #eeeeee;
padding: 4px;
}
</style>
<ul id="random-posts">
<script type="text/javaScript">
var rdp_numposts=4;var rdp_snippet_length=80;var rdp_info='no';var rdp_comment='comment';var rdp_disable='Comments Disabled';var rdp_current=[];var rdp_total_posts=0;var rdp_current=newposts Arrays(rdp_current=newposts );function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt= json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random ();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current [i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type="text/javaScript">
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry) {var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet. <[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length.); );rdp_snippet=rdp_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry) {var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{ rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlI9cMoAIktC7B2W4Fv7tn7yGDyaTEtr0Y5BP2UCNRTn1OsujGrtzYMzUQtWngCgWb3q3IcSe_04Eu9IF44xdF6v52Q4gH0qKeDdQfZBfuFkhcl3bLY8e0QUApopkzXMKrCJpr_dTFO-Q/s1600/no_thumb.png"}}};document.write('<li>');document.write(' <a href="'+rdp_posturl+'" rel="nofollow"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div ><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){ document.write('<span><div class="rp-info">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</div></span>'};document. write('<div class="rp-snippet">'+rdp_snippet+'</div><div style="clear:both"></div></li>')}};getvalue();for( var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' +rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\ "text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script> ')};div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\ "text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script> ')};
</script>
</ul>
Random Post Options :-
- To change the number of article titles to be displayed, change them rdp_numposts=4 to other values you want.
- To change the thumbnail view to appear on the right, change it float: left;tofloat: right;
- To change the number of characters in the snippet, change the rdp_snippet_length=80; number of other characters you want.
Conclusion :-
How, it's quite easy, right, how to make a random post on Blogger? You can choose to display random posts using thumbnails or snippets. If you face any problem and errors then put your valuable comment.