So now I have tried to bring maximum exposure to this widget by designing it from scratch, well it looks good displayed and even I am using this same design and widget in my sidebar, if you are able to see you can just refresh the page and see how posts automatically change on their own.
So now if you like this widget and you were just wandering all over the internet in search of this widget well below are the easy steps to add this to your blogger blog.
- Open Blogger > Template > Edit HTML.
- Press
Ctrl +F and search for]]></b:skin>tag & paste below code above it.#random-posts{border: 1px solid #aaa;margin: -20px 0;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;-moz-box-shadow: 0 5px 5px -5px #999;-webkit-box-shadow: 0 5px 5px -5px #999;box-shadow: 0 5px 5px -5px #999;background: #f6f6f6;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));}#random-posts li{background: url(http://i.imgur.com/d2qDDPf.png) no-repeat 12px;border-bottom: 1px solid #ccc;font-family: cambria;font-size: 12pt;list-style-type: none;margin: 0;padding: 6px 10px 10px 3em !important;height: 44px;overflow: hidden;line-height: 1.5em;}
- Now hit Save Template, now we have successfully pasted the CSS Design Codes.
- Now its time for your widget code just open Blogger > Layout > Add Gadget.
- Choose HTML/JavaScript widget and add below code into it.
<div id='random-posts'><script type='text/javaScript'>
var rdp_numposts=7;var rdp_snippet_length=0;var rdp_info='no';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);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/AVvXsEhMysu6h3ZqKVdOwsfjLoduvAzDMfy1R68el274eJkI83N2fyAaj-Ni9QazOotFX5WwloLZVoGotwDp5Cz7tmICvQMQhWf2mZ9SrRluIEolwmtqvqR0vimqXQFh2QxtirwlkhrI3r1Gof8/s1600/default.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" title="'+rdp_posttitle+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<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></div> - Now you can give any title to it like Popular Post or something & if you want to change the number of posts displayed just change the number in Red color above.
- Just refresh your blog and see this widget in action.
- If you face any width or CSS problem you can just manipulate your CSS code.
So now your random posts widget is ready to roll and get some more views, well if you find any problem implementing this widget do comment below so that I can help you out :)
(COMMENTS WILL LOAD AUTOMATICALLY)