A worthy way to keep your visitors busy, and to allow them to spend more time on your website is to use “Random Post” button. Recently, one of our visitors asked us How to Add a Random Post button in Blogger. This button can be placed anywhere in your website, providing your visitors the flexibility that when clicked it will take the visitors to a complete random post. In other words, It will display random posts, every time the button is clicked. This is actually easy to achieve, so in this article we will show you How to Add a Random Post button in Blogger.
Before you start check out the live demo of this "Random Post" widget. You can play with it, and it will take you to the random post on each hit.
The first thing you need to do is to get yourself login into your Blogger account and go to Template >> Edit HTML section. Now within the template coding, search for the ending </body> tag and just above it paste the following piece of JavaScript coding.
<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>
Now to create a random post link and put it in a desired location of your website paste the following code anywhere you like. For example, in your navigation and it would automatically turn into a random post button. Once everything is done, save your template by pressing “Save Template” button.
<div id="mbl-random"></div>
Congratulations: You Successfully added a Random post button in your blogger blog. Now go and check your site to see if everything is working just according to the plans. If you have followed the instructions properly, we are sure you will not face any errors.
How to Style the Random Post button?
I am sure, people would like to make their random post button stand out (fancy from others). You can use the following piece of CSS code to customize or stylize your button. You can make it look entirely different and can also use the same CSS coding as we have provided below (Remember: you have to paste the following code just above the ]]></b:skin> tag present in your template coding).#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))
);
}
We hope this tutorial may have helped you in learning how to add random post button in blogger. How many of you are already using this button? What are its benefits and how much conversion it is bringing to your site. We would love to hear your reviews and inputs on this topic, feel free to leave you precious comments below.
0 comments:
Post a Comment