Thursday, May 3, 2012

How to create a blog button.

I began blogging in October 2010, because I wanted to share with other families our adventures. As you know we love taking our family to Museums, Zoo's, Aquariums, on bike rides, Amusement parks and weekend trips. This blog is where we share about all our adventures and that includes in parenting a toddler, parenting a 6 year old and in cooking.

Sharing is what it is all about, because sometimes when we are searching for a solution and someone shares with us how the handled a similar situation we find the solution and put it to work. Right?

How many times have you tried to use a cookbook and the recipe doesn't turn out like the one on the picture? Or your child has been on a tantrum binge at the supermarket and you feel the need to run and hide, but you don't. You search, read and ask until you figure out a way to solve, to correct the matter and then you feel happy, proud of your accomplishment.

That is exactly how I feel today, at this very moment. I have been trying for as long as I can remember on creating a blog button. A month ago a very good bloggy friend Aj who blogs at Confessions of a fat girl read my cry for help and designed this beautiful blog button for me. 

However when it came time to set it up on my blog sidebar I had no idea how to create the coding. So Melissa who blogs at The Beverly Hill Babies told me about a great app. a grab button code generator

And here is how I did this:

1.- Choose a picture or image you'd like to use for your blog button, if you are using a picture and want to add a border, text, effects you can use Pixlr Express {I love them!} and don't forget to save the image on your desktop.

2.- Access Photobucket {if you don't have an account, create one} upload the picture {remember the image has to be 125 x 125 pixel for it to fit the sidebar, it's a standard size}. Copy the photo's URL code, which for Photobucket's purpose will be the Direct Link code. 

3.- Go to the grab button code generator app and enter your blog's name on the first field, your blog's website address on the second field and on the third field paste the URL code you copied from Photobucket. Click on the fourth option "Textarea". Leave the following fields as they are and make sure that the container's height and width are at "auto" and click preview. Follow instructions on screen. 

4.- Copy the code you are given and voila! you have a grab button code!!!

Now if you are using Blogger just like me then go to the layout page and click on adding a widget and choose the coding option, paste the code and save. Now visit your blog to make sure it works and it is there and you are set!

Remember to share your button and grab other's to post on your blog... after all sharing is caring and we are all friends! 


  1. Nice tutorial and love your button!

    1. Thank you! my friend AJ did a great job designing it. ;)

  2. i need to bookmark this!! thanks

    1. I am planing on adding an image so that it may be pinned... pinning makes it easier! ;)