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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO8xub7Gy2gsrQfdmWny0FJ0dISQ84KlSw3gjTniBPgbKV7I3__r6a9y0_XA-J8sate3oxNGwPUdmorN7NVRHEPPvm-jH415DKygw73mcvZER2T2cWfsUggilzCClfY2z_WbOjVtcctAY/s288/Smallest+Back+to+Top+Button.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: