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.
Cool trick, I must bookmark this!
ReplyDelete