After adding a random page button to this blog and to another I help to run,
The Chilly Bear I was asked a few times how to do this. So in the hope this will be useful I have decided to write this tutorial on how to add a random page button to a blogger blog.
Creating the Graphic For The Random Page Button
Firstly I should point out I am not a scripter so I didn't incorporate the button graphic into the javascript, but used the work around described here. If anyone knows how the graphic could be embedded into the script please add a comment below.
To create the button graphic you'll need to know the width of the sidebar on your blog where the button will appear. To find this:
1/ Open your
Blogger Dashboard and on the blog you want to add the button to, click on the small arrow to the right of the blog name to reveal the drop down menu (highlighted in red above). Select
Template.
2/ Click the Edit HTML button to view the blog template.
3/ You'll need to view the blog's CSS file which will tell you the width of the sidebar. If you can't see the CSS of the blog find this line towards the top of the template:
then click on the triangle by the template line number (see image above).
4/ scroll down the blog CSS until you find a line similar to the above. As you can see in this example the width of the sidebar is 312px.
All CSS files are different for each blog template, so the line may appear differently for you, but there should be a line showing the width of the sidebar for your blog.
Now the we know the width of the sidebar we can begin to create the button graphics. Open your graphics software, select New then for the width of the graphic enter the width of the sidebar, and the height you want your graphic to be.
If you don't want your random page button to take up the full width of the sidebar, start with a transaparent layer and centre your button when you create it. When you export your graphic make sure it has an alpha channel so the background remains transparent.
You can be as creative as you like with the appearance of the button. Since the Chilly Bear is a Second Life club and music themed blog the button I created for it is a record label, (the image at the top of the page).
Once you have created the button graphic upload it to an image hosting website, such as Photobucket. You will need the code for direct layouts later.
Adding the Random Page Script To The Template
To create the random page button you will need to add a script to your template. Before you edit your template remember to create a backup by going to your template page and clicking the Backup/Restore button to the upper right.
1/ Copy the script Below:
<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 = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Random Post'; document.getElementById('mbl-random').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
/*]]>*/
</script>
2/ Go to your template page and click on the
Edit HTML button to view the template.
3/ Scroll to the bottom of the page and just above the closing </body> tag paste the script.
4/ Save the template.
Adding The Random Page Button To Your Blog
1/ To add your button, go to the Layout page of the blog and Click on Add A Gadget for the Sidebar.
2/ Select a HTML/Javascript widget and paste this into the window:
<div class='box'>
<div class='random page'>
<div id='mbl-random'/>
<style type='text/css'>
#mbl-random a{
display: block;
width:width of the button graphic;
height: height of the button graphic;
background: URL(url of the button) no-repeat 0 0;
font-size: 0px;
}
</style>
</div>
</div>
3/ Replace 'width of the button graphic' with the width of your button in px. This should match the width of the sidebar.
4/ Replace 'height of the button graphic' with the height of your button.
5/ Replace 'url of the button' with the url for direct layout of the uploaded graphic.
6/ Click
Save.
Your random page button should now appear on your blog
Troubleshooting
Because all templates are coded differently it may be that your random page button only appears on the home page of the blog. If this is the case you can make it appear on all pages by creating a widget for the button in the template.
1/ Open your template again and scroll down to where you see a line similar to the above, highlighted in red.
2/ Scroll further and you should see a search widget and as well as others, such as a social profile widget.
3/ Normally a random page button would be placed below these widgets, so when you scroll just past them add the following:
<!--Random Page Widget-->
<div class='widget-container'>
<div class='random-button-widget'>
widget text
<div class='clear'/>
</div>
</div>
Replace 'widget text' with the code you added to the sidebar widget when editing the layout.
5/ Save the template.
4/ Delete the widget you originally created when editing the layout.
Your random page button should now appear on each page.
Having a random page button on your blog can be very useful for bringing forward older posts that visitors may still find interesting, but were otherwise hidden among the numerous other posts you may have. It can also help to keep people on your blog for longer. If you find this tutorial useful then why not share it with friends.
