Let your visitors read randomly in your blog using this 'RANDOM POST' button widget! I'm going to show you today how you can add a 'RANDOM POST' button in your blog. This widget may be really helpful to increase your blog's pageviews, traffics, and may enable your visitors to view posts randomly from your blog. Introduction
This widget uses Javascript for the function and cool clean CSS for the buttons. On clicking the button, it fetches a post from your blog randomly and redirect you to that page. Moreover you can choose from our different buttons with cool effects that you can see by clicking and hovering them!Features
Lightweight CSSMinified Script
Improved HTML
SEO friendly
Fully Customizable
External Scripts
Jquery Library v1.2.3 or higher (?)Live Demo
Demo not available.HTML
Go to Blogger » Template » Backup your Template » and Edit HTMLCopy the following code and paste it anywhere you'd like it to be displayed.
<div id="random"></div>CSS
Search for ]]></b:skin> then add the following code just above it#random,#random:before{height:35px;display:block;background:#de463b;-webkit-box-shadow:0 5px 0 0 #c02b21;box-shadow:0 5px 0 0 #c02b21}#random{-webkit-transition:all 0s ease-out;-moz-transition:all 0s ease-out;-o-transition:all 0s ease-out;-ms-transition:all 0s ease-out;transition:all 0s ease-out;font-family:Arial,"Helvetica",sans-serif;text-align:center;text-shadow:0 -1px 0 rgba(0,0,0,.4);padding:4px 20px 0;margin:10px auto;left:30px;cursor:pointer;border-top-right-radius:5px;border-bottom-right-radius:5px;border:none;width:100px;font-size:14px;position:relative}#random:active{top:3px;-webkit-box-shadow:0 2px 0 0 #c02b21;box-shadow:0 2px 0 0 #c02b21}#random:before{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb3W0HEVX-5mflnv54-lW4K_l82_4AJmQTGn52pGv6oxrUdJReyt-Qw5ZA5SStOUGDVf-DXas5S5xdRazyvYXoN-0oFgO1f6ick53TLGV7ts5601L0MTlh-RHGNTpxKkgNBZFIy9bNtQVT/s20/random.png);width:35px;position:absolute;padding-top:10px;line-height:20px;top:0;margin-left:-54px;font-size:16px;font-weight:700;border-top-left-radius:5px;border-bottom-left-radius:5px;border-right:solid 1px #c02b21}#random:active:before{top:-3px;-webkit-box-shadow:0 5px 0 0 #c02b21,6px 4px 2px rgba(0,0,0,.3);box-shadow:0 5px 0 0 #c02b21,6px 4px 2px rgba(0,0,0,.3)}#random,#random a{color:#fff}#random,#random:hover a{text-decoration:none}
JScript
Search for </body> and just above it add the following code<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 = '#randompost'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Random'; document.getElementById('random').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
//]]>
</script>
Final Words
You can also add this widget in your Menu bar by enclosing <div id="random"></div> with <li>, just don't forget to remove the CSS. =)Let me know if you're facing any problems installing this widget. Enjoy blogging!
Rate This Article
Thanks for reading: Random Post Button Widget For Blogger, Stay tune to get latest Blogging Tips.