The Life of Bon: How to make a blog button (easy)

Wednesday, April 02, 2014

How to make a blog button (easy)

I do my sponsorships the old fashioned way, which means that I have sponsors email me the html of their button.  There's a few reasons why I haven't switched over to passionfruit yet- the main one being that I hate that the human interaction can be taken out of the whole thing completely.  It's kind of like a self check out line.  It just feels too fast and inauthentic and inhuman for me.  I don't mind at all when other people use passionfruit, but for me, I want to connect with my sponsors and the emails back and forth about sponsorship are one way I do that.

So for now, at least, I'm sticking with the old school "send me your button code."  Unfortunately, as more and more people switch over to passionfruit, I find that less of my sponsors know how to make their own button.  This often presents a problem for sponsors and I find myself answering many emails on how to make a button.  The good news is it's easy!  I have seen a million different tutorials to make a button and they all seem to make it unnecessarily complicated so I end up responding to sponsors with button questions with my easiest explanation possible.  I decided once and for all to give that explanation to the whole entire internet.

(If you already have the image you want to use, you can skip steps 1-3!)

1.  Decide a picture you want to use.  If you want to edit the picture, mess with dimensions, add text, etc (which you probably do) you can easily do all that on, a free photo editing site.  Just upload your picture and go from there.  For my button I am doing today, I chose a background of tulips.  All I did was save the image to my computer and then upload it to picmonkey.  Now I want to change my dimensions.  I want a square button and the person I am sponsoring has told me to make it 200 x 200 (most sidebars are around 200).  Click the crop on the left side bar and then change the actual size dimensions to the ones you want. After you have your numbers entered, click apply.

2.  Now you have an image that is the right size.  This is where you add any text or shapes that you want.  For mine, I am going to add a shaded circle so that I can put text on top of that.  To do that I click the butterfly shape all the way on the left that says "Overlays" and then I click the first option available to me, "Geometric."  This is where I can make a circle.  I click on the circle and then move it over to my box.  The circle will be black, but you can change the color in the color box that pops up.  I usually do a white circle and then move the "fade" option so that I can still see the picture in the background, but can easily write over it.

3.  Next click the Tt on the left hand side and you can add your text to the button.  Usually this would be the name of your blog.

4.  There are a lot more things you could do to your button on picmonkey, but I'm just showing the basics.  Once you are done with your button, go ahead and save that bad boy and then upload it to photobucket.  To do this, go to and then click the orange "Upload" button at the top of the page.  Next select the file you want to upload- in this case, your newly made button.  (If you don't have a photobucket account, it's super easy to sign up.  Basically it's just a place to save and send all your photos on the internet.)   

5.  Click on your image and on the right of your computer screen you will see a box that says "Links to share this photo."  I always use the direct link.  Just click on the link and it will copy it for you.

6.  Now is the easiest part of the whole dang thing, the coding. (For real!  It's so much easier than you think!)  All you need to do is copy a couple of things into an html code.  Use the code below as a starting point.

In place of the first blue text (after the a href=) you are going to put your own blog address.

In place of the second blue text (after the src=) you are going to put the direct link that you just took from your photobucket.

That's it!  Super easy, right?

P.S.  You can also tweak the size of your photo if you want.  You add the measurements right after the jpg.   Let's say that someone wanted me to send them a button that was 300 w by 200 h.  I could easily add that into my button code like this:

<center><a href=""><img border="0" src="" width="300" height="200" /></a></center>

Make sure to add every quotation mark- those things are worth a million bucks when it comes to coding.  And also, just know that you if you decide to change your dimensions and make a square button very tall, then it will mess with the proportions and make it look all stretched out.  

P.S.  I know next to nothing about Pinterest but if you have a board on pinterest for blogging stuff, I would love you to pin this so that more people can see it.  Thank you!


  1. Thank you for this! I have read a lot of tutorials but this is the easiest one that I have found!

  2. this is perfect! i've read so many tutorials & people make it completely & unnecessarily difficult. this is hands down the easiest one i've read. thank you, a million! i'm totally pinning it.

  3. thank you for this post! i just started my blog very recently and this is going to be really, really helpful :)

  4. I love how straightforward this is!! excellent post!

  5. I am so in LOVE with you right now! i needed this so much :)

  6. THANK YOU! I needed this literally today! Best timing ever.

  7. Anonymous11:08 PM

    Thank you for this! This is awesome! :)

  8. OMGEE! You're a lifesaver! I have been looking for something like this. Now I have something to do this weekend. Thanks for sharing!