How to link text and Image in Blogger posts?

I often link texts and images in posts so that readers may find it easy to jump from one portion of the post to another without leaving the post. Linking texts indeed make a post enjoyable for readers. These are more like anchor Tags added to texts. Further you can also link one image to another or you can link a text to an image or vice versa. For instance if you click the link below it will take you straight to the text That’s All! Try it –> Click Me Your Highness :)

 

 

 

How to Link texts Within Blogger Posts?

The method is far easy then you can imagine.

1.    First we need to enclose the text we want to link with a small code as shown below,

<a name="Text-Name">Desired Text</a>

 

In my case since I wanted to link That’s All! so I replaced  Text-Name with thatsall and Desired Text with  That’s All!   You can name it anything like 123 or xyz.

2.    Now we need to create a link that will take us straight to our desired text. Use this code,

<a href="#Text-Name">Jumping Text</a>

In my case I have replaced #Text-Name with #thatsall and Jumping Text with Click Me Your Highness :)

How To Link Images Within Blogger Posts?

Click this text –> Take me to the Image at Top

Such a link will link texts to images. So lets do it.

1.    First enclose the image with this code,

<a name="Image-Name"><img src="Image Link Goes Here"/></a>

Replace Image Link Goes Here with URL of image where it is saved.

2.    Now we need to create a text that will link the image. Use this code,

<a href="#Image-Name">Jumping Text</a>

Simply replace Jumping Text  with a text that will take you to the image.

In my case I have replaced Jumping Text with Take me to the Image at Top

How to link One Image To Another Image in Blogger Posts?

Here you just need to use an image instead of a Jumping text. For example click the jumping image below and it will take you to the image at top left,

Liked it? Now follow these easy steps,

1.   First enclose the landing image with this code,

<a name="Image-Name"><img src="Image Link Goes Here"/></a>

Replace Image Link Goes Here with the URL of your landing image.

2.  Now create a Jumping image using this code,

<a href="#Image-Name"><img src="Jumping Image Link Goes Here"/></a>

Just replace Jumping Image Link Goes Here with the Image URL of the jumping image.

 

 

That’s All!

 

Hope you will find it unique and useful. Let your readers jump within your posts. :) Take me Up!

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Mohammad 1/05/2011