Friday, November 16, 2012

Blogging Tips | Create A Blog Button

PLEASE NOTE BEFORE CONTINUING WITH THIS TUTORIAL: I am having a few issues with the button code listed in this tutorial not working correctly. When you create the button the grab code is not showing up in the grab box IF you use the code on your blogs sidebar. If you use the code on a blog page it should show up fine. I'm not really sure why this is, but I will be looking into this as soon as I can to try and fix this problem. In the mean time you may be interested in the code over at SecondHand Couture as far as creating a button with grab box. Sorry for the problem and the obvious inconvenience this might cause!

Hello fellow bloggers! I am glad you've stopped by to learn how to make a button for your blog! Let me tell you: this is SUPER easy and SO fun! I am addicted to making buttons now!!!

STEP 1: create an image. I usually use picmonkey where you can upload any photo and get to work with all the very fun editing options! There are a ton of effects for layering, making the photo look better, and lots of fonts to choose from! I highly recommend using this because you can also easily crop the photo to the size you want. I think the most used size is 200x200 but you can do any size you want under that too. I know all the blogs I sponsor have buttons that are 200x200.

If you don't already have an image to use I suggest doing a Google search for free photos. Search for something that will go along with your blog look. For example, I searched denim to find a photo to use for my Blue Eyed Beauty blog buttons.

STEP 2: load the photo onto a hosting site. One way to do this is to load the photo into a draft post which you won't be publishing on your blog. I actually have a 'test' blog, but I also do a lot of blog design work for myself and other bloggers so this is where I've kept everything so far. All you have to do is upload the photo like you would any other photo for a post.

STEP 3: copy this code below. You will want to keep this code in a word document in case something ever happens and you need to re-enter your code. I have a separate document for each button I've created.

<div align="center"> <a href=”IMAGE DIRECT LINK” target="_blank"><img

alt="NAME OF YOUR BLOG" src="IMAGE DIRECT LINK"/></a> </div> <div

align="center"> <form><textarea rows="6" cols="20"><a href="URL OF YOUR BLOG" target="_blank"><img alt="NAME OF YOUR BLOG"

src="IMAGE DIRECT LINK"/></a></textarea></form> </div>

STEP 4: Fill in the colored areas of the code.

Purple = Image direct link
Go to the post where you uploaded your new blog button. For blogger, click "HTML". Now you need to copy the part of the code starting with "http://" and ending with ".jpg". Enter this into all three sections for the code above.

Here is what the code will look like once you change the view. You only need the section of code I've highlighted:

<div class="separator" style="clear: both; text-align: center;">
<a href="" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="" /></a></div>

Blue = Blog URL
I usually just pull up my blog on a separate window on the internet and copy the code there, but if you are going to type it in yourself make sure not to leave any spaces and to include the http:// before your blog address!

Orange = Name of Blog
All you need to do here is type in the full name of your blog, spaces included except for at the very end. For example this is how mine would look: "BLUE EYED BEAUTY BLOG".

STEP 5: Test your code. This is my favorite part! Seeing all that crazy code come to life into something I can understand! Here is the testing site. All you need to do is remove the code that is in the box on the left screen on the site and enter your newly created code. Click "edit and click me" once you're done and then see your new button with the grab box! If, for some odd reason, your button does not show up properly do not panic! Copy the blank code above and fill it in again. You might have accidently deleted a little piece of the code. Even one thing missing can make the whole code mess up.

Good luck! Any questions are welcome! I will try my best to help you if I can. :)

Here is an example of the finished product:
The code box is actually white, not clear...just so you know!

Blue Eyed Beauty Blog

Code Credit
I would like to give credit to Ellison Lane Quilts for the code I have used here! It is the best code I have found and I absolutely love the neatness of it!!
This Post Was Shared!


  1. Thanks for posting this. I had a conversation with a friend just yesterday about wanting to learn how to create a blog button. You read my mind girl!! :)

    1. You're very welcome!! I've had it in the draft box for about 2 months and finally got it out lol. Looks like just in time too!


  2. Great tutorial Helen. I've seen some of these that you can't understand. Good job with this one. Thanks for sharing on "I Gotta Try That" Have a great day!

    1. Great! I love it when people can understand my tutorials!! Most of the time I'm really writing them for me since half the time I end up needing to make a button or add something to my blog or someone elses and I'm like..."wait, how did I do that again??" haha. I want to be able to understand it so usually I write it out for myself and if anyoen else gets it that's all the better!


  3. Thanks so much for the tutorial! I created my button and it works fine when I test it, but when I add the code to my blog the grab box shows up blank. Any suggestions on how I can fix it? Thank you!!


Thanks for stopping and leaving a comment! I LOVE reading comments! {They also help me know what you are interested in reading on my blog!}

Comments on posts older than 14 days are moderated. Other comments may be removed if they are inappropriate or spam. I do read all comments but can't always respond to each one because I don't get online very often.

My email can be found on my 'about me' page if you would like to contact me or you have a question.