How to link text and Image in Blogger posts?

Link-Text-Images 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,

images

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!

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 »

26 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Thanks For Sharing

    I Think this is Called Anchor Linking

    ReplyDelete
  2. @world4free
    you are right and the text is called anchor text.

    ReplyDelete
  3. Hey Anjani
    You came once online told Hi and gone...
    What happened??

    Have I told something wrong to you???

    ReplyDelete
  4. @sam
    no buddy
    electricity problem
    catch u later
    bye n take care

    ReplyDelete
  5. @ Mohammad
    congrats Mohammad your hard work appreciate by Google also.
    your blog got a brand new SITE LINKS from Google .
    i mailed you the screenshot check your mail.
    or search by just MYBLOGGER

    ReplyDelete
  6. oopss..
    I dnt see any Site Links..

    I searched MYBLOGGER on google.co.in

    ReplyDelete
  7. @sam
    oops my fault actually i starred the mbt result for "myblogger".
    search again with mybloggertrickS

    ReplyDelete
  8. here is a screenshot
    http://lh6.ggpht.com/_RuoYZ-r_EGs/TSRQ8YdIW3I/AAAAAAAACAU/RHFeWwG56Yo/mbt-whoa.PNG

    ReplyDelete
  9. Oh yea I see it now..
    But I think it was before too...
    Was it..???

    ReplyDelete
  10. I can tell you this is a great info you provided. Thanks!
    P.S. Make a post about customizing fonts in Blogger (Google fonts, fonts.com), I guess lot of people want to know. ALso explain how to customize borders, font weight and decoration etc, there are lot of people who need to know these.

    ReplyDelete
  11. like footnote trick...xixixi :D
    nice tips^^

    ReplyDelete
  12. @Myworld4free and @Anjani

    Both of you got it correctly. In SEO terms they call it anchor text. Search engines love them! :)

    @Anjani

    Thanks for it buddy but I got it 8 months back! :p I really appreciate your wishes thank you still for it.

    @Lucky Flaush
    Thank you for that great idea! I was thinking of it! :D

    @Sam and @beben
    Thank you buddies :)

    ReplyDelete
  13. Dear Mohamed, I want you to assist me here. I want to add a functioning horizontal menu bar to my blog. I know how to create the bar and make it appear on the hearder.

    But then, when I click the bars they dont take me anywhere. How can I add the content I need to each of the Menu bars I have created.

    I pray to hear from you thanks.

    ReplyDelete
  14. @Abdullahi Jamaa

    Salam Brother,

    I visited your blog and tested your navigation menu. They seem to work just ok. Guess you corrected it yourself. If not I think you must read this -> 30+ Horizontal Navigation Menus For Blogger!

    Ask me for any assistance on that post. Would be a pleasure helping you bro. :)

    ReplyDelete
  15. Hi Brother i have a question i want to ask .

    How to you create your Website Favicon.Chalta Firta i want to know so please help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me! help me!

    ReplyDelete
  16. @Admin
    I don't know about that Chalta Firta favicon but Mohammad will come and reply in some days because he is facing Network problems, so please be patient.. :)

    Thank You
    Samsexy98

    ReplyDelete
  17. I don't find useful right now may be later on. However thank for the information

    ReplyDelete
  18. Hey Mohammad, search engins drove me here while I was searching for a solution to a problem in blogger pages with anchor text, I couldn't make it work using
    Visit the Useful Tips Section,
    each time I tried it and publish my page blogger replace it with new link "http://www.blogger.com/page-edit.do?blogID= **** ;pageID= ****" , that's it , I hope you try it and.

    ReplyDelete
  19. For Link Anchoring in Blogger it seems to me you have to have a copy of your html on an editor (notepad for example) if you ever plan on editing the page.

    Blogger tends to strip the html supplied to the link info Anonymous 20 speaks about.

    I also noticed I needed to replace the " marks in notepad to make it work.

    I guess you layout the page the way you want it without the anchor html, and then copy that into notepad - add your anchor html to your document.

    Copy and paste to your page. Don't use compose mode.

    So, if you must make changes to the page later? Take your html saved on notepad - do the raw changes. Open up page - paste the revised code - and publish.

    lol I'm working on a link page as we speak, and I will come back if that doesn't work to let you know.

    ReplyDelete
  20. @Hannah

    Yep! Its one of those weird blogger deals where it strips the html, and puts its own link on.

    #1 I setup the page the way I wanted it.

    I copied the html into notepad.

    I added the anchor link html onto the notepad document where needed.

    I deleted my blogger set up (#1), but NOT in compose.

    Cut and Paste my revised code from notepad - previewed to make sure it was right.

    Hit publish and leave it alone. Don't use compose at all for this trick EVER.

    I saved my page in notepad, so if I want to revise it down the road? Do the revisions in notepad, and replace the html code to show the revisions.

    ReplyDelete
  21. Mohammad:

    Do you have to go thought all that if you do this process in Live Writer?

    Or is this just a strange blogger deal?

    ReplyDelete
  22. @hannah

    Please forgive me for the late reply and for putting you in so much trouble.
    The entire problem was with my WLW, It automatically converted all double quotes into quote style which is not recognized by the editor. I have updated all the codes which you can now easily and happily use. You do not need to follow those long steps, just copy the code and paste it in the HTML mode. Yes you are right codes should never be pasted in the compose mode.

    I really hope you problem solves now and I apologies for the inconvenience. The code will work perfect now. :)

    ReplyDelete
  23. Hello my question is i want in text linking to labels. like in text ads the link generated and redirect to another website but i want it will redirect to my website to related label search for that text please reply....
    http://www.geekstrack.com

    ReplyDelete