Tuesday, April 12, 2011

How to Create A Blog Button

I hope you have been enjoying my 'Tips to a Better Blog' series.  I know I have enjoyed hearing your feedback and have been receiving all sorts of emails for more tips and tutorials.  I received a question from my friend Britton on how to create and share a Blog button.  Blog buttons are a definite must have for any Blogger.  A Blog button is typically a 125x125 or 150x150 icon designed specifically for your blog.  The Blog button usually contains the same color, design, and font as your blog and can be a quick and easy way to "brand" your blog.  Blog buttons can also be used for other bloggers to "grab" and display on their blogs.  It's a quick and easy way to get your blog name and brand out there.

I recently discovered a quick and easy way to create your own blog buttons without having to use a professional graphics tool.  I put together a quick little tutorial for you below so you too can learn how to create a blog button, upload the blog button to a photosharing website, and create the HTML code for your readers to grab and display your Blog button on their blog. 

Throughout this tutorial,  I am using Picnik.com, which is an on-line photo sharing design tool.  Picnick is so fun and easy to use.  I have also used it to create my blog header and several photo collages. 

{Create Your Blog Button}

First, upload ANY photo into Picnik.com.  You are going to completely manipulate the photo so any photo will do.  This will make more sense later.

I uploaded a random picture I had of Jillian that I happen to have saved on my desktop.  Once your picture is uploaded, it will bring you to an 'Edit' feature.  You will also notice several other tabs across the top of your screen.  You want to select 'Crop'.

In the actual size boxes, you will need to key in the numbers 125x125.  This will shade out most of your picture and highlight a 125x125 area. The choice is yours on how big you want your blog button to be.  In this example, I am choosing to create a 125x125 Blog button. 
Hit 'OK'

You now have a 125x125 area to work with.  Now click on the 'Create' tab and hit 'Stickers' with the little blue smiley face icon. 

In the 'Stickers' tab, look under the 'Basic' menu and select Geometric.  Click on the Geometric to open the selection.  Choose the large black square shape which is the on the top left hand side.

A little black, square box will pop up in the middle of your picture. 

Drag the corners of the box to completely cover your picture.  Your picture will now be completely black. 

Here is where you will be creating your own design.  The first black square is the background of your button.  If you look at my Blog button, I started with a black square as my border, then added a blue square, then a white square on top of that.  By layering the squares, I made a multi-color border affect.  You will need to click on the square icon every time you want a new sticker to use.  Feel free to use any of the other stickers, it is your button to create!!!

If you happen to know your blog's HTML code colors, you can also key in the color code into the sticker properties box which sits on the right hand side of your screen.  For example, the HTML code for the light blue color in my blog is CFECEC.  You can find all of the HTML codes for blogs HERE.  If you would rather just use the colors that Picnik offers, you can use their options too.

See the code in the Sticker properties box? I keyed that in and the new sticker I just added to my blog button turned the light blue color that matches my blog. 

I added another white box in the middle which is where I want my text to reflect off of. I am now done with the stickers. 

The last thing I would like to do is add Text to my Blog Button.  Right next to the 'Stickers' tab is the 'Text' tab. Click on it.

You will see that your blog button hasn't moved and is ready for you to add 'Text'.  I also want to have my text match the pink color that is also shown in my blog.  Go ahead and find your HTML code again for the matching Text color, or choose your own provided by Picnik. 

At the top of the 'Text' section is a box which reads 'Type Here and Click Add to Place Text'.  Go ahead and type what you want your blog button to say in this box.  I typed in 'Karen At Home' using the return button after each word.  Click the Add Button.

You will notice that your text is very large and white.  First, go ahead and make sure you change the color of your text to what you would like for it to be in the 'Text Properties' Box.  I used HTML color code CA226B which is the pink color in my blog.

See how my text is off the page right now?  Here is where you will need to play with the double arrows to size it. 

You can also drag the size bar in the 'Text Properties' Box to play with the size of your text.  I also used the alignment feature in the 'Text Properties' Box to center my text.

My blog button is almost complete.  I would like to change my text font to something a little more pretty.  So I choose the 'Henry Morgan H' font. 

My Blog button is now complete!!! Now you will need to download the button to your computer or to Photobucket.  If you would like to eventually add this button to HTML code for your readers to grab,

you will need to upload your picture to Photobucket.  Photobucket is a free online photo sharing tool that is extremely useful to bloggers.  Shutterfly unfortunately won't do the job.  If you do not have a Photobucket account, go ahead and create one.  It's free.  Once an account has been created, Picnick and Photobucket "talk" to one another which makes things very easy to download your pictures into Photobucket.

{Upload Your Blog Button to Photobucket}

To upload your blog button to Photobucket, click on the 'Save and Share' tab.  Click on the Photobucket icon on the middle of the page.

Name your picture and hit the 'Save Photo' button. 

You will be prompted to log on to your Photobucket account with your username and password. 

Your file has been saved to Photobucket.  Go to your Photobucket account and view your new Blog Button.

{Create HTML Code for your Blog Button}

There is one last step if you would like to add your button to your sidebar with the HTML grab code.  The grab code is the HTML code that your readers will use to add to their blog to display your blog button.

In Blogger under Layout, choose to add a gadget. Choose HTML/Javascript. In the title box, type "Grab My Button". Simply copy and paste the HTML code below into the open HTML box. Replace the blue text  with your blog's web address.  Replace the pink text with your button's web address (found in the picture above under 'Direct Link' shown in the Share this photo box on the right hand side of your photobucket picture).  Where it says BLOG TITLE, replace with the name of your blog.  WARNING: Do not remove the quotes of the hash marks at the end of your web addresses.  This will cause your code not to work. 

You can adjust the height and width of the text box by changing the values after the rows and cols in the code above. Save and position the button where you want it on your sidebar. Save your changes and view your blog.

Here is what my HTML Blog button code looks like.

I certainly hope you have enjoyed today's 'Tips to A Better Blog' tutorial on how to create and share a Blog Button.  I would love to hear if you try this for yourself and see what you create.  If you have any questions while creating your blog button, please feel free to send me an email!

Linking up to Serenity Now's Weekend Reading!! Please join this fun party and read a few of the best blog posts of the week!

Weekend Bloggy Reading


  1. Just found your cute blog! Thanks for the tutorial.. I honestly have never made one. I'm going to give it a try! :)

    Can't wait to read more of your blog! :)

    I ♥ Nap Time

  2. Thank you so much for this tutorial! I made mine and it was very easy!

  3. Karen, this is AWESOME. I didn't know how to do this, and needed to learn. Thank you. I'll be referencing this a lot. I may try to make one this weekend. Leigh

  4. This is great! I really need to create a button, and now I think I can!

  5. Hey girl... you might hate me, but there is a much easier way to do this in Picnic {if you have a membership}.

    Sign in
    Open "Create Collage"
    Choose the Square {4x4}
    Change the color to whatever color you want with the sliding bar
    Click "Done"

    Now you have a perfect square to work with.

    Create what you want it to look like.
    Click on the edit tab at the top.
    Click on Resize and change the numbers to 200x200.
    Save and Done!

  6. So happy to have found this! Thank you for sharing this information...I can't wait to make a button for my blog :)

  7. Thanks everyone, I hope you found this tutorial useful!! Feel free to email me with questions!!

  8. I've never seen this method before - it looks so easy! Thanks for sharing!

  9. This is an outstanding tutorial; thanks for sharing it! I'm just learning all the features that Picnik offers, so this really helps.

  10. Stopping by from Amanda's bloggy party - awesome tutorial. I've been wondering how to do this and now I know!!! Thanks so much for sharing. Have a great weekend!

  11. thanks for the tutorial! i just made my first header and now i can make a button!! thanks for sharing!

  12. Now why didnt' I think of that!?!?!

  13. PS. Visiting from Serenity Now....

  14. Anonymous7:11 PM

    Cannot thank you enough for the tutorial on the button. I'm a new blogger and taking things one baby step at a time - I was ready for this, it was tough but I did manage to get one onto my blog, with your fantastic help! Thanks again,

    Mary @ Redo101.blogspot.com

  15. I love your tutorials! I have a request for a future one... = )
    How about showing us how we can put a list of pages on our blog across the top, under the title, that link to specific posts? Like your "Home" "Contact Me" "Tour our Home" etc.?

  16. I feel smarter for just having read that. I'm not sure I could do it, but your instructions were so clear, I might give it a try.

    Great tip!

    Thanks for sharing!

    Visiting from Amanda's Weekend Bloggy Link Up

  17. What a great tutorial! I now have my homework :). I am not really that great at the technical aspects of blogging, so I really appreciate people who are better/smarter/experienced passing their wisdom along! Thanks.

  18. Thank you so much for sharing the tutorial. I did a few weeks ago the button but I always had a problem when it was time to create the html code. I'm going to give it a try now!
    Visiting from Amanda's party, have a great weekend,

  19. Great tutorial! You did a good job with the step by step. :) Thanks for sharing, Karen!

  20. This sounds good, but just wondering... do you design buttons for other people, or know anyone who does? :)

  21. Still working on this, the tut for making the blog button went great but I am having trouble with the html code still, it wont accept it :S will do more html code research and triple check it again! thanks! :D

  22. update! I did get this to work, it was just a bug with blogger and I had to close the window and open a new one and all went fine! Thank you Karen!

  23. Anonymous9:00 PM

    Thank you for this tutorial.. I created my first button. Slightly stressful because I am not very creative.. but I came up with a really cute one.. so thank you..

  24. Thanks for your tutorial..let me try and will come back for feedback


Thank you so much for taking the time to leave a comment!