Easy Way to Add Images to Your Sidebar

by Alli

You all know I hate coding with a purple passion!  I avoid it if at all possible because it seems I always get it wrong and have to keep on trying to make sense of it.

Recently I had to insert an image into my sidebar and I didn’t have a code.  I tried to follow a tutorial on youtube, but it just never worked.  Then I found an easy way to add images to my sidebar and I had to share!  It’s almost too easy!  You’re gonna love this!

Easy Way to Add Images to Sidebar

Note:  I’m going to walk you all the way through the easy steps as if you are a brand new blogger.

1.  Forget coding!  Pretend you are drafting a new post.  Click add new and give that pretend post a title such as photo code generator.  (Humor me here)

Easy way to add image to your sidebar - no coding required!

2.  Click “add media” to upload your image (the one you want in your sidebar) to your post just like you would do if you were adding an image to your real post.

Upload Photos to Your Sidebar

Make sure it fits in your sidebar (usually around 200-300 pixels wide).  If you forgot to resize it, you can do it in the media editor.

Relax, you’re not going to actually publish this post.  But keep it around for the next time you need to add images to your sidebar.

Do you want to make the image clickable?

After you add your image, click the link icon and add the link you want your readers to go to when they click the pic.

Easy Way to Add Clickable Images to Your Sidebar

3.  Save draft and click on text.

There’s your code, baby!  Copy the code.

Add Images to Sidebar

4.  Hover over appearances on your dashboard and click on widgets.

Sidebar Images - no coding required!

5.  Paste the text code you copied from your post into a text box on your sidebar.

Don’t forget to save it.  That’s it!  Visit your site, refresh your browser and check out the new image in your sidebar. Ta-Da!

Don’t forget to click it! Wasn’t that easy?

Insert Clickable Images in Your Sidebar

 Special Note:  This should work if you’re on Blogger, too!

If you missed the easiest way to install rich pins with no coding required, click here!




Michelle September 29, 2014 - 8:40 am

Such a great & simple tutorial!!!!! Definitely helpful for bloggers new and old! Thanks so much for pulling this together, Alli!

Alli September 29, 2014 - 8:44 am

Anytime I find something that works well, I have to share. 🙂

Shirley Wood September 29, 2014 - 9:34 am

Yep, that is too easy! And I needed that too. I abandoned the process last week and made a mental note to get back on that horse this week. Your posts just made my day. Thanks. Pinned it to my Blogging Board.

Alli September 29, 2014 - 10:23 am

Thanks, Shirley! When I discover an easier way to do something pertaining to blogging, especially the tech side of it, I have to share!

aimee fauci September 29, 2014 - 9:42 am

Genius. So many things like this… scare me but you’ve made it seem as if my 9 yr old can do it! Thanks… pinning and stumbling

Alli September 29, 2014 - 10:21 am

If there’s an easier way to do anything, I’m all over it!

Heather September 29, 2014 - 9:42 am

This is a fabulous tutorial for those who are new to blogging. I am not big on the whole coding thing so it’s great that there is a way to have wordpress generate the code for you so you can easily add stuff to the sidebar. Thanks.

Alli September 29, 2014 - 10:21 am

I’m sure all the old timers know all of this, but when I realized that I could easily upload pics to my sidebar, I just had to share. 🙂

Logan Can September 29, 2014 - 9:56 am

This is so cool! I wonder if it can be done on Blogger? I doubt it, but I’ve played with the idea of switching to WP for a while, so maybe soon! 🙂

Alli September 29, 2014 - 10:20 am

If you have a text editor, it can be done. Try it and let me know.

Paris (My Big Fat Happy Life) September 29, 2014 - 9:58 am

Awesome! Thank you! This makes it so much more simple. I am going to try your way for the Southern Fall-tastic image.

Alli September 29, 2014 - 10:18 am

It has simplified my blogging life, Paris! 🙂

Louida September 29, 2014 - 10:54 am

Thanks for a great tutorial Alli! I’m on Blogger so this may not work for me.

Alli September 29, 2014 - 11:10 am

Yes, it should, Louida! After saving the photo, click the HTML tab. You should see the code then!

Kristin @MOMentous Moms September 29, 2014 - 11:12 am

This is so smart!! I cannot believe its that easy! Thank you for this. I am bookmarking for later and pinning!!!

Alli September 29, 2014 - 11:55 am

You’re welcome. When I find easy, I can’t keep it to myself! 🙂

Renee @ Renew Your Space September 29, 2014 - 12:02 pm

Pure Genius! Thank you for this info – I have always been pretty good with Blog DIY but there are certain coding that I just can’t wrap my head around. It’s always those “why didn’t I think of that” moments, but thank goodness there are friends around who point these things out 🙂 Thanks again!

Ashley @ 3 Little Greenwoods September 29, 2014 - 1:08 pm

Whoa. I had no idea you could do that! Awesome tip! {pinning and sharing}
~ Ashley

Anna @ Northern Homestead September 29, 2014 - 2:23 pm

Yep, that’s exactly the way I do it too. However it is better to resize images before uploading, otherwise big images slow down a site. Resizing in media editor does not help for the time an image loads.

Reginia Cordell September 29, 2014 - 2:45 pm

I love a straight forward, 1, 2, 3, tutorial. This is exactly what I need to store in my design folder. Great post Alli.

Zan September 29, 2014 - 3:09 pm

Alli…………….You have got to be kidding me!!!!!!!!!!! This thing is so easy – I always took the hard way out! I think I am going to go add some stuff right now!!!!

Alli September 29, 2014 - 6:52 pm

Yep, easy peasy! 🙂

Adelina Priddis September 29, 2014 - 4:04 pm

Oh my gosh! you’ve got to be kidding me!!!! I just read this with my jaw dropping at how hard I’ve been making it!!!!

Alli September 29, 2014 - 6:52 pm

Trust me, I feel your pain! I was about to pull my hair out before I realized this!

Lorelai @ Life With Lorelai September 29, 2014 - 6:28 pm

This is an awesome tutorial,,, and a great idea! 🙂 Pinning to my Blogging Tips board.

Life With Lorelai

Ricki @ The Questionable Homesteader September 29, 2014 - 7:34 pm

I love using this technique. I don’t know how to put images on my side bar without doing this. My html skills are even less impressive than yours.

Thanks for the great post

Alli September 30, 2014 - 6:56 am

I’ve tried to use several codes from watching Youtube videos, but they just never work for me no matter how careful I am to use the right spaces and those dreadful >< open and close things.

Jessica September 29, 2014 - 7:44 pm

So so helpful! Thank you for sharing this!

Madaline September 30, 2014 - 2:32 am

OMG. This is one of those moments where I think why didn’t I think of that?! That’s genius to enter it into a post and then steal the text and use it in the widget. Isn’t it crazy how sometimes we skip over the simplest things and try to make them difficult?

Alli September 30, 2014 - 6:53 am

I know! All this time I was almost pulling my hair out when code would not work the way I wanted it to. 🙂

Madison | Wetherills Say I Do September 30, 2014 - 1:42 pm

This is so helpful! This is the same way that I add images in too 🙂 I know how to do the code now that I have copied it so many times but it’s nice to be able to have a shortcut. Also, you can change the a href= to be the link that you have linked under that image, instead of it hyperlinking to your image upload. Hopefully that makes sense!

Alli September 30, 2014 - 2:32 pm

It’s all geek, I mean, code to me. 🙂 I admire you computer peeps!

LaShawn October 1, 2014 - 7:13 pm

OMG you have no idea how helpful this is!!! NO IDEA!!! Thank you!!!

http://fallfashion2014.com/ October 5, 2014 - 7:01 am

I think this is one of the most vital info for
me. And i am glad reading your article. But want
to remark on some general things, The website style is perfect,
the articles is really great : D. Good job, cheers


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.