web analytics

How to Make a Blog Button

Please note that this is a re-make of an old post.

So you just got started with your blog and you have others asking for a blog button from you. Or you don’t use the amazing Passionfruit Ads, and you have to code your own buttons. Either way this post is going to show you how to make a blog button.

Most sidebar buttons are around 200×200, for tutorial purposes I am going to show you how to make a blog button with this size. If you need a different size you can always resize. 

A free site to make a blog button is Picmonkey.

You are going to click on the “design” section at the top of the page.

start hereAfter clicking “design”, you will see a white square on a new page. On the left hand side, you will resize this square to 200×200.

resize button

button resized

Now comes the fun part, design your button! Try adding a picture in the background or adding gorgeous text. But don’t forget to put your blog name on it!

Voila! blog button finished

Then save this button to your desktop.

I use Photobucket for image hosting, but you can use another site if you feel more comfortable.

Upload the button image to your Photobucket page.

After uploading, click on your image and you will come to a page like this:

photobucket page

In the bottom right corner of the page is a “HTML” link. This is the code that you will copy and paste for the blog button code.

Creating the code

<a href=”YourSiteURL“><img src=”YourButtonImageURL” /></a>

In the YourSiteURL you will put in your blog’s webpage.

In the YourButtonImageURL you will put in the “HTML” link found on your photobucket page.

It should look like this when you are done (using my blog name as an example)

<a href= “http://www.pinkonthecheek.com><a href=”http://s13.photobucket.com/user/mahimah/media/Pink%20on%20the%20Cheek/blogbutton_zps4a4fd74c.jpg.html” target=”_blank”><img src=”http://i13.photobucket.com/albums/a277/mahimah/Pink%20on%20the%20Cheek/blogbutton_zps4a4fd74c.jpg” border=”0″ alt=” photo blogbutton_zps4a4fd74c.jpg”/></a>

blog button

All done!

If you need a grab box with your blog button, see this tutorial

If you should have any questions, please leave them in the comments below.

SHARE: Pin on PinterestTweet about this on TwitterShare on Facebook

  • Pingback: How to Make a Blog Button with a Grab Box

  • http://christenlouise.blogspot.com/ Christen Dobbs

    Great tutorial! I need a new one as I removed my old ones… I just haven’t gotten around to it.

    Christen
    feathers and ash

    • http://www.pinkonthecheek.com/ Lauren

      Thanks Christen!

  • Glued To My Crafts

    Love using picmonkey. Besides photoshop – that is my go-to for everything. Great blog post!!

  • http://www.myrabev.blogspot.co.uk/ Miranda Malanga

    Great tutorial, I have been trying to make a button for my blog too.

  • Melissa

    I am not going to lie, I LOVE Picmonkey. I use it for almost every post!

  • Deidre || Love, The Skinnys

    I appreciate people that share coding tricks and tips! Thanks girl.

    • http://www.pinkonthecheek.com/ Lauren

      Thanks Deidre :) See you tomorrow!!

  • http://www.joyfullyorganized.com Sarah Bonner

    I just started using Picmonkey for my blog buttons – love it! Thanks for the tutorial!

    • http://www.pinkonthecheek.com/ Lauren

      I love Picmonkey! Always works in a pinch.

  • jessica

    Oh wow, that was easy and timely.

    • http://www.pinkonthecheek.com/ Lauren

      Coding CAN be easy :)

  • The Adored Life

    This makes it super easy! Good to know!

    http://www.theadoredlife.com

    • http://www.pinkonthecheek.com/ Lauren

      Thank you!

  • Julie DenOuden

    Love this tutorial…makes it look so easy! Looking forward to meeting you at the Elevate Conference!

    • http://www.pinkonthecheek.com/ Lauren

      You as well! See you tomorrow :)

  • christin eastman

    This was SO helpful! Thank you so so much!

  • Pingback: I Am Blank Because - Pink on the Cheek

  • http://cheriecrochet.blogspot.com/ Cherie

    thank you very much I am new to blogging and its for my small business and I am so lost its not funny, ok sort of it is. this was helpful for me, now if I can just learn how to customize my layout and page more that would be nice. Its hard to find help that i can understand. Most of the help I find is in blog language that I have yet to learn or is not sticking real well in my brain yet. To much to read and learn at once it seems. Ty again!

    don’t look at my blog.. lol it looks like a 5 yr old did it so far. lol

  • Kisty Lee

    So I may be a little blog illiterate at the moment… but once I make the button, how do I go about adding it to my blog?!? As a gadget? I use Blogger.

    • http://www.pinkonthecheek.com/ Lauren

      Yes – as a HTML gadget where you will enter the code.

      No worries – if you don’t get it right the first time, let me know!

      • Kisty Lee

        I was able to add just the button. But I can’t seem to figure out the grab box! I’m gonna try it again tomorrow and see! Thank you!

        • http://www.pinkonthecheek.com/ Lauren

          If you email me the picture you are trying to use, I can provide the code for you.

Copyright © Pink on the Cheek | Design by The Nectar Collective