Random Posts Displaying Button for Blogger

In the previous we show how you can put a random posts widget to blogger which really helps to down the bounce rate of any blog as it displays different posts with its title every time when user refresh the page. and now today in this tutorial we will see how to add a random posts displaying button to blogger. Random posts displaying button you can set anywhere inside your blog but it should be displayed into the all posts and pages of your blog. Best place to add this button in your blog is header area, sidebar or footer.

What is use of this button ? use of this button is to show random posts within your blog. When a user click on this button, randomly a post will be opened from older posts or new one. it will show random posts every time user clicks on it.

Also see : Add Random Posts In Blogger to Increase the Page-Views

How to Add Random Posts Displaying Button to Blogger?

Go to blogger dashboard > Layout > Add a Gadget
Choose HTML/Javascript from the list.
Copy and paste below code just into it.

<style type="text/css">@import  url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700);#myLuckyPost  a{-moz-border-radius:8px;-moz-box-shadow:0 9px 0 #2f6ae0, 0 9px 10px  rgba(0,0,0,.7);-moz-transition:all .1s ease;-ms-transition:all .1s  ease;-o-transition:all .1s  ease;-webkit-border-radius:8px;-webkit-box-shadow:0 9px 0 #2f6ae0, 0 9px  10px rgba(0,0,0,.7);-webkit-transition:all .1s  ease;background-color:#497ce5;border-radius:8px;box-shadow:0 9px 0  #2f6ae0, 0 9px 10px  rgba(0,0,0,.7);color:rgba(255,255,255,1);display:block;font-family:'Yanone  Kaffeesatz';font-size:25px;font-weight:700;height:40px;margin:10px  auto;padding:10px 2px  2px;position:relative;text-align:center;text-decoration:none;transition:all  .1s ease;width:200px}#myLuckyPost a:active{-moz-box-shadow:0 3px 0  #2f6ae0, 0 3px 6px rgba(0,0,0,.9);-webkit-box-shadow:0 3px 0 #2f6ae0, 0  3px 6px rgba(0,0,0,.9);box-shadow:0 3px 0 #2f6ae0, 0 3px 6px  rgba(0,0,0,.9);font-size:25px;position:relative;top:6px}</style><div  id="myLuckyPost"></div><script  type="text/javascript">function showLucky(e){var t=e.feed;var  n=t.entry||[];var r=t.entry[0];for(var  i=0;i<r.link.length;++i){if(r.link[i].rel=="alternate"){window.location=r.link[i].href}}}function   fetchLuck(e){script=document.createElement("script");script.src="/feeds/posts/summary?start-index="+e+"&max-results=1&alt=json-in-script&callback=showLucky";script.type="text/javascript";document.getElementsByTagName("head")[0].appendChild(script)}function  feelingLucky(e){var t=e.feed;var  n=parseInt(t.openSearch$totalResults.$t,10);var  r=Math.floor(Math.random()*n);r++;a=document.createElement("a");a.href="#random";a.rel=r;a.onclick=function(){fetchLuck(this.rel)};a.innerHTML="View Random Post";document.getElementById("myLuckyPost").appendChild(a)}</script><script   src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script>

Now, Save your widget and its done. Refresh your blog and you should see a random button installed in your sidebar. :)

You can change text "View Random Posts" with anything you want. Just replace blue colored text in above code.