Now Reading
How to Add Jump to Top / Back to Top Image Or Link in Blogger Footer

How to Add Jump to Top / Back to Top Image Or Link in Blogger Footer

by AdminAugust 26, 2016

Most of the website and blog footer has a link or button image whose saying that back to top or jump to the top, This features of blog or website might give an excellent interface for your blog readers, I will explain to you how to add such functionality in your blog.


Before starting let’s have some basic knowledge about Anchor Tag – Intra-Document Linking
Intra-document linking is linking to a location on the same page.

To link to a location on the same page, you need two anchor tags.

Hyperlink Reference <a href=></a>
Name Tag <a name=></a>

This configuration is used for the common Back to Top link on HTML pages.

The code is:

<a href=”#destination_name“>Destination</a>

The half destination is preceded by the pound sign.

The matching Name Tag: Provides a location to jump to.

<a name=”destination_name“></a>

The <a name=> tag is placed at the desired location you wish to jump to. The name must match the hyperlink tag exactly, excluding the pound sign.

Steps to Add Jump to Top Link in blogger:

Step 1: Go to your blogger dashboard.
Step 2: Navigate to Layout > Edit HTML.
Step 3: Find this line of code:


And replace it with this code:

<body id=’top’>

Step 4: Add this code at the bottom(footer) of your code:

<a href=’#’>^ Back to Top ^</a>

Step 5: Save Template and Done.

How to Add Image Which Links Back to Top

In above steps I have explained how to add the link which leads to Back to Top, now let’s try to add Image instead of a link.

In  Step 4 above add code like this:

<a href=”#”> <img src=”Image_source_URL” alt=’Back to top’/> </a>

Your feedback is always appreciated. If you are facing any trouble then let me know. Feel free to drop your view in below comment box.

Please wait...
About The Author

Leave a Response