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.
- 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.
0 comments:
Post a Comment