Cute Blue Flying Butterfly

Monday, May 23, 2011

"Back to Top Page" textlink and button...Very Easy!

>>The image & codes from below aren't mine >:3<<
>>Making use of Textlink:<<
This is simple, just add #top after your link...

1.Type in the command word, like "Back to Top, To Top, etc." or whatever
you like, it's up to you :>

2. Copy the page's link/ url

3. Highlight your command (Back to Top, To Top, etc.), then insert your 
page's link/ url, make sure to add  #top at the end

~*~E.g.: http://blogkawaiimiku.blogspot.com/2011/05/back-to-top-page-textlink-and.html#top

~*~Example of back to top textlink:~*~



>>Making use of button:<<
*The Image of the button*
1. Easy, just copy the url of the image
or
Make your own image,then, upload the image on photobucket, facebook, etc.
Afterwards, copy the image's url/ link

*The Code*
<a href="http://blogkawaiimiku.blogspot.com/2011/05/back-to-top-page-textlink-and.html#top">
<img src="http://c.dryicons.com/images/icon_sets/stickers_icon_set/png/128x128/up_arrow.png"></a>

This Code has 2 parts:

Hyperlink Reference:
<a href="http://blogkawaiimiku.blogspot.com/2011/05/back-to-top-page-textlink-and.html#top">
-The hyperlink reference is defined by href. This tells where the button will link to
------------------

Image Source:
<img src="http://c.dryicons.com/images/icon_sets/stickers_icon_set/png/128x128/up_arrow.png">
-The image source is defined by img src. This calls up the image from where it is
uploaded online.

-----------------
<a href="Page URL"><img src="Image URL"></a>
Make sure you end the code with  </a> ,'cuz that's how you close the code.
Change the words in blue color.

*Placing the button on your blog post*

1. Copy the button code...Go to "Edit Html"...
then paste the code at the end or any part of the blog post
you wanted to place it

~*~Example of Back To Top button~*~

"Click Home"
|
|
V

2 comments: