Welcome back to part two of our quest for a blog button! I trust you all did your homework (found here in part one of our quest)? If not… go do that first. If you’re in need of some additional button inspiration, Elizabeth at twelve crafts features a variety of great buttons in her weekly Monday’s Buttons segment.
Once you’ve accomplished those three homework tasks, you have advanced from a lowly page to humble squire. After finishing today’s quest, you shall be a knight… one of the proud Knights of the Blog Button!
{ahem… pardon me for getting a bit carried away with the medieval-ness there… on to the tutorial…}
In Picasa, open your chosen image (photo/digital paper/solid white-for-now) that you selected based on the information in part one of our quest. I chose to use the creme paper from this free Boho Chic kit by Brandy Buffington found on Two Peas in a Bucket.
From here, this tutorial becomes a bit like a Choose Your Own Adventure novel (remember those?)…
- If you are using a photo or a digital paper, follow the Crop instructions first and then skip the instructions for changing your background color.
- If you are using the solid white background that I created for you, skip the Crop instructions and go straight to Change your solid background color.
Crop the image to the correct proportions
Remember as you crop… your finished blog button will be small (under 2 inches square) so don’t try to include too much or too many small details in your little square. Less is more, simpler is better. (Repeat this mantra to yourself as needed.)
1. Click Crop (in the upper left corner).
2. From the drop-down menu, select Add Custom Aspect Ratio (at the very bottom of the list).
3. In the window that opens, enter 2 x 2 for the dimensions and Blog Button for the name and then click OK.
4. With your new Blog Button aspect ratio selected from the drop-down, click on one of the crop options below the menu to place the cropping frame on your photo.
5. Click and drag
the corners of the frame to make the cropping frame larger or smaller
and move the frame around until the area that you want to use for your
button is selected.
- Click Preview to see a quick view of what your cropped selection will look like.
6. Click Apply.
Change your solid background color
1. With your solid white background open, select the Effects tab.
2. Click Tint.
3. Click on Pick Color and select the color that you want.
4. Once you’ve found the color you want, click Apply.
If you’d like to add a little more oomph to your solid color, you might consider also using the Graduated Tint or Film Grain effects (found under the Effects tab).
Add text
1. From the Basic Fixes tab, click Text.
2. Click anywhere and enter the text you’d like on your blog button. (I’d advise putting only your blog name to keep it simple and easy-to-read. The button will be a link to your blog, so you don’t need your blog address.)
3. Use the options to change the font, size, color, and alignment of your text until your happy with it.
- Remember… your image looks big now, but it will be small when you put it on your blog. Make sure that your text is in a readable font (mine is Lane Upper), sized fairly large, and in a color that contrasts well with your background.
4. You can also rotate the text by clicking the orange dot/arrow.
5. When you’re happy with the text, click Apply.
***Now, take a step back and look at your button. You are *done* with the creation part of the process. The only tasks left in our quest are saving, uploading, and adding it to your blog. March on, brave knights! ***
Save and upload your image
1. Select File > Export Picture to Folder (or press Ctrl + Shift + S).
2. Click Browse and select the location where you want your final-product blog button image to be. Be sure to remember this so you can find it when you upload it.
3. In the image size section, select Resize to and enter 150 in the pixels box.
- There is no real “standard” for blog button sizes. Some would say that
150 is standard, some would say 175, some would say 125. Both of mine at
just Lu are 175, but I shrink the display size of the buttons from
other blogs I post to 85. So… select a number in there somewhere. I
chose 150 for this tutorial because I felt like it. 😉
4. From the image quality drop-down, select Normal. This keeps the file size small while maintaining a moderate image quality.
- If your blog button looks grainy (pixelated, in tech speak) when you view the exported image, you can export the image again and select a higher image quality.
5. Click Export.
- Your exported image won’t show up in Picasa. Don’t worry; this is automatic so that you won’t see duplicates of the same image. Your image is in the folder on your where you told Picasa to put it a couple steps back.
6. Upload the exported image to your image host of choice.
- Picasa Web Albums, Photobucket, and Flickr are some popular image hosting sites, but you can upload the image wherever you already have an account. If you don’t have an account with any image hosting sites, I’d suggest Picasa Web Albums — it’s linked to your Google and Blogger account automatically.
Add your button (plus code for others to grab it) to your blog (in Blogger)
1. After logging into your blog, go to the Page Elements section under the Design Tab.
2. Click Add New Gadget.
3. Select HTML/Javascript from the list of gadgets.
4. In your new HTML/Javascript window, copy and paste this HTML code, replacing the highlighted sections with the correct information — blog name (twice) , image direct URL (twice) and your blog address.
<img alt=”My Blog Name” src=”http://whatever.com/myimageDIRECTurl” /><textarea cols=”20″ rows=”3″><a href=”http://myblog.blogspot.com” target=”_blank”><img border=”0″ alt=”My Blog Name” src=”http://whatever.com/myimageDIRECTurl”/></a></textarea>
- Remember back to the HTML basics: be sure that each piece of information you put in stays in quotes (“) and that your image direct URL and blog address both begin with http://
To add to your library of HTML knowledge: - <img alt> is the attribute for the alternate text for your image. This text will show if/when your image doesn’t and, depending on your browser, will also be the little text tag that shows when you hover over the image.
- <textarea> is the tag for a text input box. This is the box where you put the button’s code for your readers to copy to their own blog. textarea is defined by the variables cols and rows. cols sets the width (in average character width) and rows sets the height in text rows. Depending on your sidebar width, you may need to adjust the cols number.
- < and > are the HTML code-speak for the < and > signs. You use the typed out code when you need the < s to be visible (and copy-able) instead of being interpreted by Blogger/your browser.
- <img border> is the attribute that sets the width of the image border. I generally set it to “0” to avoid the blue/purple border that is standard on links.
- You’ll find your image direct URL wherever you uploaded it. Here’s what it looks like in Picasa Web Albums:
5. Click Save.
6. Check out your new button in your regular browser and at least two others. The battle against wysinwyrg is never-ending!
6. Bask in the triumph of yet another quest completed, fair maiden saved, and dragon conquered.
7. Add your finished button to the Housewife Eclectic Photo Share on flickr or leave a comment here so that I can come see your beautiful button and vicariously bask in triumph. 🙂
At the successful conclusion of this quest, I dub thee, all of thee, Knights of the Blog Button and bid thee good day!
Lu (or Lorene if you prefer) is the mom of one squirmy boy and the wife of a singing and dancing elementary teacher. She is the proud author of this weekly Wednesdays on the Web (WotW) segment here on Housewife Eclectic and spends the other days of the week blogging about crafts and whatever else comes up at just Lu.
thanks so much! I can't wait to do this for my blog! I always wondered how.