Random Post Button Widget for Blogger

Posted On // 13 comments


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.

13 comments

vivek kumar Author
27 August 2013 at 00:18

how to add that One Click Installation widget pls help

Reply
7 October 2013 at 18:26

Great widget! Thank you!

Reply
aisukablog Author
30 October 2013 at 11:19

nice, i'm using this widget :)

Reply
Anonymous ® Author
2 November 2013 at 01:30

why it asking for login

Reply
16 February 2014 at 05:37

how to change the color of the text ?? Thanks

Reply
Anonymous Author
2 March 2014 at 21:05

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

Reply
tadwinpro Author
8 March 2014 at 00:28

I think you for this post

Reply
28 March 2014 at 06:34

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

Reply
KULI Posting Author
14 April 2014 at 08:32

i had it at my footer now, great article

Reply
karl brown Author
21 March 2015 at 23:05

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

Reply
6 February 2016 at 10:03

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

Reply
Lilly Author
17 April 2016 at 06:03

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

Reply
6 May 2016 at 04:01

how to add this post footer

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Random Post Button Widget for Blogger |