Tuesday, February 11, 2014

How to Make a Blog Button ~ Tutorial!

Hi everyone! So one reader was wondering how I got my blog buttons...I make them myself! Now here's a tutorial on how to make one...or two...or more, they're so easy! :)

1) Go to PicMonkey.

2) Choose any photo to edit.

3) Resize the photo. Click on Resize. Make the picture 200 pixels by 200 pixels. Make sure the "Keep proportions" box is NOT checked! Then click Apply.

4) Go to Canvas Color. Pick any color you want, or make your picture transparent. When finished, click Apply.

5) Click on the "Tt" at the right of the page. It will lead you to the "Texts" option, where you can choose fonts and type them. Click on a font, then click Add Text. A text box will pop up on the screen, where you can type up a message, and drag it where you want on your picture. You can also customize your text by changing the color, size, and whether it is bolded or italicized.

6) Next, go to Overlays, which is the butterfly icon under the "Tt". You can choose the overlays available from PicMonkey, or you can upload one of your own that is saved to your computer. The position it anywhere on your picture.

7) Personalize your blog button even more! Explore PicMonkey to make your button even more cuter!

7) When finished, click on Save at the top, and give it a file name.

8) Now go to Photo Bucket. Log in. If you don't have an account, make one--it's free, and it's useful!

9) Once logged in, click on Upload and upload the file you created in PicMonkey. Then, once the file has been uploaded, scroll down to it and click on it.

10) To the right of the page, you will see something that says "Links to Share This Photo." Click on the box that is to the right of the word "Direct." Once you have clicked on the box, it will flash yellow and say "Copied."

11) Now go to Cool Realm's "Grab My Button Code Generator". You can find it here. Type in your blog name, your blog address, and your image URL. For the image URL, you paste the Direct URL we got from Photo Bucket.

12) Scroll down and click "Preview" and finally "Get Code."

13) Copy the code.

14) Now log into your Blogger account, and get to Layout.

15) Click on Add a Gadget, and choose HTML/Javascript. Put in a title, such as "Grab My Button!" and paste the code from the Code Generator into the box.

16) Then click on Save. Now enjoy your new blog button!

Heyyyy that was kinda long! But see how easy it is to make a blog button?

I included as many pictures as possible so that none of you would be confused. But if you still have questions, just ask, and I'll answer in the comments below!

Thanks, and have fun making your blog buttons!


  1. MJ, that was a great tutorial. You included enough pictures and text that now I know how easy it is! Thank you so much! :)

    1. Jan, thank you! I tried to make the post as explanatory as possible! :)

  2. This is great! I appreciate you walking us through the steps!

    1. Thanks, Laura! Again, I tried being very detailed! :)

  3. Thanks for the tutorial...it was really helpful. I had always wondered where people got blog buttons from, and now I know ;)

    1. No problem, Hailey~glad I could help! :)

  4. You make it look so simple :)
    Thank you for sharing this :)

    1. Tracy, thank you. It is simple, but I just thought that more pictures would be more helpful.
      You're welcome! :)

  5. Thank you so much for the tutorial. I will definitely try to make a button.

    1. You're welcome, and great, I'd love to see one! :)


Thanks so much for taking the time to comment..it really makes my day and I appreciate every single one! :)
Be sure to check back if you have a question, as I always try to reply in the comments.
Don't forget to leave your blog address behind if you're here for the first time, so that I can visit and return the love! ❤❤❤