Random Post Button Widget for Blogger



Today I am going to show you how you can add Random Post button to Blogger on clicking which you will be redirected to any random page on your blog. The widget works on JavaScript while the button is made of CSS.

This widget uses simple JavaScript and looks elegant. On clicking the button it fetches a post from the blogs feed and redirect the user to that particular page.

This widget may be really helpful to increase your blog's pageviews. Moreover the button has 3D effect which you can see by clicking the button in the below demo.



Once you have seen the demo you can add this cool widget to your blogs by two methods -
1. One Click Installation
2. Manually Adding the Code

One Click Installation


For adding this search bar to your blog just click the below button.

After clicking the button you will be redirected to Blogger.com and your widget would be added.



Manually Adding the Code


If you think that you need to make some changes in the code or the above button is not working for you then you may use this method.
Go to Blog Title → Layout → Add Widget → HTML/JavaScript. Paste the below code.
<style>
#abt-random{position:relative;color:rgba(255,255,255,1);text-decoration:none;background-color:rgba(219,87,5,1);font-family:'Yanone Kaffeesatz';font-weight:700;font-size:20px;display:block;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);-moz-box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);margin-bottom:10px;margin-top:10px;width:160px;text-align:center;-webkit-transition:all .1s ease;-moz-transition:all .1s ease;-ms-transition:all .1s ease;-o-transition:all .1s ease;transition:all .1s ease;padding:4px}
#abt-random:active{-webkit-box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);-moz-box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);position:relative;top:6px}
#abt-random a{color: #fff;}
</style>

<center><div id="abt-random"></div></center>
<script type="text/javascript">
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('abt-random').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
</script>

After adding the code save the widget and finally save the template. You are done now. Now you and your visitors can see and use this Random Post Button Widget for Blogger.

18 comments:

  1. how to add that One Click Installation widget pls help

    ReplyDelete
  2. nice, i'm using this widget :)

    ReplyDelete
  3. how to change the color of the text ?? Thanks

    ReplyDelete
  4. How to change color of the Random Post button to grey shade. Black & White
    Thanks
    DKD

    ReplyDelete
  5. Can you please tell how to load different post on page reload instead of clicking the button.

    ReplyDelete
  6. i had it at my footer now, great article

    ReplyDelete
  7. Thank you for Random Post Widget Post. I need this and I have added in my blog to view rand post.

    ReplyDelete
  8. Thanks a lot my struggles come to an end and make my shuffle button thanks again

    ReplyDelete
  9. Perfect, I've been looking for this for a while and finally found it :) thanks for adding

    ReplyDelete
  10. I wanna add a random post option in menu bar

    ReplyDelete
  11. How to make random recent post with full width and height in first page do you know know ?

    ReplyDelete
  12. Hello, Yes, I can help you in this how many posts you want to show in a row? the more the posts you show the slower the page loads.

    ReplyDelete