- How to add awesome Popular Posts Widget to Blogger
- How to add circle image Popular Posts Widget to Blogger
- How to add Related Posts Widget to Blogger
It is the easiest way to display the random posts in random style in the sidebar. If you can not used this widget, then be patient, i will show you yo how to add this random posts gadget into your blogs on blogger platform.
You can customized this gadget in a easy way and it is also pretty fast loading , also displayed the thumbnails of your posts with how many comments they received.
So , if you want to add it into your blog, then just follow these steps .
Add Random Posts Widget To Your Blogger Blog
Step 3 – Copy below code, and paste it into HTML/JavaScript Gadget, and Save it.
<style>#random-posts img { float: left; margin-right: 10px; width: 75px; height: 75px; 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 Array(randomposts_number);
function randomposts(json) { total_randomposts = json.feed.openSearch$totalResults.$t}document.write(‘<script type=”text/javascript” src=”/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts”></script>’);
function getvalue() { for (var i = 0; i < randomposts_number; i++) { var found = false; var rndValue = get_random(); for (var j = 0; j < randomposts_current.length; j++) { if (randomposts_current[j] == rndValue) { found = true; break } }; if (found) { i– } else { randomposts_current[i] = rndValue } }};
function get_random() { var ranNum = 1 + Math.round(Math.random() * (total_randomposts – 1)); return ranNum};</script><script type=’text/javaScript’>function random_posts(json) { for (var i = 0; i < randomposts_number; i++) { var entry = json.feed.entry[i]; var randompoststitle = entry.title.$t; if (‘content’ in entry) { var randompostsnippet = entry.content.$t } else { if (‘summary’ in entry) { var randompostsnippet = entry.summary.$t } else { var randompostsnippet = “”; } }; randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, “”); if (randompostsnippet.length < randomposts_chars) { var randomposts_snippet = randompostsnippet } else { randompostsnippet = randompostsnippet.substring(0, randomposts_chars); var whitespace = randompostsnippet.lastIndexOf(” “); randomposts_snippet = randompostsnippet.substring(0, whitespace) + “…”; }; for (var j = 0; j < entry.link.length; j++) { if (‘thr$total’ in entry) { var randomposts_commentsnum = entry.thr$total.$t + ‘ ‘ + randomposts_comments } else { randomposts_commentsnum = randomposts_commentsd }; if (entry.link[j].rel == ‘alternate’) { var randompostsurl = entry.link[j].href; var randomposts_date = entry.published.$t; if (‘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.write(‘<li>’); document.write(‘<img alt=”‘ + randompoststitle + ‘” src=”‘ + randompoststhumb + ‘”/>’); document.write(‘<div><a href=”‘ + randompostsurl + ‘” rel=”nofollow”>’ + randompoststitle + ‘</a></div>’); if (randomposts_details == ‘yes’) { document.write(‘<span>’ + randomposts_date.substring(8, 10) + ‘.’ + randomposts_date.substring(5, 7) + ‘.’ + randomposts_date.substring(0, 4) + ‘ – ‘ + randomposts_commentsnum) + ‘</span>’ } if (randomposts_details2 == ‘yes’) { document.write(‘<span class=”random-summary”>’ + randomposts_snippet) + ‘</span>’ } document.write(‘<div style=”clear:both”></div></li>’) }};getvalue();for (var i = 0; i < randomposts_number; i++) { document.write(‘<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://www.techora.net/” rel=”nofollow”>Random Posts Widget</a></div>
Customize this Widget
- If you want to add more than 5 posts then simply find and change the parameter ” 5 “.
- If you want to make thumbnails more bigger then try this ” width = 75 ” and ” height = 75 “.
- If you want to add text snippets into your gadget then change parameter “no” to “yes” .
randomposts_details2=’no‘;
- If you want to add more snippets characters then change “60” parameter.
- If you want to remove date and time and also comments, then simply change the parameter from “yes” to “no” .
