Blog Flak

If you run a Blogger web page or blog that’s set up to show one post at a time or any type for that matter, you can easily add a Random Post button. It’s sort of a get lucky button for lazy browsers. I’ve seen other tutorials on how to do this on the sidebar but this one will display just above your first post on all pages. You can have it on left, right or centered with the code I’m going to lay out for you. And it’s actually very easy! You don’t even have to expand the widgets template, how cool is that?

Here’s my website where I have it working over at Laff Away .com and you can see it in action.

Now that you’ve seen it, here’s how you do it. But first, make sure you download a backup copy of your template with the built in downloader and save it to your computer.

Now lets go to your blogs Edit HTML page and scroll down and look for this section:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

Once you have found it, replace it all with this code:

 <b:section class='main' id='main' showaddelement='no'>
<b:widget id='HTML50' locked='false' title='Random Posts' type='HTML'/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

The first and last lines are the same, all we’ve done is added in a new line of code for a widget in between them, it’s the line with HTML50.

Save the changes and you’re done with the first part! If it asks if you want to delete the new widget, click no.

Next step is the CSS to make it display how we want it to look and where it’s positioned. Still on the Edit HTML page, scroll down just a little ways and you can paste this next code in anywhere above the b:skin which looks like this:

]]></b:skin>

Here’s all of the CSS code you need to paste in, just copy it right off this page and paste it into your template:

#HTML50 ul {
list-style:none;
text-align:center;
margin:10px 0 0 0;
padding:0;
}
#HTML50 ul li {
margin:0;
padding:0;
}
#HTML50 ul li a {
background: #ff6600;
color:#ffffff;
margin:0;
padding:5px 10px;
}
#HTML50 h2 {
display:none;
}
#HTML50 .quickedit img {
display:none;
}

What that code will do is center the button link above your post, the background will be orange (code ff6600) and the text will be white (ffffff). You’ll be able to edit that to match your template to any color you want. Ok we’re almost done, notice that nothing is showing above your posts yet, that part is next and it’s the easiest.

Final Step: Go to your Page Elements page and notice you now have a new widget named Random Posts and we need to put some Javascript in there. I had planned on displaying the code right here in this post for you to copy but I can’t seem to find a plugin that works for showing it without executing it. So you will have to download the zip file, unzip it and copy the code out of the Notepad text file. You can Download Here Copy all of the contents and paste it directly into the widget then Save.

Here’s an image of the widget you want to paste the code into:

Now your new Random Post button should be working but the colors probably don’t match so here’s how to fix that, here’s an image of the code from earlier in this post showing where to edit:

Here’s a screenshot of how it looks on the website with colors to match the theme:

If you try this and get it working, please let me know in the comments below! I want to hear about it. I hope you enjoyed this guide and thanks for reading!