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 😎

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


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 😎

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

46 thoughts on “Here’s My CHEATS Method For Adding Images to Blog Sidebars

  1. 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

  2. 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

Leave a Reply

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