Skip to main content

Building a "Grab-able" Blog Button

So... of course the day I had planned to show you guys the ins and outs of designing a grab-able blog button, my secret weapon site (Photobucket) goes down (at least for me... maybe it's up for you?). I was wanting to do a little video for you guys, but since I can't show you part of the process now... I'll just try to explain it.

First things first

Of course, first you need to make a button. Adobe Illustrator and/or Photoshop are awesome choices, if you have access to those softwares. Of course there are some other free options for creating graphics, as well.

  1. Skitch (Mac only)
  2. Gimp
  3. PicMonkey
  4. Picasa

My personal favorite of these free options is Skitch - I actually use it quite a bit for resizing/cropping photos (although that's not really the topic we're on today). It's also really good at drawing arrows on and writing on photos. If you've noticed in some of my tutorial posts, I tend to use those features to point out things.


Open up your software of choice and create a new document in the size button you're wanting. There's not really a standard sized button, but a couple common ones that I see are 200x200 pixels and 200x100 pixels, so that's probably a good place to start. If you are swapping buttons with another blogger, they may have other dimension sizes that they'll want you to comply with.

Creating the button

Once you have your new document open, add a photo, illustration, text, or whatever you feel best represents you and your blog (or shop, or whatever you're trying to advertise with this button). Keep in mind that simpler is better... don't use more than one or two fonts... keep it to one or two colors if you can... don't overthink the design too much because you only have a small amount of space to work with.

A rule of thumb, if you're adding text, is that a dark text on a light background is the easiest and clearest to read, especially at such a small size. Light text on a dark background is probably the next easiest combination to read. Try to steer clear of yellow on green or purple on blue. When colors are too close to each other, it makes it that much harder on the eyes to read quickly and efficiently.

Adding the code

So here's the step where you need to upload to Photobucket (or wherever you store random photos for use online). Photobucket will give you a URL for the photo - copy that and head over to your blog.

Here is a sample of code for one of my buttons:

<div align="”center”">
<a href="" target="”_blank”"><img src="" /></a></div>
<div align="”center”">
<textarea cols="”19″" readonly="”readonly”" rows="”6″">&lt;a href="" target="”_blank”"&gt;&lt;img src=""/&gt;&lt;/a&gt;</textarea></form>

Basically there are two parts to it: the image part (linking to the image that is living on Photobucket) and the box part (that your readers can click on to "grab" the button). You need to enter the URL for the image in both of these sections, and also the URL to where you want to the button to take people to in both of these sections (most likely, this would be your blog's URL).

So let's break it down... the image part of the code:

<div align="”center”">
<a href="YOURWEBSITEHERE" target="”_blank”"><img src="YOURIMAGEHERE" /></a></div>

And the box part of the code:

<div align="”center”">
<textarea cols="”19″" readonly="”readonly”" rows="”6″">&lt;a href="YOURWEBSITEHERE" target="”_blank”"&gt;&lt;img src="YOURIMAGEHERE"/&gt;&lt;/a&gt;</textarea></form>

Here it is all together, if you want to copy/past it into your website. Just replace the capitalized part with the appropriate URLs.

<div align="”center”">
<a href="YOURWEBSITEHERE" target="”_blank”"><img src="YOURIMAGEHERE" /></a></div>
<div align="”center”">
<textarea cols="”19″" readonly="”readonly”" rows="”6″">&lt;a href="YOURWEBSITEHERE" target="”_blank”"&gt;&lt;img src="YOURIMAGEHERE"/&gt;&lt;/a&gt;</textarea></form>

And now I will (attempt to) show you how it will look when you're done. Hopefully Photobucket it working tomorrow when this blog post goes live, or this might be a little bit confusing...

This concludes week eight of the Build Your Blog! series. Just four more sessions! Next week we'll talk about sponsors, swapping, and where to start with all of that! If you haven't already, don't forget to subscribe to this blog so you know when the next edition of the blog series is ready!

Questions or comments about this week's topic? Leave them below & I will try to answer them all in a follow-up post later this summer!

Grab a button and spread the word!


Popular posts from this blog


I have come to the realization that I may have been mis-typed. I have often taken personality tests and generally come up with the result that I am INFP. I recently took a test that said I was INFJ actually, and the more I have been researching, the more that actually sounds like me.

What it really comes down to is the external/internal focus of the different functions (a topic that I'm still trying to wrap my head around, so I apologize if I don't explain it right). The I--J tends to actually function more as a "Perceiver" than a "Judger", contrary to what you might think (and vice versa for the I--P), which is a common reason these two types are mistaken for each other. How it actually plays out though is quite distinctive, which is why once I started reading more about INFJ's, I realized how much more like me it sounded. Basically, there are...
"...two broad and fundamental options for approaching life and information: Judging and Perceiving. Pe…

Vintage Travel Poster

One of our projects this coming term is to do a computer illustration of a painted vintage travel poster. I've been Googling some options and here are some that I like. Which would you pick?

80's Cartoons: Then and Now

I was browsing tv this morning while eating breakfast (tsk, tsk, I know...) and ran across a shocking sight. They've remade a BUNCH of the 80's cartoons, and not very flatteringly at that. I knew about Strawberry Shortcake and Care Bears, but check out some of these other ones, too! As an 80's child myself, I've often wished over the years that those old cartoons would make a comeback, this wasn't exactly what I meant!

Strawberry Shortcake: Then and Now
The 80's Strawberry people were reminiscent of the sugary treats that gave them their names. Now the characters look more like shrunken Barbie dolls.

Care Bears: Then and Now
Care Bears (and their cousins!) used to be a soft, cuddly bunch that liked to stare down bad guys every now and then. Is it just me, or do the new versions have unusually large heads? This somehow makes them look both younger and creepier at the same time.

My Little Ponies: Then and Now As with most 80's cartoons, the My Little Ponies were …