Tutorial Blogger Blogspot By - mybloggerlab.com ; Random Post

http://www.mybloggerlab.com/2013/11/how-to-add-random-post-button-in-blogger.html

Let visitor keep and spend more times in our blog by puting random post feature.

what we have to do is:

1. go to Template >> Edit HTML section.
    search for </body> tag
    put this code below, just above the tag

<script type="text/javascript">
/*<![CDATA[*/
function showLucky(root)
{ 
  var feed = root.feed; 
  var entries = feed.entry || []; 
  var entry = feed.entry[0]; 
  for (var j = 0; j < entry.link.length; ++j)
  {
    if (entry.link[j].rel == 'alternate')
    {
      window.location = entry.link[j].href;
    }
  }
} 
function fetchLuck(luck)
{ 
  script = document.createElement('script'); 
  script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; 
  document.getElementsByTagName('head')[0].appendChild(script); 
}
function feelingLucky(root)
{
 var feed = root.feed; 
 var total = parseInt(feed.openSearch$totalResults.$t,10); 
 var luckyNumber = Math.floor(Math.random()*total);
 luckyNumber++; 
 a = document.createElement('a'); 
 a.href = '#random'; 
 a.rel = luckyNumber; 
 a.onclick = function(){fetchLuck(this.rel);}; 
 a.innerHTML = 'Random Post'; 
 document.getElementById('mbl-random').appendChild(a); 
} 
</script>
<script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
/*]]>*/
</script>

 2. Create a Link or button to call the script

<div id="mbl-random"></div> put it in any location on the page, or embed in navigation button

3. use CSS to format the link/button like below, put it just above the ]]></b:skin> tag present in your template

#mbl-random a {
background-color:#3bb3e0;
padding:10px;
position:relative;
font-family: 'Open Sans', sans-serif;
font-size:12px;
text-decoration:none;
color:#fff;
border: solid 1px #186f8f;
background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(44,160,202)),
color-stop(1, rgb(62,184,229))
);
-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#mbl-random a::before {
background-color:#ccd0d5;
content:"";
display:block;
position:absolute;
width:100%;
height:100%;
padding:8px;
left:-8px;
top:-8px;
z-index:-1;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
-moz-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
-o-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
}
#mbl-random a:active {
padding-bottom:9px;
padding-left:10px;
padding-right:10px;
padding-top:11px;
top:1px;
background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(62,184,229)),
color-stop(1, rgb(44,160,202))
);
}






4. Save the template