Free Images Plus Blog Button Tutorial

Hi Everyone!

     I was looking around on the internet for tutorials and I found this great tutorial from Wild Iris about how to make your own blog button. I see these everywhere on other blogger's sites and I am so wanting to make my own!  Here are Wild Iris' button instructions:

Steps to make your own button:

• I use two free image hosting sites, picnik and Photobucket, to create blog buttons. Photoshop Elements and photobucket would also work.

Once you’ve opened and account at picnik you can download a picture or graphic from your computer files to picnik.

Note: Choose photographs carefully. This image will be the background of your blog button. If it is too busy it will distract from the writing on the button, making it more difficult to read.
Free photo sites:

• Library of Congress--American Memory Collection
• Royalty free--Public Domain Photos
• 5000 free--Stock Photos
• Wikimedia Commons

Free neutral paper: Digital Scrap booking Depot has selections of free scrap book paper and other graphics that can be used to create a neutral background for your button.

• Once you’ve uploaded your background photo or neutral background on to picniK, go to the Library tab. Your downloaded photo should be in your library of images. Click on your image, then open the start tab on the far left (A ladybug marks the start tab.). On the start page there are options to create photo albums and other digital items, but you need to scroll down the page to Keepsakes and open a new page.

• Now that you are in keepsakes, open the Create tab from the toolbar. In the create tab click on the option to re-size your image. Most blog buttons are 125 x 125 pixels because blog sidebars are usually 200 pixels wide; however, you could just as easily re-size your image for a banner in which case your dimensions would be different.

Note: Re-sizing a photograph will distort the image. It is easier to enlarge the photograph slightly greater than the 125 x125 pixels, then crop your image to 125 x125 pixels.
Picnik tools make this task ease by showing you how the pixels are increasing or decreasing as you move to expand or contract the cropping box. When you’ve re-sized your background to you desired dimensions, click OK. You can now insert text, graphics, and stickers, add a frame or add texture to your blog button.All of these options are found on the picnik tool bar.

• On the work page you can zoom out to enlarge your image so you can add finer details using the slide at the bottom right side of the work page. When you overlay text on your image, it will show extra large on your work page and you might not be able to see it. Choose a font color to see your text and adjust the font color for your image.The text can easily be re-sized by pulling the corners in on the text box and moved any where on the surface of your background image.

• When satisfied with the your image, text, and other additions to your blog button, save it as a gif file for graphics or jpg file for photos. Your newly saved blog button can be directly saved into photobucket from picnik if you have a photobucket account.

Why photobucket? Your saved blog button in photobucket has a URL [img] code. In fact, photobucket has several URLs to choose from. For the purposes of making a blog button, highlight and copy the URL [img]. You will find this URL in the "Share this image" box; it will be the bottom choice of URLs .

• The hyperlink reference is the HTML code you will use to connect your blog button image to your link destination.

Destination Source Code:
<a href="THE ADDRESS OF THE WEB PAGE THAT THE BUTTON WILL LINK TO">
Make sure the quotes wrap around the URL on both sides. The URLs are not in bold or italics. For example:
<a href="hubpages.com">


Image Source Code:
<img scr="THE LINK FROM PHOTOBUCKET GOES HERE”></a>


Simplified Code:
<a href="Web page URL"><img scr="Image URL"></a>

Adding Your Blog Button to Blogger.com

I am not familiar with Wordpress blogs, but I am sure HTML can be added to a Wordpress blog.
Installing your new blog button on blogger. On the design layout page of your blog add an HTML/Java Script gadget box.
Add your link destination code and your image code to the HTML/Java Script gadget box. . Be sure you are adding these elements in the HTML editor mode—top right of the box. Click save and preview your new blog button on your blog. This is the part where patience is needed. If your blog button fails to appear, recheck the code,be sure the quotation marks are in the right locations.

     Especially check out the Free Photo Sites in this tutorial. I had no idea these resources were out there! I guess I just worded my Google search all wrong because I have looked, I just haven't found these sites. Most of you all have been doing this for so much longer than I have. If you have any other great resources that you think are benificial to newbies like myself, please let me know!