Tutorial: How To Create Your Own Grab Button and CodeSunday, April 04, 2010
Now here is my latest discovery that I'm so excited to share with you! I really wanted a button that matched my blog template, which is a wonderful freebie designed by the talented April at April Showers Blog Design. [Here's the thing... I'm not sure how copyright works and I suppose I could google that info, too. But I will state that the template is not my own and therefore I cannot take full credit for the design of my button. And if someone can clarify this for me, please don't hesitate to do so because I don't want to infringe on any copyright laws here. I should probably pre-order The Blogger's Guide to the Galaxy: Everything You Wanted to Know About Blogging (But Were Afraid To Ask)]
Update: I emailed April about using a snapshot of this template and she said it was fine as long as I keep her link on my blog.
This is what I did:
1. I loaded my site in a web browser (I usually use Firefox) and on my Mac, I took a screen shot. You can do this by simultaneously pressing the Apple Key, Shift and 4. You will then be able to select an area anywhere on the screen and, as soon as you release the mouse button, it takes a snapshot and saves it onto your desktop with the time stamp. I chose to grab a shot of the flowers in the header. In Windows, you'd use the Print Screen or Prt Scr key but you'll probably need to crop the image to narrow in on what you'd like to use for the button background.
2. Upload the snapshot to an online photo service such as Photobucket. I use Flikr but I'm quickly running out of storage space.
3. Next, you need to resize the image to 125 x 125, . In Flickr, you would click on Edit Photo. This launches the editing tool called Picnik. Now click on Resize to enter the dimensions.
4. Finally, edit your image by adding a border and any text you'd like. Continuing from step 3, you would simply click on the Create tab to take advantage of all these and other neat options available in Picnik.
5. Once you have saved the image, you'll need to grab the photo's url to be used in your "Grab My Button" code. In Flickr, you'll need to click on All Sizes.
This is how mine turned out after creating my button image and following Kimberly steps:
I love how it turned out! What do you think?