How to Add Random Posts Widget for your website

The Magic of Blogger Widget Your First Random Postwith  thumbnails Widget.

Welcome to the magical world of Blogger widgets, where a single line of code can bring your blog to life Your blog. As a new blogger, you embark on a journey full of creativity and excitement. In this first post, we will explore the wonders of the Random Post Widget, an attractive addition that will captivate your readers and make them want to read again and again.

The Random Post Widget is an amazing feature that displays randomly selected posts from your blog. Every time your visitors visit your blog, they will be amazed by some hand picked posts that they may have missed. It's a great way to engage your audience and encourage them to explore more of your content.

Table of Contents

Step-by-Step Installation.

Don't worry, the magic of Blogger Widgets is easy. To add the Random Posts widget to your blog, follow these simple steps:

Step 1: Access your Blogger Dashboard

Log in to your Blogger account and go to your Blogger Dashboard.

Step 2: Access the Layout Panel

Click Layout on the left sidebar. This is where you can customize the layout of your blog.

Step 3: Add a Gadget

Find the area of your blog layout where you want to place the Random Posts widget (such as the sidebar or footer). In this section, click on Add a Gadget.

Step 4: Select HTML/JavaScript Gadget

In the pop-up window that appears, scroll down and select HTML/JavaScript Gadget.

Step 5: Copy and Paste the Code.

A text box will appear where you can enter your custom code. Copy and paste the following code into the text box.

Step 6: Save and Enjoy

<style> #random-posts img{float:left;margin-right:10px; width:65px;height:50px;background-color: #F5F5F5;padding: 3px;} ul#random-posts {list-style-type: none;} </style> <ul id='random-posts'> <script type='text/javaScript'> var rdp_numposts=5; var rdp_snippet_length=150; 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/AVvXsEgwEiD7t6HeMnmjPt3ktnr06sNDRn4mD0rbU-ee-zzN0UMXmIdeCVgWjIS8zG7SwV3gO3I7LEPSd1du2V4HtdbljAzka2wKoFEW-W-MMzyOmgdRyKx1srVowLXs9BFpYlW8B6GYJH6gN8g/s1600/no_thumb.png"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+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> </ul>

Click Save and the Random Posts widget will be added to your blog.Visit your blog's home page now and witness the magic of the widget displaying 7 / 10 random posts every time the page loads.

Customizing the Widget.

The code provided is designed to fit seamlessly into your current Blogger theme. However, you can customize the appearance of the widget to match the style of your blog. Explore sections within the code and change fonts, colors, padding, and more.

Find more exciting Blogger Widget Codes & Tips at Widget. Discover the magical possibilities offered by Blogger Widgets and turn your blog into an immersive.

Discover more technical insights.

Explore tech tutorials and coding adventures at CodexDIndia. Unleash your inner tech lover and embark on a continuous learning journey.

Congratulations on adding your first Blogger widget! This is a random post widget that will keep your readers interested every time they visit. But this is just the beginning of your journey into widget.

Stay tuned for more fascinating widget code that will take your blogging experience to a new level. Get creative and enjoy the magical experience of Blogger widgets. Have fun blogging!

Thank you.