This blog is dedicated to my Zazzle shop, Pam's Designs and my Squidoo lenses,
Best Business Cards Online and Best Wedding Invitations

In this blog, I will go over my experiences in creating my Zazzle store and my Squidoo Lenses.
I will also post some of my favourite design pieces.

Wednesday, June 22, 2011

HTML for Back to Top Button

A fancy back to top button; I've been meaning to do this for awhile now. It took a little trial and error, but here it is.


Here's how I did it.

1st - I drew the button with text in GIMP, a free photo editing program.  It's an excellent program and very user friendly.

2nd - I opened an account with Picasa, a free photo hosting site by Google.  I discovered this while blogging, as my pictures through my blog are automatically hosted through this site.

3rd - I right clicked on the picture that I uploaded and copied the link location.

4th, I pasted the link location into the following html code inbetween the quotation marks after img src="LINK PASTED HERE."  Here is the code:

<p align="center"><a href="#"><img src="https://lh4.googleusercontent.com/-iEMXTcyx1vc/TgIIncpQQBI/AAAAAAAAACM/Wsnb2QPhKI4/s288/Smallest%2BBack%2Bto%2BTop%2BButton.png" /></a></p>

The <p align="center" part, obviously centers it.  The <a href="#"> part, makes you go to the top when you click on the button.  The <img src="____________" part, is the location of my uploaded image.  And all the code at the end (/></a></p>) finishes the code.  It's a pattern.  Whatever is at the beginning, must have a closing, matching code at the end...<a> - beginning....</a> - end.  Basically, the (/) signifies the end.  The p is for a paragraph and the a href is for links.  Where the img src is located, I could simply put words and it would link the words when people click on it.

Here is the completed lens with the back to top button...  Top Masculine Business Cards.

1 comment: