Thursday, August 16, 2012

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.

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″">&lt;a href="http://livingthecreativelife.blogspot.com" target="”_blank”"&gt;&lt;img src="http://i1216.photobucket.com/albums/dd378/desertrose0601/200x100_Alt.png"/&gt;&lt;/a&gt;</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″">&lt;a href="YOURWEBSITEHERE" target="”_blank”"&gt;&lt;img src="YOURIMAGEHERE"/&gt;&lt;/a&gt;</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″">&lt;a href="YOURWEBSITEHERE" target="”_blank”"&gt;&lt;img src="YOURIMAGEHERE"/&gt;&lt;/a&gt;</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!

No comments:

Post a Comment

Don't even try to leave a link in your comment... it will be deleted without warning.

Related Posts Plugin for WordPress, Blogger...