How to create a blog button

For those of you bloggers out there, today's post is an easy step by step on how to create a blog button. Be sure to grab mine and check out buttons I've grabbed on the right side of my page! 

Step 1: Create your picture in Photoshop, Ribbett or other photo editing software. I will show you how to create a picture in Ribbett. If you don't have one already, sign up for a free Ribbett account here.

A. Start off by uploading whatever picture you'd like as your button (original editing was done in Picnik but that site has shut down)

B. Double click the photo and you will be redirected to the Edit tab. Under this tab, you can rotate pictures, crop, resize, sharpen and get rid of red eyes (this tool works SO well!). I would keep your picture large while you edit it then go back and resize for a good button size.

C. Once you are done on this tab, click the Create tab (you can always come back to edit). Here is the fun part. Under effects, you can do SO much to the photo. Some of my favorites are Boost (only up to 50%), 1960's, Lomo-ish and Cross Process. If you signed up for the free account, notice there are Premium editing tools you can pay for. I used 50% fade Cross Process on the photo below. You can add rounded edges and colored frames under the Frames tab (recommended for blog buttons). Under the Text tab, add text with your blog name. You can choose from tons of fonts, colors, sizes, etc. The stickers tab gives you the option to add all kinds of graphics to your picture.

D. Once you are done in the Create tab, head back to the Edit tab to resize your picture. A good size for a blog button is somewhere around 150-200 pixels (or else it won't fit in the sidebar). If you forget to resize before you save, you can always resize in Paint. Save and close! Below is the picture I created in it's actual size (and the white border is hard to see since Blogger automatically puts a white border around pictures).

Step 2: Save your photo to an online photo album such as Picasa, Flickr or in my case, PhotoBucket. Copy the direct HTML link and paste it into a word document for the time being.

Step 3: Paste the following HTML code into the same word document and paste in your blog credentials and the picture HTML code where stated (in bold red text)

<center><a href="YOUR BLOG LINK" target="_blank" title="blog title"><img alt="YOUR BLOG TITLE" src="LINK TO PICTURE"/></a><center>

</center>

<center><textarea id="code-source" rows="3" name="code-source"><center><a href="YOUR BLOG LINK"><img border="0" src="LINK TO PICTURE"/></a></center></textarea></center></center>

**be sure not to delete any characters or else your link will NOT work. 



Step 3: In Blogger, click on Layout and Add Gadget. I am sure there is something similar for Wordpress but I am not familiar right now. Click on HTML/Java Script. Create a title for your button "grab my button!" or "check out my button!" are examples. In the body, copy and paste the above code and click save. Position the gadget wherever you'd like on your page, click save on the Layout page and view your blog.

Step 4: Swap buttons with other bloggers and enjoy the free advertising!




P.S. Be sure to grab my button!

source