Add Random Post Widget With thumbnail For Blogger: In this Article we tell you how you can Install Stylish Random Post Widget with thumbnail for blogger. There is many of benefits of adding random post widget on your blog. sometimes your blog old post are neglected so using this random post widget you can get traffic to your old post and make it an active posts.
You need to follow few Easy Steps for installation of Random post Widget in your blog.
In First Step we teach you how you can add CSS code in your blog.
- Go to Dashboard > Template > Edit HTML
- Press CTRL+F Search box appear and find ]]></b:skin> in search box.
]]></b:skin>
ul#random-posts img {
float: left;
margin-right: 10px;
margin-bottom: 20px;
}
ul#random-posts li {
border-bottom: 1px solid #d2d2d2;
padding-bottom: 10px;
margin-bottom: 10px;
}
.rp-info {
font-style: italic;
}
.rp-snippet {
font-style: normal;
}
ul#random-posts a {
font-weight: bold;
}
- Paste above CSS code to above the ]]></b:skin> tag.
Following the below step to install JavaScript on your blog.
- Go to the Layout > Add Widget
- Select HTML/JavaScript and Paste below code in your widget and save it.
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=80;
var rdp_info='yes';
var rdp_comment='Comments';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);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.replace(/<[^>]*>/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);var space=rdp_get_snippet.lastIndexOf(" ");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/AVvXsEhqqp4U1K3L4hJUzWt_cdSTEht7RtOheaAwB-FcZuRcXWcT6Mngd80Y3sl1DiyKeJ1qMH-IGUjHSlxsNgp2ugUhGmiRpEtRXTE5Evkd4AUht-HIWKXJyswXCCjVGjk-xzoh5jjtDR7fNRI/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('<br/><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>')};
</script>
</ul>
Random Post Widget With thumbnail Customization:
- You can Change the Post number which you want to display by changing 5.
- You can increase and decrease the summary of the post just change 80.
- This script show date and comment in random posts by default you can change it by modifying var rdp_info='yes' to no.
Now you finish main things, just save your widget and check your site and view your stylish random posts widget. If you like this post then comment below and feel free to share your problems.
Comments
Post a Comment