Previous Page Button: How create one easily
September 19th, 2008.
Why include a “Previous Page” button on your blog?
A return link contained in the content improves users’ experience of your blog, by improving navigation. (You can see it in action here: Core African Experiences. It’s a clean link, without a graphic for a button.)
This is created using a simple but fantastic script.
Why fantastic? It uses both PHP and Javascript, makeing it fail safe. Javascript only works if the users computer accepts script, and Php has it’s flaws.
So…
Step-by-step guide to creating a blog ‘previous page’ graphic:
Step 1 - Open your blog’s XHTML page
If your blog is freehosted, you might be of luck and not be able to follow this guide. UNLESS your blog is hosted by Blogger.com, where you can access your Xhtml in your Dashboard - click ‘Layout’ and the ‘Edit Html’ tab.
Step 2 - Scroll to the spot where you’d like to place the button
If this is your first time looking at HTML code, don’t panic. Every blog and website has exactly the same structure: <head> <body>. Locate your <body> tag. Your body generally follows this layout: <div=”header”> <div=”container/content”> and <div=”footer”>.
You’ll probably want to place your link near the top or bottom of your ‘container’ or ‘content’.
Step 3 - Copy and paste the following code into your blog
Once you’ve found the spot in your blog, copy and paste this code:
<?php $referer = $_SERVER['HTTP_REFERER'];
if (!$referer == ”) {
echo ‘<p><a href=”‘ . $referer . ‘” title=”Return to the previous page”>PLACE YOUR TEXT OR IMAGE HERE</a></p>’;
} else {
echo ‘<p><a href=”javascript:history.go(-1)” title=”Return to the previous page”>PLACE YOUR TEXT OR IMAGE HERE </a></p>’;
}
?>
Don’t be scared to play around. Copy/paste/delete until you find the right spot (just don’t delete anything other than this copied code, if you don’t know what you’re doing!).
Step 4 - Create a graphic for your link or get one free
Create your own button in a graphic program. Otherwise find a free, professional and fun looking buttons here: BittBox (this site offers safe downloads).
Either upload your graphic using FTP. Or if your blog is freehosted or you can’t access FTP, upload your picture to a free online album service like Flickr or Picasa.
Once it’s uploaded, right click on the image, select ‘Properties’ from the drop-down menu, and copy the URL for ‘Location’.
Paste the URL for your images in the code, replacing the words “PLACE YOUR TEXT OR IMAGE HERE” in Xhtml image tags with correct dimensions and title.
So it should look thus:
<?php $referer = $_SERVER['HTTP_REFERER'];
if (!$referer == ”) {
echo ‘<p><a href=”‘ . $referer . ‘” title=”Return to the previous page”><img src=”http://UrlForYourImageHere.com” height=”1px” width=”1px” alt=”Title for your button” /></a></p>’;
} else {
echo ‘<p><a href=”javascript:history.go(-1)” title=”Return to the previous page”><img src=”http://UrlForYourImageHere.com” height=”?px” width=”?px” alt=”Title for your button” /></a></p>’;
}
?>
Step 6 - Test your blog’s new ‘Previous Page’ button
Go to the view of your page now as visitors will see it, and test it. Then feel really smug with yourself!
And that’s it. Happy blogging and clicking!
Ciao for now,
Lilly
This article is written by: Lilly Mouse...I love communicating (through writing, art, dance, and any other way imaginable). Blogging and I have become very good friends in the last few years.
LillyMouse.com is my creation, and I'm so please to share it with you! Ciao for now, Lilly Read more from this authorWhat's Next?
Stumble this
Digg this
Php Program
Clicking on a category in this tree causes products from that category to be displayed on the main part of the page. Php Program
September 19th, 2008 9:54 pm