Friday, October 24, 2014

Random Posts Displaying Button for Blogger!

Blogger posts get older day by day. That is why they lose the attention of the visitors. The best solution to keep the old posts alive is to show them on homepage. And you can do this by adding Random posts widget in your blog. Earlier I had shared two random posts widget - Random Posts Widget with Thumbnails and Multi Colored Random Posts Widget. And today I am gonna share another Random Posts widget. It is Random Posts Displaying Button.

Related Posts:

The random posts widget that I had shared earlier, shows posts of your blog with titles or thumbnails randomly. The widget that I am sharing, it is a random posts displaying button. You can place this button anywhere on your blog homepage. When a user click on this Random post Button then randomly a post will be shown from your blog. It will show Random post every time user click on it. This Random Posts Button is like the below image.

Random Posts Button

Adding Random Posts Button to Blogger:
  • First Sign into your Blogger Account and go to Dashboard.
  • Then click on Layout option and click Add a Gadget link where you want to place this Button.
  • Then from the Gadgets list choose HTML/JavaScript.
  • Now Paste the following code in the content box.

  • <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>
    

  • And finally click Save button to complete the addition.

Customization:
  • To change View Random Post text. Just replace it with anything you want.
  • To change Button width, just change width:200px value.


Stay with www.iTTimesbd.com for more IT related post

No comments:

Post a Comment