How To Create a Blog Button

February 22, 2013

Ever wondered how to create your very own blog button? If so, then you are in luck because I am going to show you a few easy steps to making a button without all the hassle. 

[Note: For those of you who don't have photoshop, like myself, we'll use picmonkey to create our button unless you have another photo editor you'd rather use.]

Find a photo to use as your background and open it using picmonkey :)
Choose your font, add geometric shapes, choose whether or not to use effects.. etc; this is basically where you play around to get your button looking how you want it before moving onto the next step.

Once you have your button looking like you want then you will need to save it to your computer and from there you will upload it to a image hosting site such as photobucket or flickr. I personally use photobucket, but there are many other sites that you can use that'll work just as well. Upload your button to the site and copy the html next to where it says direct link which is shown next to the arrow above and now you are ready to begin coding your button.

Coding may seem intimidating but once you learn this simple html code than you pretty much know the basics to coding. I have used the same html code for everything related to my buttons and it hasn't failed me yet, so the next step is to copy the code below and paste it wherever you want your blog button to appear. 


<center><a href="YOUR BLOG URL"><img alt="YOUR BLOG NAME" width="200" height="200"src="

<textarea id="code-source" rows="4" cols="25" name="code-source" rows="4" style="height: 37px; margin: 2px; width: 200px;"><center><a href="YOUR BLOG URL"><img border="0" src="

[Edit the blue highlights above and replace it with the correct information stated. Also the width and height shown above can be adjusted to create any size button that might be needed]

Ta-da, you now have a blog button with a grab code :)
Now start swapping your button with all your favorite bloggers.

My Beautiful Crazy Life 

Have a few questions or need something explained a tad bit better, feel free to email me:
breanna . 6218@ gmail .com
[without the spaces]

If you enjoyed this post or found it to be helpful please do me a favor and pin it :)

You Might Also Like


  1. Thanks for posting this! I actually bought a book recently on html coding and my eyes just glazed over... You made it sound easy. Thanks!

  2. thanks. i had someone show me a while. everyone wants to show thru links tho. at least you showed in a blog. I dont do good searching on google for help. I'd rather someone tell me step by step.

  3. Thank you so much! I have been wanting to do this for some time, but I wasn't sure about the coding! Thank you for sharing your knowledge! xo

  4. You are so amazing for sharing this!!!! This is going in my favorites. When I get to a computer, I'm pinning it!!! Thank you for this post girl!!

  5. Great tutorial :)

    I don't even know how to use PicMonkey because I am always using Photoshop. Every time I get on there I get confused lol

  6. Yay for posting this. I know how to do it but when it comes time I always forget! Now I can pin it and refer to it later! Thanks!

  7. Well, thank you so much! I'm going to play around with this tomorrow. Good explaination!

  8. Such a straightforward and simple to follow tutorial- I'll be putting it to use soon!

  9. Wow - awesome!! I just started another part-time job (crazy, I know)and I'm doing a bit of html work. Anyhow, I had never heard of picmonkey either?? Can't wait to try this! Thanks so much for sharing!

  10. Thanks for the useful tips for new bloggers like myself! I'm a new GFC follower from the blog hop, and I look forward to reading more of your posts!
    XO, Rachel
    With Love, Rachel

  11. Love your site my dear! Your newest follower.

    Just love // kelly

  12. I actually need to save this, because I never know how to make blog buttons. I always have someone make them for me.

    Thanks for this!


Leave a comment! I would love to hear from you!

Blog Love