May 27th, 2010

How to quickly and easily make a "grab my button" button

Ok, so here’s a task that I have been severely lolly-gagging over; making a blog button for my three blogs.

For one thing, I get a headache every time I try to figure this out.

Heck, I’m probably going to still be procrastinating over my other two blogs but I decided to make one for this blog for the sake of getting this in my completed column.

The first thing you need is to design an image. For placement on your website, 150 x 150 is the typical size in pixels although some places such as Entrecard only allow 125 x 125.

If you have a graphics program such as Illustrator or Photoshop, you probably already know how to do this.

I’ve even seen some nice ones made with the free Paint program that Microsoft includes with every operating system.

However, if you lack the skills to use Paint or the money to purchase Photoshop, you can easily create a button using Picnik.

In fact, I found this lovely posting on Kingdom First describing just how she used Picnik to design hers, no graphic design skills required!

Step 1: Upload image to Picnik (if you don’t have one, you can easily purchase one from istockphoto or do a search for vector images to download for free)

Step 2: Crop if necessary

Step 3:  Pretty it up with borders, text, and colors.

Step 4: Resize the picture (if you added borders, it is now probably bigger)


I took this image here

And changed it to this image

In about 10 to 15 minutes.

You May Also Like:   What Happened to My Networked Blogs and Adsense Ads???

Now, Picnik did force me to change my .png to a .jpg but that is no big deal.

Now, I know what your next question just may be.

But, Katrina, how do I get it to link to my site????

I found the answer to that on Musings of a Housewife.

To link your button to your site, you just need to use a code like this:

<a href=””><img src=”http://yourimageaurl here”></a>

Where it says your website here, put, well, your website.

And where it says yourimageurl put the url of where you stored the image.

It could be on your own website or it could be a free storage such as Photobucket.

Also, I prefer png for the quality but many places also accept .gif and .jpeg.

NOTE: I had no problem getting my image to show up when I hand typed my code but apparently copying and pasting caused the quotes to change to smart quotes. If your image is not showing, manually change your quote marks. I am able to tell because the smart quotes are a bit more slanted than my hand typed quote marks.

So, now you want one of those “grab my button” codes.

Now, there made be some nifty code that makes the whole thing one piece of code and if you know, I’ll be glad to use it.

However, this is how I did it.

First, I put my newly created image link in a text widget.

Then, I pasted this code directly below it.

<div align=”center”><form><textarea rows=”6″ cols=”19″ readonly=”readonly”><a href=”” target=”_blank”><img src=”http://www.YOURIMAGEURL.jpg”></a></textarea></form></div>

Did it work?

You May Also Like:   Is Your Sidebar Too Crowded?

Eventually. Lol.

I, once again, had to make sure that all of the smart quotes were converted to regular quote marks.

But, do you my blogs image at the top of this article?

Yeah, I used my own “grab my blog” code to get it there.


Enhanced by Zemanta

1 comment to How to quickly and easily make a "grab my button" button

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>




CommentLuv badge