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.

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!

Labels:

Comments

Post a Comment

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

Popular posts from this blog

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...
6 comments
Read more

Etsy Giveaway: Desert Rose Knit Shop

THIS CONTEST IS NOW CLOSED!! 39 comments are entered - if there are any more at a later time added, they will NOT count. ********** Today I'm christening my new(ish) blog with an Etsy giveaway! I'm offering one lucky winner a cabled beanie of their choice ( pick your favorite color !). This giveaway will run for a week - so you have until next Monday, January 23rd, to put your name in the hat. 6 ways to enter: Comment below about which color beanie is your favorite. Subscribe to my blog on Google Friend Connect . Blog about this giveaway on your own blog. " Like " my Facebook fan page . Follow me on Twitter . Tweet about this giveaway. Please leave a separate comment below for each entry. At the end of the contest, I'll use a random number generator to pick the winner!! Here's a look at some of the color options available. Browse other color options over at  my Etsy shop ! ***** Thank you for enteri...
41 comments
Read more

Looking for a new church

For reasons I won't bore you with, I'll most likely be moving a little closer to school within the next month or two. This prompted me to start church-hunting again, to find something a little closer to where I'll be located. And this, of course, prompted me to start thinking in depth about what helps me decide what churches to try and what churches to stick with once I try them. via Website I must say, a church's website is a pretty huge first impression. If you don't have one... or if it looks like it hasn't been updated since 1992... I most likely won't read far enough to even find out when your service times are. You don't need a flashy, gimmicky site either (in fact, I'd prefer you didn't), but please make sure to list services times, directions, ministry and education opportunities, and also names and emails/phone numbers of people I can get in contact with in case I have more questions. Also, it is super helpful to have some phot...
10 comments
Read more