Random Post Button Widget for Blogger

Posted On // 15 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.

15 comments

vivek kumar Author
27 August 2013 at 12:48

how to add that One Click Installation widget pls help

Reply
8 October 2013 at 06:56

Great widget! Thank you!

Reply
aisukablog Author
30 October 2013 at 23:49

nice, i'm using this widget :)

Reply
Anonymous ® Author
2 November 2013 at 14:00

why it asking for login

Reply
16 February 2014 at 19:07

how to change the color of the text ?? Thanks

Reply
Anonymous Author
3 March 2014 at 10:35

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

Reply
tadwinpro Author
8 March 2014 at 13:58

I think you for this post

Reply
28 March 2014 at 19:04

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 21:02

i had it at my footer now, great article

Reply
karl brown Author
22 March 2015 at 11:35

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 23:33

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

Reply
Lilly Author
17 April 2016 at 18:33

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

Reply
6 May 2016 at 16:31

how to add this post footer

Reply
13 January 2017 at 06:03

très intéressant

mon site : http://www.tous-en-bref.com

Reply
1 April 2017 at 23:30

I wanna add a random post option in menu bar

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 |