July 19, 2011

Tutorial: Make a Blog Button

OK, disclaimer: I am not a programmer, I'm not even computer savvy.
But I am a person who would rather do things them self than pay someone to do it for them.

I'll give you the step by step on how I made my blog button, but I don't know what I'm doing  only know how to do it by working with Picnik and PhotoBucket, as that's what I used. The good news, Picnik  & PhotoBucket are FREE and you don't even have to sign up for a free account if you don't want to.

[1] Choose and image and upload it to Picnik {you could also use a blank canvas to start from scratch}. I used different modern, graphic designs as a base.

[2] Using the editing program you can add words, change colors, pick frames for your image etc.
Once that is done to your liking- CROP your photo into a square and RESIZE the image to 125x125.

[3] HOST it to a online photo hosting site like PhotoBucket or Flikr.
This is a MUST as you need your image to have a URL.
[4] To attach the button to you blog you need a CODE. 
There are two parts to the code- one part to attach it to your blog and another to say where the picture is located online.
{Part 1} You want to replace your blog URL where it says, "Your Web Page URL"
You do need the quotation marks and make sure you keep the ">" at the end.
 {Part 2}  Next you'll need to insert your image web address where it says "Img URL". 

Making sure to keep the quotation marks in place. On PhotoBucket there are several types of code listed by your image, you want to copy the "IMG Code".

[5] Next all you have to do is put the two parts of code together, making sure to end with this code.

[6] You can now input the entire code into your blog side bar.

To do this, go to the "design" page, then click on "add a gadget".  Then click on the gadget "HTML/JavaScript". Here you can input your entire code.

You can also use the button in your post, just insert the whole link into the html portion of your post.

Now- You should be all set!

But I NEED your help!
My sample buttons are throughout this post and I NEED help deciding which one fits my blog. {or maybe something new all together?} I would love you to lend your opinion to help me make this decision!

If you want copyable code section for your button just head over to part 2 of this tutorial!
Thanks for reading!


  1. Thanks for the tips. I think I like the 2nd one the best.

  2. Thanks!
    I like the 2nd one the best too!

  3. Thanks so much for the tutorial! I like the second and last ones the best. I will be pinning this to save for a later date when I am feeling a little more ambitious!
    jenn :)

  4. Thanks for sharing this information. I think I shall give it a try!

    I also like the second one best.

  5. Ok, I'm really computer stupid. I've got the thumb nail buttom, but can't figure out how to get the little box below it to hold the html?????

    you can email me directly

  6. Holy crap! It worked! I'm the most blog-tech-challenged person ever! Thank you for the awesome and easy tutorial!!

  7. Oh, I would love for you to share this tip and any other blogging tips on my mommy solutions and resource meme. There are so many mommy bloggers that would appreciate this!


  8. Great directions! I really like the last one, love the linen background.

  9. Becca, this is SO timely! And I have used picnik before and can't believe I didn't think of it for a button!!

    FWIW, I like the last one, that round one on the burlap-ish background... it looks very summery to me. :)

    Thanks, mama!

    Adrianne, from {temporarily} button-less happyhourprojects.blogspot.com

  10. Great job...I'm not good at writing tech tutorials, so I'm glad someone else can! :)

    Thanks so much for linking to "20 Below Thursday", and for adding my link on your blog! :)

  11. Thanks for sharing this. I am new to blogging and have been thinking about redesigning my blog and making buttons. I really appreciate you taking the time to share this. I feel so behind and so lost with everything. :)

  12. Hi! I’m following your blog and wanted to invite you to my blog hop. Come add your blog when you get a chance if you haven’t already. Hope you are having a Sweet Week.

    A Mommy’s Blog Design Studio
    Join us every Friday for our Blog Hop!

    Review and Giveaway Blog Directory
    If you feature Reviews and Giveaways come add your blog here!

  13. Your buttons are gorgeous! I can see why choosing just one would be difficult. I like all of the bottom three on the right hand side of the page. (Sorry, I know that doesn’t really help...there’s all just to great!)

  14. Great tutorial! I'm loving #2 & 3

  15. Thanks for the awesome tips! I know my readers will enjoy them. I'm sharing your blogging advice at my weekly edition of Blogland's Fabulous Friday Finds. I'd love if you stopped by!

  16. I like the blue lattice looking background and the green in the middle with your blog name on it. The name shows up well, it catches your eye with the colors and the lattice reminds me of Gardners (your last name?) and the green also reminds me of your name.

  17. Thank you so much! I was just wondering how to get a "code" for a button! :)
    I love #3 BTW.

  18. Thanks so much for sharing this tutorial! I really need to make a blog button for my blog.
    I like #2 and #3 :)

  19. The two buttons I saw are very cute! I like your style. I prefer the one with the circle on it. I found you at Truly Lovely's blog hop, and am now following you.

  20. Thanks for the info! I like the second one best. It seems to go with the rest of your blog the best.

  21. Thank you for a great post! - I've wondered how to do this and can't wait to great my own button. I really like your third button best! I'm visiting from The Shabby Nest and am a new follower.

  22. Thanks for the tips! I've been wanting to make my own button and not have to pay someone :)
    Nicole @www.thebakingmom.blogspot.com

  23. Great tutorial! Personally I like the first of your buttons best!

    Thanks for linking to a Round Tuit!
    Hope you have a great week!
    Jill @ Creating my way to Success

  24. Okay, you make that sound so easy, I'll have to try it!! And I like the 2nd one and the 5th one as well! Good job! :)

  25. Thanks for the tutorial! I will try it out here in a bit.

    Hopefully I will have a new blog button today!! bearrabbitbear.wordpress.com

  26. i'm going to have to attempt this. maybe. possibly....i love your chevron one!

  27. I need to get on with designing my banner, buttons etc. Bookmarking your post for using it later. Great tutorial!

  28. Thanks for the tutorial. I am not too computer savvy either... Everything I learned how to do on Blogger comes from a Google search! And occasionally, a wonderful blogger like yourself!

  29. Thanks for the awesome instructions!!! I like the 2nd or the 4th buttons best. They are all awesome though!

  30. Great tutorial! This is so important for new bloggers to know and tutorials are hard to come by. Well done! I have met a few new bloggers lately who have asked for my advice re: buttons and now I will send them your way. :) Will you stop by my HomeMade Monday blog party at HomeSavvyAtoZ.com next week to share?

  31. I like the top one! I'm just learning my way around picnik. :)

  32. Great job on your blog button! Thank you for linking up last week at Sew Woodsy! Please come back tomorrow and link up your most recent project!

  33. Thanks for sharing this. I like the 3rd one.

  34. Great tutorial! I've been wondering how to do this. I like the banner with the chevron and navy, very dramatic and eye catching! Thanks!

  35. Thank you so much for linking this up to {nifty thrifty sunday} last week as well!!

  36. Thanks so much! Somehow I deleted my button. It needed an update anyways. Great tute!

    Stopping by from Beth's Tutes & Tips!

  37. THank you SO MUCH for this tutorial!! What a great help- I think I referred to your post a gazillion times while I was fiddling with my button- but I finally got it! :)

    And, I like the second button- the one with a frilly turquoise border. :)

  38. Great tutorial! Thanks for linking up with us at Show & Share!


  39. I am new to your blog, but so far it seems like the last one is most "you" of all of them. Although they are all great. Thanks for the tutorial!
    Jamie http://www.backlessshirt.blogspot.com

  40. Your tutorial worked great! Now if only a magic fairy would whip up a blog logo for me so that I can have the button design that I really want!

  41. Oh wow! Thank you! Yes, I'm going to do this!

  42. Thanks for this tutorial! I am not happy with the button that was made for my blog so I am going to try this and see what I can come up with!

  43. I've been wanting to know how people created those! Thanks!!
    -barbie @ LOVIN LIFE BARBIE

  44. Becca,

    I am a new follower, and have used two of your "blog tutorials" to update my blog...the blog button and blog signature...THANK YOU so much!!! I am new to the blog stratosphere...and I LOVE YOUR BLOG!!! I am having a hiccup on my blog button displaying the actual "code"...everytime I put it in...it redisplays my button instead of the code...suggestions? Your blog, blog tutorials as well as DIY tutorials, are amazing!! Thanks for the tutorials. Would love for you to visit mine, if you get a chance....keep up the good work! Blessings!

    Erin at http://chronicchristiancrafter.blogspot.com

  45. Thanks for sharing this tutorial! I'm very new at blogging and don't know what I'm doing half the time. It's people like you that give me hope!
    Thanks again Jules

  46. Thanks for such a great tutorial! I've needed to do this for a while, and now I know how.
    Found this through Paisley Passions - would love for you to come by and visit.

    Ann @ Suburban Prairie Homemaker

  47. thanks a ton for the tip! I still need to make one for my brand spankin new blog! I will use your tute!

  48. Thanks for the tutorial! Just pinned you!


Thoughts? Questions? Opinions? Let's talk about it!