Sweet Jelly Bean: Beauty & Blog Tips Spilling the beans on beauty & blogging through product reviews, brand musings, easy tutorials & blog tips!
In my pre-blogging days, I wouldn’t have a clue if someone mentioned about grabbing my button. Thank goodness for blogging for educating me a little, and now I’ve learned that blog button is one way of branding your site or blog and use it to spread the word about it. In this tutorial, I will share with you easy steps on making your very own blog button.
So what’s the big button idea?
Blog buttons are not just 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 (blog), thank you!
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 or 200×200 pixels tops to give myself a little more space.
- Upon inspection, most sidebars are between 200-280 pixels wide, if not smaller.
Please consider these things when making one so your button doesn’t look out of place and it’s coming up nicely.
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
♥ Blog Button Tutorial + Useful Codes ♥
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. (noticed that quotation marks are straight ” and not the curvy type – this is very important for it to work properly)
CODE:
When another blogger will copy and paste this on to the Text or HTML 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”>
</div>
It’s that simple.
And for those wanting a GRAB BOX CODE for their sidebar — simply check this cool site out and the super easy steps to do it!
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. Don’t forget to grab my button on my sidebar!
Related articles
- My DIY 101: Step-by-step to customize your blog header with Pixlr Express. (sweetjellybean.com)
- Get your DIY blog banners and wave…to this awesome bloggers! (sweetjellybean.com)
- Extra! Extra! Get your WFBC blog button here! (sweetjellybean.com)
- Calling all DIY bloggers… this post is for you. (sweetjellybean.com)
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.
question – how do I add a button but then have it be like a grab a button code on my sidebar?
hi! go to that site I wrote on this post for the grab box. that should do it.
lol wow cant believe I missed that ! x
yay! now have it in my left sidebar if you want one of my buttons! x
hurray! will check it out now.
oh, your button looks so mysterious.;-) did you say buttons? I can only see one.
no just one for now! more to come tho lol!
hehhe, yes, keep ‘em coming. I love how you’ve done your button and how it fits perfectly with your banner. so mystical.
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.
Oh, I cannot wait to try this…:)
Thanks again, AJ’s Mom!!
Hey there! You’re welcome. Make sure you come back and we can swap.
That’s awesome! Give me a nudge once you’re done so I can poke my nose into your blog;-)
I love this! So helpful.. I’ve made and saved a button but I don’t know how to get the image URL? :/
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.
Sorry to be a pain.. I’m not sure what you mean by saving it on my media? :/ Technology is not my thing! I’m sure you can tell. Ha.
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.
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
I am reading all your replies , OMG u are so helpful AJ’s mommy
, so good to meet sweet people like you
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! 
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
Hello! Thanks for wanting to put up my button. Can I ask which code you used? Was it the one on the grab box on my sidebar or the one in the post.
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’!
Thank you, I’m glad I got there in the end
We always get there in the end.
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!
Hey! Thanks for loving this post! Labels? You mean the ones on my sidebar?
Exactly. Did you also make those in Pixlr express?
Hey, I made this via Photoshop as a trial but you can do this using Pixlr Express or Pixlr Editor (dupe of Photoshop) . Would a tutorial help?
I guess so. Hehe. Though I will still try other ways.
Thank you for reaching out.
No prob! Try it using Pixlr Express and see how you get on, otherwise, give Pixlr Editor a go. Let me know the outcome.
Totally enjoyed your site, it’s ‘sweet’ & very creative at the same time! Glad to have stumbled upon you… )
Thanks to you, I made my own follow me buttons for twitter, facebook, etc.!! Never thought it could be so easy.
Thanks again!
That’s amazing! I love how you’ve done your social buttons!
You’re very welcome! ^^
I LOVE THIS POST! I don’t know why I forgot about this… I needed it the other day. Well, I still need it… Awesome!
Harajuku Girl FL recently posted…One of my fave Manis so far… It’s like Buttah