Latest news, food, business, travel, sport, Tips and Tricks...

How to Add a Random Post Button in Blogger

How to Add a Random Post Button in Blogger

Want your readers to redirect to a post that changes on every click? 

A Random post allows your visitors to explore and read your older contents that are hidden in your blog archives.

It is a good way to keep your readers busy on your blog or site and reduce your blog’s bounce rate.

This random post button can be used anywhere on your blog. You can use it at the end of your blog post, on a sidebar, on top or anywhere as feel to be. So,

More: How to add automatic Featured post widget in Blogger

How to Add a Random Post Button in Blogger

Adding a Random post button in blogger is actually very easy to achieve. You just have to follow the below simple and easy steps and you will be done within no time:

Step 1. Login to your Blogger blog and select on Template/Theme and click on Edit HTML.

Random Post Button

Step 2. Search the </body> tag and paste the below code just above the </body> tag.

Code

  <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 3. Now again search of the ]]></b:skin> tag paste the below CSS code just above the ]]></b:skin> tag.

Code

 #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 4. Click on Save in order to save your settings.

Now, paste the below-given code on your blog posts, on a sidebar or wherever you like. When your readers will click on the button it will open your blog posts randomly from any labels or category.

Code

 <div id="wk_random_post_button">  

Conclusion on How to Add a Random Post Button in Blogger

More: How to create Social content locker in Blogger posts

I hope you have successfully added the Random post button in your Blogger blog, or if you have found any difficulty adding the codes do leave a comment below and I will get back to you.

If this tutorial was helpful to you, consider sharing it to encourage us.

,
//