While going through some blog designs, I came
across a really helpful and nice feature: an icon link to the top of the page
which floats in the bottom right-hand corner. As a blog reader, I found this
feature to be really useful as it enabled me to jump back to the top of the
page after reading a long article or browsing through many posts on the home
page. Take a look at the bottom right hand corner of this blog for an example
of this in action.
This customization is surprisingly easy to install.
You can
simply add the below given code required into an HTML/JavaScript widget in your
blog's layout or, if you use a Classic Blogger template, add this code directly
into your template code.
So in this post, I'll explain how to add an icon link to the top of your
blog with an example image and code for you to use this right away.
How this works
The icon is styled to appear in the bottom right-hand corner of the page
(no matter what screen resolution a visitor uses to access your blog), and can
be linked to target the top of the page using the "#" symbol.
The icon link used in this blog is small and unobtrusive; to help new
visitors understand how this can be used, I added title text to the image so
the "Back to Top" prompt will appear when the visitor hovers their
mouse over the link.
The code used to add a "Top of Page" icon link is constructed
as follows (I have forced line breaks for clarity):
<a
href="#"> <-- This link targets the top of
the page
<img
src="url-of-image"
<-- The URL of your icon
alt="alternative
text" <-- Alt text for accessibility
style="display:
none; <-- This allows the image to scroll
position:
fixed;<-- This fixes the image in place
bottom:
1px; <-- Makes the image appear 5px from the bottom
right:
1%;" /></a> <-- Makes the image appear that
distance from the right
How to install the "Top of Page" Icon Link
To use an icon link like the one used here at Blogger Buster, simply
copy all of the code below and paste this into an HTML/JavaScript widget in
your layout:
<!—techpro365 Scroll to top
widget Start--><script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'
type='text/javascript'></script><script
type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#noop-top").fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").click(function(){$("body,html").animate({scrollTop:0},800);return
false})});</script>
<a id='noop-top' style='display:
none; position: fixed; bottom: 1px; right:1%; cursor:pointer;font:12px
arial;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh29LJHHFs0eg5WEjd2N5hyXSa8AUcUTk-JmdajSgPdVE-cujRDELPr61wHvrGu5_lez4JNH82f35zI3J7MYnO4Xmy1lHlGGPJkxEBW7jikb23nXfpwg-MNs4PjU_xC5vsJ2fVWMHo9CDE/s1600/noops-scroll+up.png
' href=’#’ title=’Back to top’ alt='Scroll to top
widget @techpro365.blogspot.in ' width="67px"
height="67px"/></a><!—techpro365 Scroll to top widget
End-->
|
If you use a Classic Blogger template (with no drag
and drop widgets), you can paste this code into your blog's HTML code,
somewhere between the <body> and </body> tags
instead.
Customizing the Icon Link
If you would prefer to use a different image than the one used here,
simply replace the URL of the image with the URL of your preferred image
instead.
You can also reposition the icon to suit your design needs. For example,
if you wanted the icon to be flush with the bottom right corner (no space),
change the code explained above to read this instead:
position: fixed;
bottom: 0px;
right: 0px;
bottom: 0px;
right: 0px;
To position the icon further away from the right or bottom sides, simply
increase the pixel value to reflect this distance.
Some Examples of "Top of Page" Icon Links
You needn't be restricted to using an arrow for your
top of page link! All you have to do is to change the img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh29LJHHFs0eg5WEjd2N5hyXSa8AUcUTk-JmdajSgPdVE-cujRDELPr61wHvrGu5_lez4JNH82f35zI3J7MYnO4Xmy1lHlGGPJkxEBW7jikb23nXfpwg-MNs4PjU_xC5vsJ2fVWMHo9CDE/s1600/noops-scroll+up.png
' underlined code with the image url of the specific image you wish to use.
Some of the codes and images are provided here.
 |
 |
 |
 |
 |
 |
 |
.jpg)
.jpg)
