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.

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.

Anyway...

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="http://livingthecreativelife.blogspot.com/" target="”_blank”"><img src="http://i1216.photobucket.com/albums/dd378/desertrose0601/200x100_Alt.png" /></a></div>
<div align="”center”">
<form>
<textarea cols="”19″" readonly="”readonly”" rows="”6″"><a href="http://livingthecreativelife.blogspot.com" target="”_blank”"><img src="http://i1216.photobucket.com/albums/dd378/desertrose0601/200x100_Alt.png"/></a></textarea></form>
</div>

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”">
<form>
<textarea cols="”19″" readonly="”readonly”" rows="”6″"><a href="YOURWEBSITEHERE" target="”_blank”"><img src="YOURIMAGEHERE"/></a></textarea></form>
</div>

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”">
<form>
<textarea cols="”19″" readonly="”readonly”" rows="”6″"><a href="YOURWEBSITEHERE" target="”_blank”"><img src="YOURIMAGEHERE"/></a></textarea></form>
</div>

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!

DIY Art Journal

Hi, my name is Linda and I am a 25 year old law student living in Manhattan. I blog over at My Passion Is... about my life, scrapbooking, DIY crafts, photography, exploring NYC & more. I am honored to be sharing a post with you today on Jen's blog, so thanks for having me! I recently completed a mini album that I made out of a pasta box so I wanted to share a tutorial with you so you could make your own! What you need: empty pasta box [I used a whole foods penne pasta] scrapbook papers & embellishments a single hole punch sturdy tape [like packaging tape] a paper cutter and/or scissors some sort of binding, either binding rings or ribbon First, you are going to flatten out your pasta box. Then you are going to cut it down to two 6x6 squares [or whatever size album you want to make]. If the box doesn’t fit perfectly in those shapes that’s alright, just piece them together using packaging tape to hold the squares together. Once you cover them i

Living the Creative Life

Search This Blog