9 Tips for Creating a Blog Button or Widget in WordPress
My three Quips and Tips blogs are linked by blog buttons or widgets; here are nine tips for creating your own blog button or widget on WordPress – plus three reasons why a widget could be important for your blog!
Before the tips, a quip about writing that totally 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), then start now! Okay, here are nine tips for creating a blog button or widget on WordPress…
3 Benefits of 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 (read 6 Ways to Improve Your Blog Karma to see how it works for me).
- A blog button establishes your presence as a successful writer or blogger a bit more firmly.
Generally, a blog button or widget is a powerful way to increase your blog readership and establish your online writer’s platform.
9 Tips for Creating 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.
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 Starting a New Blog for Freelance Writers, 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 have any questions, thoughts or tips on creating widgets or blog buttons for your blog, please comment below…
Want to make your blog "sticky", so visitors stay longer? Try this beta "Click and Stick" program -- it's free!
But before you can entice visitors to stick to your blog, you need to learn a bit of search engine optimization. Scribe SEO offers information for web writers, bloggers, and affiliate marketers.
And, to find more freelance writing and editing jobs, consider joining GoFreelance.
I interviewed a writer just...
Laurie PK | Jul 1, 2009 | Reply
I just learned how to make the widget open up in a new window — so when you install a blog button and a reader clicks on it, your own blog window still stays open.
Simply include “target=”_blank” in your code. So, it’d be:
ahref=”linkURL/”target=”_blank” img src=”ImageURL”
It’s tricky because you have to pay close attention to the details — but it’s worth it!
Laurie PK´s last blog ..8 Tips for Breaking Bad Writing Habits
Vicky | Jul 13, 2009 | Reply
Hi Laurie!
I was exactly googling today about how to set up a blog button for me, as I have 3 blogs. I am not good with designs but at least one interesting I’ve managed to make, for my blog in Portuguese. But now, regarding HTML code, I am struggling with it. I’ve follow your instructions above, and even the suggestion on how to open up in a new window. But somehow it is not working at all. Any ideas as to why is it not working?
PS. – I’m clueless about HTML.
By the way, I was reading your blog, about blog karma, and I intuitively already do a lot of those. I’m loving this blog world, and expect to write even more in the future.
Thanks!
Vicky ´s last blog post ..On Babysitting and screaming babies
Vicky | Jul 13, 2009 | Reply
By the way, as I am not good with drawings, I’ve made my buttons with my husband’s pictures on Power Point. Once the slide is ready, save as a picture in jpeg or gif and it is ready. My problems started only when I tried to associate it with a html code.
Vicky´s last blog post ..On Babysitting and screaming babies
Laurie PK | Jul 13, 2009 | Reply
Hi Vicky,
Welcome to Quips & Tips, Vicky! I’m glad you’re here, and that the post about blog karma resonated with you.
I hope I can help with your problem installing your widget. Unfotunately, what I’ve shared here is pretty much all I know about creating a blog button — but I also know that even the simplest steps can get very complicated, because html is SO detail oriented. Every last period counts!
Here’s what I suggest you do: use the bit of code I’ve pasted below as your template (I know it works, because it’s my Quips & Tips for Achieving Your Goals widget, with a direct link to that website). Copy and paste it into Notepad.
Then, take out my
http://theadventurouswriter.com/blog/
and replace it with your own link.
And, take out my
http://theadventurouswriter.com/blogwriting/wp-content/uploads/2009/05/quipsgoals.gif
and replace it with the link to where you’ve uploaded your button or photo. If you have a WordPress blog, you just upload it to any post (without inserting it), then copy and paste the image’s url into the spot above.
If this doesn’t work, I suggest Googling your exact problem. That’s how I solved all my glitches — and like I say above, creating your own blog button or widget is tricky business for newbies! I was very frustrated and it took me a long time, but I did it……and you can, too.
You could also post your exact problem here, and I might recognize it and be able to help.
Let me know how it works for you, Vicky.
Good luck — and don’t give up.
Laurie
Laurie PK´s last blog post ..5 Tips for Inviting Guest Bloggers to Blog For You
Vicky | Jul 13, 2009 | Reply
Many thanks for all your trouble! I did that, exactly as you said. As it didn’t work I started to try with codes from other buttons I previously pasted in my blog. And nothing. I doens’t acuse any error, it simply stays blank. I’ve renamed my pictures – in case the problem were with the odd charaters in them. Nothing.
I use blogger and the default program to save pictures is Picasa. Maybe if I try to save my picture in a different program. I will try that.
I will keep trying and if I get it I will post back.
Vicky´s last blog post ..On Babysitting and screaming babies
Laurie PK | Jul 14, 2009 | Reply
Ah, see, what I wrote above is for WordPress. Blogger is a different can of worms, which I haven’t had experience opening.
Still — Google your exact problem (eg, “creating or uploading blog buttons in Blogger”), and I bet you’ll find the solution. I’ve heard Blogger is easier than WordPress, and I know other people have struggled with your exact problem.
I’ll insert the word “WordPress” in my post above, so readers know that this is about creating a blog widget specifically in WordPress.
Good luck — and post the link here when you get it done! I’d love to see it.
Laurie
Laurie PK´s last blog post ..Emotional Affairs on the Dr Phil Show