Blogging Actually / DIY & Tutorials / Motherhood/Life

DIY Friday: How to… Make Your Own Blog Button

The word button has been passed, grabbed and swapped around lately at WFBC. Our Facebook Group for WordPress fashion and beauty bloggers.

In my pre-blogging days, I wouldn’t have had a clue if someone asked me, “Imma grab your button”. You wot??? That would be my reply. Any who, now that blogging has educated me a little,  I realized that blog buttons are actually cool! And it gets even cooler when you get yours grabbed! It’s grab-a-button frenzy out there.

So what’s the big button idea?

If businesswo/men have their business cards to hand out, us bloggers have our blog buttons to pass around, too. Well, unless you’re Jules at GoJulesGo (an amazing blog mentor), who now has her very own business card to hand around. I love the pic and those ‘stache. I even told her that ‘it’s somewhat hypnotic, Jules.’

And this isn’t just a mere advertising tool for your blog – it also nurtures:

  • the ‘give and take relationship’. (between the swappers)
  • the I-want-to-get-to-know-you-more, because we’re swap buddies.
  • the nice feeling when ‘oh yeah, now I can see my button on yours, thank you.(blog).

Don’t you agree?

So when to make one? And the HOW…

You can make it as soon as possible, or later. The choice is yours. You can make a wholelotta buttons too, or stick with one, like a ‘trade mark’ button. Some, if not many, would probably like the button to go well with their banner.  But the question now is, do we really stick to just one banner in our blogging lifetime? Well, as long as you don’t mind that your banner now looks different but your button still looks like the old banner, then you’re good to go.

Things you might want to know and remember:

  • Size matters. So make sure to keep your button as sidebar-friendly as much as possible.
  • The rule of thumb is 125×125 pixels – standard size. Although I go for 150×150 pixels to give myself a little more space.
  • Upon inspection, most sidebars are only 200 pixels wide, if not smaller.

Please consider these things when making one. Why am I saying this? Because I’m guilty 😦 (hangs head in shame). The first ever blog button I made, I got carried away and made it nice & BIG. Not good.  (WFBC guys, I know how to fix it, so let me know if you’re having issues, please.)

So as far as button-making goes, in my opinion, it should carry the essence of your blog. And should give out that feeling to others of  ‘I want to click this button because I wanna know who’s behind it’.

Make the colors, font styles, backgrounds or images work together. 

If you’ve not used Pixlr Express yet from that little tutorial I did few weeks ago, then let me help break you in to this wonderful editing site. It’s FREE and easy to use. The more you use it, the EASIER it gets.  Others have tried it already. You’d be surprised.

So this would only be a short tutorial with a few screenshots. For more details on how to use this site, please take a moment to read the previous tutorial, otherwise let’s enjoy the button-making ride.

P.S. Prepare the images or clip-arts you might want to include, plus lots of patience and determination – it’ll come handy. ;-D

NOTE: You have a few options of how to import your image or clip-art to Pixlr Express. If the image is already saved, you can click Browse. Or if you’ve seen an image on a website, you can just copy and paste the image url on the URL tab, without saving it first, whichever suits you best.

If you go via Collage and import your image later – this is fine, too. The screenshots below would show you the resizing of the blank canvas. To Resize and/or Auto Fix (which helps brighten up the canvas), just go to Adjustment and you’ll see these features.

Adding and positioning your image. (I’ve just put the two screenshots together)

Bringing it to life, with Font styles and Color.

And once you’re happy with it – click Apply to save any actions you’ve made, and then Save. And you’re DONE!

Just some of the sample buttons I made for this tutorial.

All images used taken from Google Images.

Useful codes:

And for those that I’ve seen having issues withe html code – here’s a simple code you might want to use when posting a Let’s Swap Button post.

<div align=”center”>
<a href=”YOUR URL SITE ADDRESS/” target=”_blank”><img src=”YOUR IMAGE URL HERE“></a></div>

When another blogger will copy and paste this on to the Text widget – the button will show up centered.

If you would rather not have the button centered on your sidebar, just omit the following from the above code.

<div align=”center”>


It’s that simple.

And for those wanting a grab box for their sidebar – simply go to generate it from there. Some of the WFBC bloggers are already using this site.

Be creative and make few samples before settling for one. There’s no deadline for making one. Make that button ‘your own’. After all, the more the button ‘stands out’, the more it’s going to get passed and clicked around.

One press of your button could mean a new follower for you.

Good luck!


Have you grabbed my button yet? If not, check here.


Related articles


53 thoughts on “DIY Friday: How to… Make Your Own Blog Button

  1. This is totally awesome, AJ’s Mom! 🙂 What’s funny to me is that you gave me this kick-tail shout-out, but you actually showed ME how to do something, LOL I am so loving your new name/look, etc.

    • Thanks Jules! You know I love you much… 🙂 I just thought that your business card is so worth a mention and your blog! And well, this luring technique kinda works right now to have you in my blog . hahah, just kidding.

  2. Pingback: DIY Monday: How to…5 Easy Steps To Make Your Own Blog Header! Give it a go! « Sweetjellybean/Blogging, with Love.

              • haha thank you! I like how adorable all of yours are, but they have a nice synergy together. Like I still know it’s you, but you have all these diff. looks. its awesome! xx couldnt have done my buttons without you btw so thank you very much! x

                • You’re welcome Tianna. I love it when people take their time to thank others even for little things. 🙂 It definitely makes a difference to how I feel. Not because I want to be pampered or something like that. But you know, I had I guess one or two, who just didn’t bother and it kinda sucks. LOL. Little things like this stay for a while. But I think now I’ve learned a little that although we’re in a virtual world blogging, the people are still going to be the same wherever they maybe.
                  Psst.. I used Pixlr Editor for my buttons, they took time since I pondered on the design but in the end got there. I’m overhauling my blog a little so you might see some few changes. Would you like some social media icons to go together with your blog? 😉

                  • Of course; I mean you took time out of your day to help me so why wouldn’t I thank you, you know? People who aren’t polite just because we’re on the web, they just need to step back and realize we’re still people behind the web pages you know? Yeah I used Pixlr for my button too! I’m thinking I might make another one too 🙂 I would love some social media icons please! 😀 Also looking forward to seeing the awesome blog changes you make 🙂

                    • I really enjoyed doing these tutorials, it was hard putting them together since I’m also a beginner myself but I think it paid off in the end. Couldn’t have spread the word more if it weren’t for WordPress featuring it though. Oh, I thought you made yours via Pixlr Express? Not Editor. Ok, I’ll see what I can pull up for the icons, but unfortunately it won’t be soon 😦 Hope that’s ok. And what social networks are you on apart from the ones I know?

                    • Yeah that’s really cool and the tutorials were super helpful so TY! 🙂 Oh right yes I did use Express. I just realized there’s a difference lol. No problem. If not, I can figure it out so no worries. I’m a part of FB, Twitter, Bloglovin, Pinterest. I think that’s it lol.

  3. Pingback: A button a day sends the readers your way! | Creativity Arise!

  4. Pingback: Blog Buttons Craze « sexnmakeupdiaries

  5. Pingback: I’ve been hit… by the button mania! Wanna snatch mine? « Sweetjellybean – Fun & Sweetly Inspired…

    • Hey! Glad you found this helpful.:-) Have you saved your image on your Media? Since that’s where you can get the URL, once it’s saved there. let me know how you get on.

        • hey, don’t worry. I’m also just getting the hang of things when it comes to tech stuff. 😉 Go to your Dashboard and then you should see Posts and then Media should be below it. YOu need to add the image there.

  6. Thank you! 🙂 I’ve now saved it to my media. I tried putting it in the widget text box using the code you gave but the picture doesn’t show up. Have I done something wrong or will it just not show because it’s my own button? Thak you so much for this!

    • Hey Tara, do you mind sending me your code? Or you can generate the code via that mycoolrealm site I included, that’s where you also get the grab button box. And you’re welcome. I don’t think I am helping you enough though. :-s

    • Well, well, well, look who’s this bean got in her blog? Thanks Isha for dropping by and for your lovely comment. I really love your proactive spirit at WFBC and keep us girls commenting. Would love you in the Bean Team! 😉 Happy blogging my dear.

      • oh i would soooo love to be a part of it , and thanks to you i am on my button too 😀 , though I feel a little embarrassed that 5 mnths into blogging and i am discovering the whole button work now , but better late than neva 🙂

        • Have you followed the bean? If you have, then that’s it, you’re part of the Bean Team! I have many things to share with everyone, just need TIME to do it. 😉 Don’t worry about it hun, it took me forever to realize that foundation brush is better with my BB cream until I came across one of the WFBC’s girls simple tutorial about it. And yes, better late than never. Can’t wait to grab your button! 😉

  7. Hiya AJ’s Mom
    I’m only just starting to create my blog button I’m a bit behind, lol. I would love to put your button up on my blog if you don’t mind, but when I copied your code into my text box nothing appears on my site. I’m sooo bad when it comes to things like this, not sure where I’m going wrong. Any help would be grand. xx

  8. Hi, it was the one in the post, just used the other one and it works perfectly now. Just have to say a HUGE THANK YOU for all your D.I.Y posts 🙂 . I’ve found them so useful and a great help, this little beauty fairy is going to be following you around. xx

    • Hi! I am so glad it worked in the end with the other code. I just deleted that code in my post now and just tell the readers to check my sidebar and get the codes there to avoid further confusion. Thanks very much. I shall wait for your button. 😉 Also I am glad my DIYs are helping you with blogging. 🙂 So cool to hear that. And beauty fairy, your header is rockin’!

  9. Pingback: New Blogger Tips & Tools: Free Photoshop Clones with GIMP2 & Pixlr ! | Natural Beauty Tips & Reviews On All Things Beauty & Health Related

  10. Pingback: SWITCHING THEMES (without Custom Design): JUST THE BASICS YOU MIGHT WANT TO KNOW. « Sweetjellybean/Fun & Sweetly Inspired…

  11. Yay! Another wonderful thing I’m thankful for. Btw, how did you make the labels? I would like to use washi tape clip arts for it yet I still don’t know how to. huhu. Anyhow, I love this post! Continue being awesome. Cheers!



  14. Pingback: My Likes — I love these 18 brilliant bloggers | Janet's Notebook

Now, your turn. This space is all yours!

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s