How to add a cool Random post Button For your Blogger Blog

create a random post link so that when visitors click on it they can read a random post instead of reading the posts in the order of submission , so what you have to do ?

  • As usual, go to layout Form your Dashboard.
  • click on the page elements tab and click Add gadget .
  • Add a HTML/Javascript  widget.
  • then name the widget like " random posts"
  • then paste the following code in the body .
  • <div id="myLuckyPost"></div> <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 = 'View Random Post'; document.getElementById('myLuckyPost').appendChild(a); } </script> <script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script>
  • save and view your blog.
  • the random posta widget will appear where you have placed it.
  • by default, the text displayed is " view random posts " . to change it just go to EDIT HTML and then search for the text and edit it as you wish.
  • nice tool to increase your pageviews.

8 comments:

Anonymous said...

Hey, is there to way to add a button to this, instead of a text link?

Thanks

Eyes Half Closed said...

Thanks for this, its just what I needed nice and simple. :)
And @InjectedMetal; fourth line from the bottom of the code is the words;
' View Random Post '
which is what currently displays as the button, however you may be able to replace that with an image tag, pointing to a button of your own. If you don't know how to embed images, see this page;
http://www.w3schools.com/tags/tag_img.asp

Anonymous said...

how about inserting it after every post? how can we make that possible?

Cohen said...

I would like the link the script creates to have the class of "navlink". I thought I could add this code: a.class = 'navlink'; to the script but it did not work.

Could you give me a hand please?

Cheers.

DJ MR.CEE said...

ok i used it, and place my image on there but it keeps opening another tab with the picture :/

Vormen said...

Works, so thank you!

Daryl said...

don't use it know. your blog will be banned. it will report as spam.

Bucan said...

Blogger closed my blog. It is spam says. ¿Why?

Promote blog