Fun + Done. Download your website planning toolkit.

Fancy Up Your Blog: Add An Image To Your Sidebar & Make It Clickable

ImageInSidebar

NEW: Fancy Up Your Blog Series!

In the next few weeks I’ll be sharing some tips & tricks to make your blog just a bit fancier. Simple things to make you look a little more pro. Sign up in the black box above to make sure you don’t miss these easy-to-implement, blog-fancy-uppers!

This week: How to add an image in your sidebar (and make it clickable!):

Want to show your shining face to your visitors by putting a little About Me blurb in your sidebar? Have some resource box graphics you’d like to add to point your blog readers to your services? Want to add an advertisement for your colleagues program? In the below tutorial I’ll show you how to make it happen.

To add an image to your sidebar:

  • Upload the image to your media gallery. Check the size to make sure it’s not too big or you will need to readjust after.
  • Copy the url of the image (that you’ll see in the right hand side of the media gallery).
  • Paste it into the code below, replacing the red text with your image url.

<img src=”http://ImageLocationURL” /></a>

  • Copy and paste the full code into a text widget in your sidebar.

To make the image clickable:

  • Add a the link code to the beginning of the above code.
  • Replace the red text with the url for the place you want the clicker to go.

<a href=”http://LandingPageURL.com“><img src=”http://ImageLocationURL” /></a>

  • Copy and paste the full code into a text widget in your sidebar.

To make it open in a new page:

  • Add target=”_blank” to your code.

<a href=”http://LandingPageURL.com” target=”_blank”><img src=“http://ImageLocationURL” /></a>

What to see how it’s done? Watch the videos below!

Adding Image to Sidebar:

Making Image Clickable:

Have trouble? Any questions?

Want me to cover something specific in this Fancy Up Your Blog series?

Let me know in the comments below!

So go now and add an image to your sidebar then come back here and share the link in the comments below so we can all see how much fancier your blog looks!

Leah

LIKE THAT BLOG POST?
Get more straight to your inbox PLUS:

The Website Planning Guide + 5 Common Website Mistakes You Shouldn't Make!

{ 31 comments… add one }
  • Such a great tip, Leah! I love how you help us non-techy types with these things I *know* aren’t that hard but I just have no idea how to do them!

    • Leah Kalamakis

      Yeah- it’s not that they are hard- sometimes we just don’t even think about doing them!

  • Great tips, love your blog, just discovered it!

    • Leah Kalamakis

      Welcome- let me know how I can be of service!

  • Definitely need to bookmark this! Thanks Leah.

    • Leah Kalamakis

      Yes, come back when you need it!

  • Leah. I love this idea for a series. This is exactly what us non techy people need….just as Andrea said. Such a useful tip. Demystifies what is really a simple process.

    • Leah Kalamakis

      I got some more fun things in the works, thanks Silvia!

  • You make this seem so easy! Love how simple this is. :)

  • I love how simple you make this!! Thanks for sharing!! :-)

  • Great tips for a newbie!

  • Ah, such a simple, awesome thing to do! Thanks for making it so easy to follow!

    • Leah Kalamakis

      You’re welcome Marsha, thanks for stopping by!

  • Thank you Leah!! I Googled how to do this and you were the only one that made sense. Job well done. Keep up the great work.

  • Ming

    Thanks for the help! I finished my web-message for someone special :) I owe you a lot!

  • Kirsty

    Hi Leah,

    Am I doing something wrong? My image isn’t showing up when I copy and paste the entire edited link into my text gadget – I’m using blogger….

  • Hi Leah,
    thank you for walking us through this. Unfortunately I can’t get it to work. I only see a small image icon. Any ideas where I might be making a mistake?

    • Leah

      If there is a small icon it means that you have the wrong url for the image or the image isn’t uploaded to your WP media gallery. Hope you get it fixed!

  • very usefull…..
    thanks to share this

  • Thank you so much this worked perfectly!

  • Bingo! Thank you so much – very helpful :)

  • pkp

    You have write ~Upload the image to your media gallery~ but I could not find any media gallery at my blogger back end.Please guide me.

    • Leah

      Oh this is a tutorial for Wordpress not blogger, sorry!

  • Leah ~ Cha, Cha, Ching! This video just saved me about 50 bucks! I really wanted to have this done for my site and was going to have my VA do it. But I see how easy it is and I’m just going to do it now and go get a pedi with the money you saved me. Thanks for the great tips, codes and tutorials!

  • ananth ram

    Hello madam,
    i just want html code for clickable shares.. that means if anybody clicks on my image, through facebook/blogger etc.. it should be automatically shared with their timeline.. how to do this..

  • This didn’t work for me….
    Is this walkthrough not compatible with the Genesis theme? It didn’t work at all for me.

    Also, how’d you get that nice optin box at the bottom of your posts?

  • It’s better now, thanks.

  • Hi Leah, thank you for this helpful post. I did not find any widget of photos to be added to my sidebars, I used slider to do it instead. It slows down the loading. Now I know how to use code to do it. Thank you so much!

  • Thanks, this is what i’ve been looking for.

Leave a Comment

All the instructions she provided allowed me to do things on my own, and her willingness to help if I didn’t understand something. People take my business more serious as my website is much more professional.
Carlie Fitzpatrick
Leah Kalamakis
FUN + DONE
Download your effortless website planning toolkit!