How to Create a Blog Button or Widget for Your Website
These nine tips on how to create a blog button or widget for your website include three reasons why buttons or widgets are so important. You don’t need to have a fancy blog button – it’s better to have a clear, instantly recognizable one.
Before the tips, a quip about writing that applies to blogging:
“Write while the heat is in you,” said Henry David Thoreau. “The writer who postpones the recording of his thoughts uses an iron which has cooled to burn a hole with. He cannot inflame the minds of his audience.”
When you have an idea for your blog, book, or writing career – act on it now, fellow scribes! Don’t let your iron get cold, don’t let your inspiration die. If you want to create a blog button or widget (or write your book, or pitch an article, or make money freelance writing), then start now.
And, if you’re ready to develop your blog into something bigger and better, read ProBlogger: Secrets for Blogging Your Way to a Six-Figure Income. Learn how six-figure affiliate marketers make money blogging!
Okay, let’s dive into blog buttons or widgets for your WordPress website…
3 Reasons to Create a Blog Button or Widget
- A blog button is a personal brand that represents who you are at a glance (like Nike’s whoosh or lululemon’s curvy symbol).
- A blog button allows other bloggers to feature or advertise your blog on theirs – and you can barter for ad space more effectively if you have your own widget.
- A blog button establishes your presence as a successful, experienced writer or blogger a bit more firmly.
A blog button or widget is a powerful way to increase your blog readership and establish your online presence — whether or not you’re a writer.
How to Create a Blog Button or Widget in WordPress
There are many ways to skin a cat or create a widget – this is just what worked for me! If you have a better or different way, I welcome your thoughts below.
1. Create a logo or brand. I don’t have a logo as such, since I need words to describe each of my Quips & Tips blogs. I also didn’t put alot of thought into my widget style. That said, I believe that creating your own specific symbol is better than just using text or using a common icon that’s open for all to use (such as a typewriter or feather pen). You should probably use a symbol that’s not already on the internet. If you decide to use words, make sure your font is clean and easy to read.
2. Determine the size of your blog button or widget. I recommend 125×125 (that’s the size of my Quips & Tips buttons, and it’s a standard size for many widget ads). It’s not too big, and it’s not too little…it’s just right. You could also create different sizes for different purposes.
Do You Want to Make Money Writing?
Find fresh, creative jobs for beginning & experienced writers at
3. Use a drawing program to create your button or widget. I used my husband’s ArcView program to create my Quips & Tips buttons – you can use any drawing program, such as Corel. Consider using a words-only widget for now…you can always change it later, if your blog changes or you come up with something better.
4. Convert your picture to a .gif or .jpg file. Your drawing program may automatically save your blog button in a gif or jpg file. ArcView didn’t, so I used MicroSoft Paint to save it as a gif file.
5. Resize your blog button if necessary. The widget I created in ArcView wasn’t exactly 125×125, so I used a free online resizer tool to make it fit. I can’t remember which one I used – I can’t find it now, after 2 months! Crazy. But, you need only find a free online resize tool — there are tons out there.
6. Learn how to attach links to images. Here’s a valuable piece of code: <ahref=”linkURL”><img src=”ImageURL”>. To attach your blog button jpg to an actual website, you need only insert your link in the “linkURL” spot, and your jpg link in the ImageURL spot. If you have a WordPress blog, you get your ImageURL by uploading a picture to any blog post, and copying the URL link from there.
Note: you can copy and paste code, but don’t add to code in Word (use Notepad or something similar). The curly Word quotations and stuff don’t convert well to computer code.
7. Spread your blog button or widget around. Put your blog button on your own blog, and/or at the end of your posts (the code above should work in most html boxes). Barter with your friends: ask them to publish your blog button on their blog or website, and feature their widget on yours. If you guest post for someone, ask if they’ll publish your blog button in the post you wrote ( I haven’t thought of doing this until now). Be creative, fellow scribes!
8. Expect it to take longer than you think. I’ve created and am running five blogs. My biggest lesson? The more you expect things to go wrong and take long, the less frustration and anger you feel when they do! So, if you’re creating blog button or widget, be prepared to get confused and stuck. In How to Start a Writing Blog, I offer tips on dealing with blogging and website problems.
9. Remember: the answers are within reach! I ran into several snags while creating my widgets, and help came when I Googled my question. Working with widgets, blog buttons, computer code, WordPress and computers in general requires attention to detail and patience. I also found it extremely helpful to explain to my husband exactly what I needed to do and where I was having trouble. He has no experience with writing code, but his objective eyes and analytical thinking patterns were just what I needed!
If you want to build a better, bigger, more successful blog — and earn a few bucks at the same time — read 75 Ways to Make (More) Money Blogging.
Related to Your Search
If you have any questions, thoughts or tips on creating widgets or blog buttons for your blog, please comment below…