Make a Blog Button

Do you guys see that shiny new "The Turquoise Piano" button to the left?  That's what happened to me last weekend (along with getting my very first smartphone!).  Maybe most of you bloggers know how to do this but it is something that took me a while to figure out so today I'm going to teach you how I created my "Grab This" button.

I'd love to say that I can write code with no problems but to be honest, I pretty much had to Google what it means to write code.  So, Google mentioned, I cannot take credit for the instructions in this post.  I Googled it and found two very helpful websites and I'm just going to combine them today and share that with you.  

The first part I got from Hip Chick's Guide to PMS, Pregnancy & Babies (like I said, I Googled it and that's what came up).  I got the second part from Blogger Sentral.

How to Make a Blog Button – Basics (from Hip Chick's) This is what you can post in a post or on a side bar vs the thing to the left with the code under it -- that is later in this post.

The standard blog button is 125px by 125px. You can choose a size larger than this, but don’t go larger than 150 pixels wide. Most sidebars are only 200 pixels wide, and if you use a larger blog button, the sides of your button will be cut off. For this tutorial, I am sticking to the standard size: 125 x 125.

Step 1: Design and Create Your Logo

In order to design and make your blog button, you will need access to an image editing software – such as Photoshop. Unfortunately, for many beginning bloggers, Photoshop is too pricey. There are a number of free image editing software programs available. One of my favorites is Picnik – which is a free online photo editing site, owned by Google, that allows you to easily add text, stickers, frames, etc. to photos or images. (I highly recommend Picnik to beginning bloggers due to its ease of use.)

For more advanced bloggers – if you’re familiar with Photoshop, but you don’t have a copy of Photoshop, consider using Pixlr – another free online photo editor that has many of the functions that Photoshop uses. You can crop pictures, resize them, free transform, add text, add shapes, and more. I absolutely love Pixlr.

For this tutorial on how to make a blog button, I will be using Picnik. (It’s easier to use for new bloggers with no design experience.)

Creating a Blog Logo in Picnik – Step by Step with Screenshots

1 – Go to Picnik.com. And upload your photo. (You don’t need to register to use this free online editing program.)

2 – After you’ve uploaded the photo, you will need to crop your image into a perfect square. It doesn’t matter what size your image is. At the top of the screen, you will see the word “crop.” Click on Crop. (See the screenshot below).

In the drop down menu, you’ll want to choose “square.” Click on the square to move it where you want. Click on “OK” at the top to crop.

3 – Once your image is cropped, you will need to resize your image to 125px by 125px. (This is the standard size for most blog buttons.) To the immediate right to the “Crop” button at the top, you need to click “Resize.”

Resize your image to 125px by 125px. Hit OK.

4 – Next, click on the “Create” tab (to the right of the “Edit” tab) at the top of the page. This is where you can add effects, text, stickers, frames, and etc. to your image. When you’re working, to make your image larger, adjust the “Zoom” on the bottom of the page.

5 – Play around and embellish your image in any way that you want. I recommend placing your blog’s name somewhere on the image. When you’re done, click on the tab “Save & Share.” You’ll want to name your file and save the photo on your computer.

Step 2: Upload Your Image to Your Server

After you have designed and created your blog button image, you need to upload your image to your image hosting account. If you have a Photobucket account, upload it there. Since I used Blogger as my original blogging platform, I used Picasa Web Albums.

Once you upload the image, you can easily find the URL code for the image. In Picasa, you simply need to right click and select “Copy Image URL.”

The image URL should look something like this: “http://www.YourDomain.com/ButtonImageName.jpg”- Keep the image URL handy. You are going to need it.

Step 3: Create the Code for Your Blog Button

Pay close attention – this next step is a bit technical. I am going to try to explain it the best that I can. (If you have questions, please leave me comments so that I can tweak and edit this post to help others.)

This is the basic blog button code. (This code does not contain the grab box for the blog button. This code is the HTML code that you will use when you’re writing a blog post and you want your blog button to appear within the post, or when someone else is writing about your blog and they want your blog button to show up. This is the code that shows up inside the “Grab my Button” box):

<a href= “http://www.YourSiteURL.com”><img src=“http://www.YourButtonImageURL.jpg” /></a>

You should replace the “YourSiteURL” and “YourButtonImageURL” with your own URLS.

The <a href=“….”> portion of the code is the page that you want visitors to land on when they click the button.

The <“img src=“….”> stands for “image source.” It’s the location of the image that you want to use. This is where you copy and paste your image URL.

*** Important: *** Don’t forget to end the code with </a>. That’s how you close the code.

In my own blog, this is what my blog button code looks like.

<a href=”http://www.mypregnancybaby.com“><img src=” http://www.mypregnancybaby.com/wp-content/uploads/2011/01/blog_button.jpg ” /></a>

When anyone posts that code on their sidebar, or in a blog post, it looks like this:

Display the button and code in your sidebar (from Blogger Sentral)

looks like this

1. Login to your Blogger account.
2. Go to Design > Page Elements.
3. Click Add A Gadget.
4. In Add A Gadget window, select HTML/Javascript .
5. Enter the title of your widget e.g. Link back to us or Grab this button.
6. Copy the code below and paste it inside the window.
   <center>
   <img src="YourButtonUrl"/>

   <textarea style="width: 95%; height: 80px" name="textfield"><center><a title="YourBlogName" href="YourBlogUrl" target="_blank"><img border="0" src="YourButtonUrl"/></a></center></textarea>
   </center>
   
   

7. Replace 
   
   YourButtonUrl with the direct link to the button.
   YourBlogUrl with the url of your blog.
   

   YourBlogName with the name of your blog.

   
   
8. You can change the size of the textbox by changing the width and height attribute values.
9. Click Save and view your blog.

Okay, now I want to see everyone's buttons!  Let me know if this helps you and show me your new bling (code name for button).

Linking up at the great Linky parties found at the bottom of the blog.  They are where I find most of my inspiration!  Check them out!

plus

Coastal Charm - Nifty Thrifty Tuesday

Savvy Southern Style - Wow Us Wednesday

Bunny Jeans Decor and More - The Bunny Hop

My Repurposed Life - Catch as Catch Can Party

2805 - Potpourri Friday

Debbiedoos - Newbie Party

Serenity Now