How To: Make A Blog Button {With Grab Box}

*UPDATE!!!! I HAVE HAD SEVERAL COMMENTS AND EMAILS ABOUT THERE BEING NO TEXT SHOWING UP IN THE BOX. I HAVE TESTED THIS CODE AND HAVE HAD NO ISSUES MYSELF, BUT IT SEEMS TO BE PRETTY COMMON. BLOGGER HAS CHANGED IT'S INTERFACE IN SOME PARTS SO THAT MAY HAVE SOMETHING TO DO WITH IT, HOWEVER; BECAUSE IT IS WORKING FOR ME, I CAN'T SEEM TO FIND A RESOLUTION. IF ANYONE KNOWS HOW TO REMEDY THIS SO THAT I CAN FIX THIS POST TO REFLECT THE MOST CURRENT CODE OR WAY TO INSTALL THE CODE, PLEASE LET ME KNOW! I AM SO SORRY FOR ANY INCONVENIENCE AND I WISH I COULD FIND A WAY TO RESOLVE THIS MYSELF! THANK YOU ALL FOR YOUR PATIENCE!!! XOXOXOXO - ASHLEY*

One of the most important ways to get your blog out there is by having a button available for other bloggers to grab or for you to send to them to display on their blog. It's a great way to connect with other bloggers and sort of have a logo {or two or four} for what you do. 

It's really quite easy to create a button so I'm going to show you how with these easy steps and, dare I say, easy coding?! {There are a lot of steps, but its really easy. I promise!}

1. Choose an image for your button.

2. Go to picmonkey.com and click on 'edit a photo'. Select the image that you want.

3. Click on 'resize' and resize the image. We are making ours 250x250. Be sure to uncheck 'keep proportions'.

4. Decorate your button! Picmonkey has lots of fun tools you can use so have fun and make it your own! We used a blank canvas and created a B.You logo for ours.

5. Save the photo. Be sure to name it so you can recognize it and save it in a place you can find it. I saved ours as byouphoto1! to the desktop.

6. Head on over to flickr.com. It's free to sign up if you don't have an account. Upload your image.

7.  Click on your uploaded image and then click on the 'actions' tab. Scroll down to 'view all sizes' and click on that.

8. There will be options of different sizes when you reach that page, but keep on the 250x250 size. Right click your image and click on 'open in new tab' {or open in new window}. The URL here is your image URL.

9. Keep the image open in the tab or window and head on over Blogger. 

Now, you have two options for the button. You can either make a grab box for your sidebar so bloggers can grab your button to display on their blog or you can create a code to send them so they can display it on their blog. I am going to show you how to do both! Be sure to keep your image open in the new tab or window for both options. 

GRAB BOX OPTION FOR YOUR SIDEBAR

1. Click on 'template' then select 'add a gadget'. You are going to want the HTML/Java option. 

This is the code you are going to want to paste in the HTML/Java gadget:

<div align="center"> <a href="YOUR BLOG URL HERE" target="_blank"><img alt="YOUR BLOG TITLE" src="YOUR IMAGE LINK HERE"/></a> </div> <div align="center"> <form><textarea rows="6" cols="20"><center><a href="YOUR BLOG URL HERE" target="_blank"><img alt="YOUR BLOG TITLE" src="YOUR IMAGE LINK HERE"/></a></center></textarea></form> </div>

2. Where it says 'your blog url here' {in red} enter in your blogs web address being sure to stay within the quotation marks. Where it says 'your blog title here' {in red} enter the name of your blog. Repeat that for the second part of the code.

3. Click on the tab or window that has your image link and copy the link. You're going to paste that link where it says 'your image link here' {in red}. Be sure to do it in the second part of the code too. There should be no red left and it should look like this {only with your info}:

<div align="center"> <a href="http://byourownblog.blogspot.com" target="_blank"><img alt="B.You" src="http://farm9.staticflickr.com/8043/8369116862_70e88221e1_m.jpg"/></a> </div> <div align="center"> <form><textarea rows="6" cols="20"><center><a href="http://byourownblog.blogspot.com" target="_blank"><img alt="B.You" src="http://farm9.staticflickr.com/8043/8369116862_70e88221e1_m.jpg"/></a></center></textarea></form> </div>

4. Click save and your button {with grab box} should be there!

You can also add the button with grab box directly in to your post by copying and pasting the code into the HTML section of your post. This option works well for bloggers who do weekly series, is hosting a swap, or is hosting a linky party. 

OTHER OPTION {that will keep your button dimensions customizable if you prefer a size other than 250x250!}

1. Open a text document or add a note to your dashboard for Mac users

2. Copy and paste this code:

<a href="YOUR BLOG URL HERE" target="_blank"><img src="YOUR IMAGE URL HERE" alt="BLOG TITLE" width="200" height="200" /></a>

3. Replace the information in red just as you did above. Make sure to stay within the quotations when replacing the info. The 'width' and 'height' in green should be changed to your button size. We are working with a 200x200 button size.

Your code should look like this {only with your info}:

<a href="http://byourownblog.blogspot.com" target='_blank"><img src="http://farm9.staticflickr.com/8043/8369116862_70e88221e1_m.jpg" alt="B.You' width="250" height="250" /></a>"/>

Save it and now it is ready to give to those bloggers that have been asking to swap buttons with you! 

Here are some tips in making your button:

Select an image that represents you and your blog. You can either choose a picture of yourself or you can choose a picture of something you blog about. Blog about sewing related items? Take a picture of your sewing station and use that. Blog about vintage stuff? Take a photo of vintage stuff! Just be sure it represents you and not someone or something else. 

Use your own image! Unless you have permission from the original source of a picture, only use your own image! Take a picture, draw a picture, or just use text. Just make sure its your own!

When selecting an image, keep in mind that you're going to resize it. Use a photo that will look good small and also will look good resized. You don't want a photo that will be smooshed when resized or pixelated if the photo is originally smaller than the resize. It should be crisp and clean after you resize it.

There are dozens of different button sizes that bloggers use. They want to make sure that they're sidebar is cohesive so they may require a button to be something other than 200x200. Here is a list of general button sizes:

-125x125

-150x150

-200x200

-250x250

-150x100

-200x100

-300x200

-300x250

-150x600

{Those are the sizes you will choose when you first resize your photo in Picmonkey, then again when you enter it into the SECOND code. It all depends on whose blog your button will be displayed on}

Have fun and be creative. Picmonkey has lots of fun little options to utilize, but be sure to keep it simple. It's a small image and you don't want to make it too busy and unreadable. This button is going to be displayed on other blogs as a form of advertisement - you don't want to have bad advertisement that no one can read! I suggest if you're using a picture to use a couple or one small elements and your blog name. Use font that is legible and white is almost always the best color to use. 

You might want to make a few different ones. Stay within your style of course, but remember that bloggers who want to display your button have certain tastes and styles for their blogs as well. You may blog about DIY/Crafts and have a cutesy button with sewing supplies and bright colors in the background, but a lifestyle blogger wants to swap and is looking for something with more of a vintagey feel to go with the flow of their blog. This gives you the opportunity to have something made and appealing to not just you, but your readers and bloggy friends too. Its also fun to change out your buttons with the seasons! 

Remember to always save your button codes in a document or you can save them in a draft on Blogger. Just don't publish it! Title it something like 'BLOG BUTTON - DO NOT PUBLISH'. You can adjust the title of the draft to something more specific as to what that button looks like if you plan on having more than one button in your drafts.

---

If you have any questions at all about making the button or about this tutorial, please leave us a comment or you can send us an email. 

If you're still like, ehhhhh... what? Send me an email at b.you.blog {at} gmail {dot} com and we would be happy to make a button for you with either or both options! For FREE! 

If you made a button using this tutorial, let us know! We'd love to check it out. We get blog button envy sometimes with how awesome everyone's buttons are!

*The grab box code only works on Blogger. Wordpress won't show the grab box. 

<center> <a href="byourownblog.blogspot.com" target="_blank"><img alt="B.You" src="http://farm9.staticflickr.com/8109/8460054901_f974a52eff_m.jpg"/></a></center>