How to Easily Add Image and Text to Gadget in Blogger

January 14, 2017

Most of us know how to create posts and add images in Blogger. But getting our sidebar to look just so sometimes is a pain. Let's learn how to make them pop, by adding images to our sidebar, footer and wherever else we'd like.

This has been one of my greatest challenge over the past year or so.

To tell you the truth, now I have it figured out, I'm a bit embarrassed.

See, Blogger has a gadget for text, one for image and one for HTML code. But, I can't write code. Well, couldn't. 

Seeing all those fabulously designed lady boss blogs with only a beautiful image inviting me not only to click through but also wondering by what magic they got it done. Knowing full well too, that most were done by web and graphic designers and some really savvy ones do it themselves.

But that didn't make me wonder and long for it any less.


HTML is short for HyperText Markup Language.     It's a language used to tell your browser how to organize the layout of a web page you are browsing on the internet.

What is HTML?

The trick about this is writing HTML code. 

Now, don't stop reading and stop tearing out your hair.   

Believe it or not, whenever you make a blog post, you are doing so in code. The only thing is, it's being done on the back end of your blog.

HTML is short for HyperText Markup Language.   

It's a language used to tell your browser how to organize the layout of a web page you are browsing on the internet.

You can learn more about HTML here.

The best thing about this cheat is, it's not only for the Blogger platform but can be used on other platforms as well.

When you've tried it, let me know what platform you're using ok.

Quick Pro-tip before we begin.

It's a good idea to back up your blog before you make any changes to its code. With Blogger, I created a blog for testing purposes only. For instance, I use it to test my drop down menu (which I'm still working on), adding some widgets before I add them to my main blog, and also storing gadgets before I roll them out. This reduces my anxiety level about breaking my blog, and actually not breaking it by fiddling with it. 

For this tutorial, I'm using Blogger to show how I created my About Me gadget.

Here's How!

1. Create a New Post

Open up a New Post in your blog editor in your dashboard.

At NO point are you to publish this 'article'.

2. Add Image

Click on Insert Image icon to upload your image to the post. 

As most blog sidebars can accommodate a 170 pixels wide image, it's best to resize your image before uploading. 

Or, you can do what I did in Blogger. I selected Small for my image display size. 

By chance, if you're only making a widget for an image chose the Image gadget and select shrink your image to 300 pixels.   

Pro-tip

Remember to optimize your images so they do not cause your blog to lag when loading as this can cause your visitors to bounce before they read a single word. I use TinyPNG to compress my images. 

3. Insert Title

Insert a Title for your image. 

This will be shown when a reader hovers over your image. To do this, Click on the image then chose Properties and enter the Title in the Title field. In this case, it's my name.

4. Change Link URL - optional and can be ignored.

If you want to link your image to a website or blog change the link to that site's or blog's link instead of the image URL.

5. Add to Post

Click OK and hit your Save button.

6. Insert text

Add your Text as I did for my About Me widget.

7. Highlight and Copy for Pasting

Now, Click on the HTML tab and highlight and copy the code.

8. Save and Close

Now click Save then Close on your draft post.

9. Add to Layout

Click on Layout on the lower left of your Blogger dashboard - below Pages and above Template.

10. Select your Location

Scroll to the right and locate your Sidebar or anywhere else for that matter where you want to add the gadget, for example, the footer area.

11. Add Gadget

Once you've selected your area, go ahead and click Add a Gadget.

12. Blogger Gadget Window

This will open Blogger Gadget window.  Here you're to select HTML/JavaScript

It will automatically load at the top of your sidebar.

13. Edit Gadget

Next, select Edit

14. Insert Code

Clicking Edit will open the text box for you to paste your code. Paste your code and add a Title if warranted.
    
The best thing about this gadget is that once the HTML code is added, everything reverts to English.

15. Edit your Gadget

Your gadget is now back to English so adjust for spacing and alignment, especially if text was added as in the case of an About Me widget.

16. Save

Then click Save.

17. Adjust Layout

Drag and Drop your gadget until you are satisfied with its appearance. Remember, your design principles.

18. Final Changes

Preview your blog and make your final changes, save the arrangement and view your blog for your final product. 
    
Voila! You're done!

Here's looking at you. The world's newest HTML coder.

Pro-tip

When you make changes to the draft post, you need to re-copy, re-paste and make all necessary readjustments to the code in your widget for your updates to take effect and be live on your blog.

Widgets I Made

I used this method to make my existing About Me and Tech Tips widgets. 

About Me 

I made Continue reading clickable by adding the link of my About Me page just as I would for any other link being added to a post or page. 

Tech Tips

For this, when I uploaded the image, I left it as is: no resizing. However, I added the URL for the post to the image

Go ahead and check them out. 

New Mantra

The New Mantra widget was made with the Blogger built in Image gadget.  When I inserted the image as is without resizing, it was monstrous. So I went back and selected Shrink to Fit

Also, you have to add a Title or it will not save. Initially, I didn't add a title and sat about for 2 minutes hitting the save button and blaming my middling internet speed before I realized.

Other Uses

You can use this to advertise your products like books, courses, sponsored ads, email subscription or whatever you like. Be creative and think outside of the box. But most of all, have fun.


Most of us know how to create posts and add images in Blogger. But getting our sidebar to look just so sometimes is a pain. Let's learn how to make them pop, by adding images to our sidebar, footer and wherever else we'd like.

Conclusion

Making your blog design sleek and beautiful is not as hard and frustrating when you know what to do, have who to do it and money to spend. 

Taking a bit of time to learn a few things will make you more rounded, employable and better able to assess your future graphic designer's work. 

Over to You

Are you using Blogger? I'd love to hear your tips, tricks, and cheats for sprucing up your design.


You Might Also Like

0 comments

Join Me on Facebook

Recent Tweets

Subscribe