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="http://1.bp.blogspot.com/-4VHH3uxeACk/UGTIxKKDwKI/AAAAAAAAGdY/pI6X1trPpl4/s1600/beb+feature+button.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-4VHH3uxeACk/UGTIxKKDwKI/AAAAAAAAGdY/pI6X1trPpl4/s1600/beb+feature+button.jpg" /></a></div>


Blue = Blog URLI 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!

<a href="http://blueeyedbeautyblogg.blogspot.com/" target="_blank"><img alt="Blue Eyed Beauty Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1C1RsoHjAXpuUtCH6Unam7yw1j2VzczWJbSncCU5fL_PgL_4d5RYtgmtAcpD_NNWP_qmq0KIzLM-buG-Dtyxu9V-7w9SsC5hQvDtUtsd9TppC7KVquGmTGrtRjsUBpkVtvx_Qf5GIpaYV/s1600/Blue+Eyed+Beauty+Blog+200x200+button.jpg"/></a>

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!

• I Gotta Try That Link Party #25