How to Easily Add Image and Text to Gadget in Blogger
January 14, 2017
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.