May 1, 2010 by Shirley Hardy
Comments (0)
back to top button, tutorial, blog
I spend probably too much time going back and forth from this site to Blogger.com. I have several blogs on that site and find little bits of treasure every now and then on the internet of things to add to my blogs. The most recent addition was a back to top button with an actual image. It looks great and works perfectly but for some strange reason I thought I’d try the same code out on the alienufosightingsvideo site. The button code, to my amazement actually works on this site but unfortunately the code itself needs tweaking a lot to get it to sit where it was designed to originally sit, on the far right hand, bottom corner of the page. It was designed (for Blogger’s use) to not move when you scroll down the page, so at any point you could click on it and go to the top of the page whenever it suits you.
But here on this site the button does not work like that. It is positioned at the far left, bottom corner of any page, including your profile page, or blog post, where you add the actual text/contents. And it does not stay fixed in position on the page either. It just sits at the bottom of all the content you have added and does nothing except take you back to the top of the page when you click on it. Changing this little bit of code is going to be a challenge for me as I have only experimented with a back to top button code just once, and that was to change the position of the button on the page itself. That part is fairly easy but getting the button to do what it is supposed to do, knowing that the code itself does not match this site’s code, is going to be hard to achieve. Not impossible, just hard.
I do enjoy a challenge and thinking about little problems like this makes me think harder about the solution. I just hope I can solve this problem because I absolutely hate scrolling back up a page and I’m sure so do your fingers too. Here are the steps to add this back to top button to your profile:
STEP 1 :
To add the code to your blog (or your profile or a page you created) simply display your blog page (or whichever page you choose to add it to) as the image below shows…
STEP 2 :
Click on the edit function at the bottom of the very first (or bottom of the list) blog post you have. (If you want to add it to the bottom of your profile page you must click on the "edit profile" function to display the "About me" section and the button code will need to go in that section.)
STEP 3 :
Once the edit page appears click on the HTML box just above where you add text or images to that section. You can’t miss it as it is in a row with other small square buttons but at the right hand side of those boxes.
STEP 4 :
Highlight the code below, right click on it and select "copy". You could do this step beforehand if you like, if you have a good memory or have opened a second web page. Then paste it onto a new line at the very bottom of the html code, in the HTML pop up box/page that appears. Now click on "update". The button image will be displayed to the far left at the bottom.
STEP 5 :Once your page/blog/profile reloads you can test the button if you like. It’s really that simple! Of course, if you are good at html code perhaps you could make some suggestions of your own, or add a tutorial of your own as a comment to this post. Scrolling back up a page is no longer a major issue.
The edit page will reappear…..click on "save" to save the changes you made to that page/blog/profile.
Here is the code if you would like to add it to your own profile, page or blog for now:
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://i34.tinypic.com/35lyjrb.gif" /></a>
I will update this post when I have found the solution to the button and will display the code as well. I’ll keep you posted. Don’t miss out on any of my updates.