Also Read

How To Add Random Post Widget In Blogger?

Adding random post widget helps blogger show all the post of a site in every refresh to the reader. A Random post widget permits your readers show all content in the sidebar when the reader refresh each post or visit another post. In this article we will get to know how to add random post widget in blogger.

This widget may help reader find the interesting post without searching them. It is an effective method for keeping your readers engaged on your website and reduces your blog's bounce rate. This random post widget can be used anyplace on your blog. You can use it toward the finish of your blog content, on a sidebar, on top or anyplace you feel suitable. 

What Is Random Post Widget?

Random Post Widget will permit you to show random post inside the post. It will increase the reader engagement of your site and site rank. It will helpful for website design enhancement by linking inner posts.

Random Post Widget Includes

• Related post inside single post.
• Randomly auto created post.
• Eye catchy symbol with post title.
• Search engine optimization friendly and reduce bounce rate.

Today we will know how to add random post button in blogger. 

How Do I Add A Random Post To Blogger?

Step 1: 

Go to blogger dashboard.

Step 2: 

Click on Theme > Customize > Edit HTML.

Step 3: 

Click anywhere into the code area.

Step 4: 

Press Ctrl + F and search for </body>.

Step 5: 

Copy the below code and paste it just above </body>.

<script type="text/javascript"> /*<![CDATA[*/ function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Random Post'; document.getElementById('wk_random_post_button').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"> /*]]>*/ </script>

Step 6. 

Again Press Ctrl + F and search for ]]></b:skin>. 

Step 7: 

Copy the below code and paste it just above ]]></b:skin>.

#wk_random_post_button a { background-color:#3bb3e0; padding:20px; position:relative; font-family: 'Open Sans', sans-serif; font-size:14px; text-decoration:none; color:#fff; border: solid 1px #186f8f; background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(44,160,202)), color-stop(1, rgb(62,184,229)) ); -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff; -moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff; box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } #wk_random_post_button a::before { background-color:#ccd0d5; content:""; display:block; position:absolute; width:100%; height:100%; padding:8px; left:-8px; top:-8px; z-index:-1; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff; -moz-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff; -o-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff; box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff; } #wk_random_post_button a:active { padding-bottom:9px; padding-left:10px; padding-right:10px; padding-top:11px; top:1px; background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%); background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%); background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%); background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%); background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(62,184,229)), color-stop(1, rgb(44,160,202)) ); }

Step 8: 

Save the theme.

Step 9: 

Now, click on Layout > Add a Gadget > HTML/JavaScript. 

Step 10: 

Copy the below code and paste it into the content area. 

<div id="wk_random_post_button">

Step 11: 

Save the gadget.

You are done. 

When somebody click on the random post button he will see random posts on each click.

Conclusion

Hope you have successfully added these codes on your blog. If you like this way to add random post button in blogger, please share it to your friends.