How to add image with link in footer

  • Author
    Posts
  • #2016046

    frodegoacom
    Member

    I manage to add image in footer. But need help to add external link (new page) to the images.
    Example: I add a twitter image and would like it linked to http://www.twitter.com/kant_norge

    The blog I need help with is kant.no.

    #2016133

    hallluke
    Member

    You can’t make an image into a link using CSS but luckily you don’t have to. If you’ve just put the image into a text widget then you can just wrap it with HTML anchor tags:

    <a href="http://www.twitter.com/kant_norge"><img src="http://goa1996.files.wordpress.com/2014/08/kant-twitter-footer-logo-120px.jpg"></a>

    #2016186

    frodegoacom
    Member

    Magic!!! Works like a dream! Thank you very much halluke.

    Any chance to make the twitter pop up in a new browser window too?

    #2016188

    hallluke
    Member

    If you add a target attribute you can set it to open in a new window/tab so that your visitors won’t navigate away from your site. The browser decides which of these it is so you don’t get a choice about that but the code to do this is:

    <a href="http://www.twitter.com/kant_norge" target="_blank"><img src="http://goa1996.files.wordpress.com/2014/08/kant-twitter-footer-logo-120px.jpg"></a>

    #2016196

    frodegoacom
    Member

    This is great! Thanks halluke! :D

    #2016198

    frodegoacom
    Member

    I am now trying to add Instagram image with link to http://www.instagram.com/kantnorge. The images are both 120px as the footer is 240px.

    I did this:
    <img src=”http://goa1996.files.wordpress.com/2014/08/kant-twitter-footer-logo-120px.jpg”><img src=”http://goa1996.files.wordpress.com/2014/08/kant-instagram-footer-logo-120px.jpg”>

    but they appear one on top and one beneth/under.
    What to do?

    #2016200

    hallluke
    Member

    The footer is 220px, not 240px so the second image gets pushed down below the first. Seeing as there is a lot of empty space surrounding both images the best solution would be to crop them to a smaller size and re-upload them then change the src attribute of the img element for each to the new image location in your media library.

    #2016201

    frodegoacom
    Member

    Perfect! :D
    Thank you very much halluke!

The topic ‘How to add image with link in footer’ is closed to new replies.