Add Stylish Random Posts Displaying Button in Blogger

Providing your visitors an easy to view older post's on your blog could surely get your blog's bounce rate down, so earlier I posted how you can add random posts in blogger, so you can configure how many you wanted to show and on every refresh it automatically changes the posts but recently people messaged me on how they can add a Random Posts displaying button like I am using on my blog to display random posts every time user clicks on it.

So now here you go with that awesome random posts button, well first this button looks stylish, it will surely add a beauty to your blog + it will show random posts hence getting your blog's bounce rate down. So now for the demo I have posted the button right below you can click on it and see how it really works.

So now if you like the working of above button you surely want to add this button to your personal blog, well here you go with the steps so enjoy :)

1. Open Blogger > Layout > Add Gadget.
2. Choose HTML/JavaScript Gadget option & add below code 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>
   
3. Now hit Save Gadget button & refresh your blog to see this awesome button.

Now obviously for some changes you can rename the text on the button I have highlighted the text in blue color. Rest works pretty well, have fun and do comment if you face any problem using this widget on your blog.