How to Create a Blog Button or Widget for Your Website

how to create a blog button widgetThese 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

  1. A blog button is a personal brand that represents who you are at a glance (like Nike’s whoosh or lululemon’s curvy symbol).
  2. 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.
  3. 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.

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

If you have any questions, thoughts or tips on creating widgets or blog buttons for your blog, please comment below…

Leave a Reply

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

14 thoughts on “How to Create a Blog Button or Widget for Your Website”

  1. Hello there, do you use WordPress as your web site program? I am new to blogging. I am looking to get started, and learned about Drupal. This was a useful article, thank you.

  2. I have been trying to learn how to make a button for some time. I have been paying someone to actually make these for me. I spent an hour and a half with another site trying to learn how to do this. Finally, I found your information. Thank-you so much for helping me to learn how to do this. With your help, I created a button for my Herbalife business. You can take a peek at
    Thank-you Thank-you Thank-you!

  3. Laurie Pawlik-Kienlen

    Hi Jenn,

    I haven’t tried a scrapbooking program to create a blog button. But, in the Arcview program, I make the button as high resolution as possible, in a size bitter than 125 x 125.

    Then, in, I reduce it to 125 x 125 pixels.

    I hope this helps…let me know how it goes!


  4. Does the resolution matter? I am creating a badge in a scrapbooking program and then importing it into Photoshop and it keeps asking me what resolution I want. I am trying to make it 125×125, but at the current resolution of 300 dpi it’s tiny, and when I downsize the resolution it looks terrible. Any suggestions? Thanks!

  5. Laurie Pawlik-Kienlen

    I’m glad these tips helped you create a button or widget for your blog. It can be tough, but it’s worth it.

  6. Thanks to your tips I was able to create a logo, but I created it in publisher. My next quest is to figure out the grab my button html code. Stay tuned…

  7. 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 PK´s last blog post ..Emotional Affairs on the Dr Phil Show =-.

  8. 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 =-.

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

    and replace it with your own link.

    And, take out my

    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 PK´s last blog post ..5 Tips for Inviting Guest Bloggers to Blog For You =-.

  10. 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 =-.

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

    .-= Vicky ´s last blog post ..On Babysitting and screaming babies =-.

  12. 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 =-.