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 :)
- Open
Blogger > Layout > Add Gadget. - 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>
- 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.