Tuesday, November 1, 2011

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.

My Pregnancy and Baby

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).
Tutorial: How to Make a Blog Button
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.
Tutorial: How to Make a Blog Button
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.”
Tutorial: How to Make a Blog Button
Resize your image to 125px by 125px. Hit OK.
Tutorial: How to Make a Blog Button
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.
Tutorial: How to Make a Blog Button
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.
Tutorial: How to Make a Blog Button

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.”
Tutorial: How to Make a Blog Button
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:
Tutorial: How to Make a Blog Button

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.
    <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>
  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).


  1. Thank you so much for this tutorial! I've seen others but none of them as step by step as this one! This is going to be so much help to me...I hope to create a blog button soon!

  2. Hi Kelli! Thanks for this post. It's very easy to understand. Can you do a tutorial on how to attach links from another blog or apply someones button in your own blog? I am trying to join in linky parties and am having a hard time figuring out how to link to the party I am participating in. Thanks!

  3. Great tutorial. Wowza - I am glad I'm not the only one who finds this blogging thing a wee bit out of my techie comfort zone. As in, completely out of.

  4. Thank you so much Kelli!! I will be saving this! I tried for hours to create a button for my 31 days series and finally gave up ;-)

  5. Thanks for sharing a great how to, I need to do this for our blog too! Thanks for stopping by and becoming a follower. Will be your newest follower. Laura - Cottage and Broome

  6. Such a great post and tutorial. I've bookmarked it so I know where it is when I decide to create some buttons. Thanks so much for sharing. Also great that you share your inspiration over at Sunday's Best.

  7. This is a great tutorial. I like how you used pictures to help explain how to do this.

    Thanks for sharing this information at my Bunny Hop this week!

    xoxo Bunny Jean
    Wednesday's Bunny Hop Party!

  8. Thank you very, very much! I did it!!!

  9. Kelli,

    Thank you so much! This is my first time on your blog and your tutorial was very informative. I am going to have to try it!


  10. Kelli, first you become my first fellow blogger "follower" and now this tutorial just when I need it! Thanks so much! You're my new best friend!!

  11. Thank you for this tutorial... I've been thinking about making a blog button, and this will really be helpful! You're so kind!

  12. I needed this so bad!! Thanks so much! Stopping by via EisyMorgan!

  13. i've been wanting to make a button and am thrilled to find something i might actually be able to understand! thanks so much! i'm a new follower!

  14. Thank you for visiting my party... I shared your tutorial on my FB page.

  15. Such a great tutorial! I look forward to trying it out.

  16. I love it when people share these really helpful hints for non techs like me.

  17. Thanks for the tutorial. I have bookmarked this page so I can create my button when I have more time.

    Visiting from the Bunny Hop Party, Debra

  18. Wow! Thanks for posting this. I'm going to come back to it and learn something today! Just new to blogging so this will be very helpful!

  19. Thanks for sharing such great information and linking up to Sunday's Best =)

  20. Thanks for sharing this. I just pinned it!

  21. Thanks - I think I might have to try out your tutorial to make a button. (from debbiedoos link party)

  22. Thank you for this post. I have been wanting to do a button for some time now and tripped all over my toes when I tried, so I gave up. I found you by way of debbiedoos party link.

  23. WONDERFUL! Thanks for sharing, this helps newbies, oldies and everyone. Thanks for linking it up to the newbie party.


Related Posts Plugin for WordPress, Blogger...