Here’s My CHEATS Method For Adding Images to Blog Sidebars

I’m frequently asked how to add images to blog sidebars — so I thought it would help to share my quick and easy cheats method.

So what do you need to know to do this?

To start with you need to understand that you need to:

  1. Write HTML code which links to the location of your image
  2. Add your HTML code to a text widget in your sidebar

Now that I’ve said blah blah HTML code twice…you’re probably thinking that I’ve made it too hard already.

It’s not but I first need to explain what is HTML code and then show you it’s really easy when you know my trick 8-)

What is HTML?

HTML is short for “Hyper Text Markup Language” which is a language used to tell a browser how to organise the layout of a web page it has downloaded from the Internet.  It influences if text is bold, italics, a heading, bullet points.

When you write a post or page inside your blog dashboard you don’t worry about how to write HTML because the Visual Editor does it for you. If you click on the HTML tab it shows the HTML code in your text.

Here’s the Trick!

As I said you need to use HTML but that doesn’t mean you can’t cheat with writing the HTML code.

Instead use your Visual Editor to do the work for you!

Cheating is as simple as:

1.  Open up a draft post in your blog dashboard
2.  Click on Add an Image to upload your image to the post

  • Ideally resize your image before uploading to 170 pixels wide because this generally the best width for most blog sidebars

Add an image icon

3.  Insert the title for your image (this displays when a reader hovers their mouse over the image)

4.  Change the link URL — if you want to link your image to a website

Uploading the image and adding the required info

5.  Click on Insert into Post

6.  If you want to add any text below your image — just write it!

Adding text below your image

7.  Now click on the HTML tab and copy all the HTML code.

Code the HTML code from the HTML tab

8.  Go to Appearance > Widgets in your blog dashboard

9.  Click on the desired Sidebar to expand (so you can add the widgets)

Please note: In new blogs sidebars in your dashboard are empty and adding widgets automatically removes the default Edublogs widgets

Expand your sidebar area

10.  Add a text widget to the desired sidebar by dragging it from the Available Widgets on the left into the Sidebar area on the right.

Adding a text widget to your sidebar

11.  The widget will automatically open — add a title to your widget, paste the HTML code and click Save

  • If you want to insert lines for better text spacing you need to add the HTML code <br/ > (means insert line break)

12.  When you check your blog you should now see it nicely displayed in your sidebar!

Image in blog sidebar

Enjoy!

P.S. Don’t share this tip with Larry Ferlazzo as he pays me in chocolate for each image I add to his blog sidebar 8-)

If you are enjoying reading this blog, please consider feed-icon32x32 Finding and Adding Creative Commons Images To Your   Blog PostsSubscribing For Free!

Sue Waters

Edublogs Support Manager @suewaters on Twitter

46 Responses

  1. Thanks for another great post Sue!
    I had not heard of this cheats method or thought of inserting an image like this before.
    I have been referring a lot of people to your guides lately so please keep up your great work!!
    Kathleen

    • Sue Waters says:

      @Kathleen McGeady, thanks Kathleen that is one of my cheat methods that I discovered to save myself time that I thought others would appreciate.

      Thanks for the nice words as always!

  2. I love it! I’ve no idea what the need for it would be yet on my class’ Health Studies blog but I’ll certainly file it away – no doubt the need will arise eventually. Or maybe I’ll ‘invent’ a need for pictures on our sidebar just so we can use your cool trick :)

  3. djainslie says:

    Perfect timing… I was just wondering how to link my images, and knew it was something simple I was missing… like to fill in the ‘link url’….
    oh yeah, and thanks for the other CHEAT information which I equally found informative.

  4. Kevin says:

    Thanks for the informative post. I was trying to link some sidebar images to another page on my site but couldn’t get it to work. I thought the link URL was for WordPress to link to, or find the image in the post.

    Your directions are very clear and now my sidebar image links work.

  5. susanna127 says:

    Thank you so much for this information- I’m still trying to figure out how to put up the widgets!!! It took me (and I know this is going to sound crazy…but it’s true!!)… 4 days to put up my header and get my background into my blog but I was determined to do it on my own… and I finally did it …but I’m so wiped out now that I can’t think straight… so I’m printing this out- and it will be my cheat sheet!! THANK U soooo much!!

  6. murcha says:

    When I first started blogging, I was desparate to learn how to add photos to the sidebar. It took me several years to work it out, and I cheated by putting the flickr widget on one of my blogs, anyway!
    The other thing I really wanted to learn was how to add a text link eg We had a ‘blogger of the week’ award each week last year and I wanted to link the student name to their blog from the heading on my sidebar. I did work it out, but I am not good at coding! Thanks for this post though and wished it had been written three years ago!

    • Sue Waters says:

      @murcha, almost any time I write a post or another ‘how-to’ in our Help & Support Manual I reflect the same things — I wish this type of information had been around when I first started blogging.

      But the good news is I’ve never stopped thinking that and always hope that the information I share helps others that follow in our foot steps.

  7. angliakids says:

    Hi Sue,
    I am sorry I am posting here this problem, but I could not find a place to post it on the correct forum.

    I have a problem with my blog, the sidebar is gone and also some images are not visible. I really hope you can help me with this issue since my students can not work the way they were doing it.

    Our blog: http://www.angliakids.edublogs.org

    Thanks a lot and best regards!
    Ana

    • Sue Waters says:

      @angliakids, Sorry for the delayed response — been a busy day.

      The issue with the theme is we have updated it and the new version defaults back to no sidebars. I’ve now corrected that by going to Appearance > Theme options and setting it to display a sidebar.

      Can you give me a link to a location (i.e. post or page) where images are missing so I can check for you?

    • Tyb says:

      Hi Mrs B, go to Presentation > Sidebar widgets, drag and drop the Sonific snoospgt’ widget to your sidebar and click on the box on the side of it (not that clear, I know).You’ll then see a link that takes you to sonific to start up an account with them.Hemmingway needs fixing up for widgets groher we’ll get onto it asap, thanks for reminding us!

  8. Jean-Claude says:

    Hi Sue
    That’s a really cool tip. I always wanted to have both my real picture and my avatar on my blog, but couldn’t figure out how.
    Thanks:-)
    JC

  9. lin m says:

    Thanks so much for this – I am a blogging newbie and am very grateful for any tips!!!!!!!!! My class are loving the blog and the parents too!

  10. alibull says:

    Thank you! I tried it as a screen shot and it worked; will the image be better if I saved it to iPhoto for example, and then did the code thing? I’m going to try it with my next badge!
    thanks again.

  11. Sue Waters says:

    @alibull For screenshots on my PC I use SnagIT. I don’t think saving it to iPhoto on a Mac will change quality and normally on my Mac I just upload the screenshot I’ve created.

  12. Thank you so much for this post! You are a life saver!

  13. Chris Hyde says:

    Thanks SO much for sharing this, Sue! It could not have been any easier. Here is what your wonderful post took me minutes to do:
    http://baconbytes.wordpress.com/
    Thanks again. :)
    Chris

  14. Sue Waters says:

    @Chris very nice! Glad my post helped! While I can write the HTML code this is so much faster and easier.

  15. Thanks for the “cheat” – worked like a charm, and solves a problem I didn’t even realize I was going to have until I also had a solution! Cheers!

  16. Sue Waters says:

    @David B. Cohen Absolutely no problem and glad my instructions helped. Congratulations on your Edublog Awards nominations!

  17. This works so well….and I think my students will be thrilled to see the badge appearing in the class blog. Thanks for your clear directions and fantastic screenshots.

    marsha ratzel

  18. Carson says:

    WoW Thank you so much this helped me sooooo much!

  19. Adriana says:

    Thanks a lot! This trick made it all so easy.

  20. Emma says:

    Thank you sooooooo much. The amount of time I spent trying to squeeze an image into my blog avatar widget… XD

  21. Carolyn says:

    Thanks for every other magnificent article. Where else
    may anyone get that type of info in such a perfect method of writing?
    I have a presentation next week, and I am at the search for such info.

    Feel free to surf to my site bangla song mila

  22. Jodi says:

    Heya! I realize this is somewhat off-topic but I needed to ask.

    Does building a well-established blog such as yours require a
    massive amount work? I am completely new to
    running a blog however I do write in my journal everyday.
    I’d like to start a blog so I will be able to share my personal experience and thoughts online. Please let me know if you have any suggestions or tips for brand new aspiring bloggers. Appreciate it!
    Take a look at my website; learn bar chords

  23. Amanda says:

    I can’t tell you what this did to keep me from pulling my hair out. Thank YOU SO MUCH!

  24. Alease says:

    Thanks for the awesome tip! A lot easier than I thougt.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe

Follow this blog

Get every new post delivered right to your inbox.