About   All Tips   Tips by Category   Tips by Ability   Help!

Side-By-Side Buttons - Intermediate

Take a look at the sponsor's section in my sidebar. Notice how the buttons are arranged two-by-two? This tutorial will show you how to do that! Want to be a sponsor of Sneaky Momma Blog Design for only $5/month? Click here for details!

This is an intermediate tip only because it can get pretty frustrating. There is no risk to your template. I advise you to back up all of the buttons you wish to include in the gadget before beginning. You will be altering the codes and it is very easy to make a mistake. I would create this gadget on a practice blog, then copy the code and install it on your real blog.

A few things to keep in mind before you begin:

1. You'll want to make sure that the place you wish to install the button gadget is wide enough to accommodate it. For example: My button gadget is approximately 256px wide (2 125x125px buttons, plus a 1px space). My sidebar is bigger than that, so I know the gadget will fit.

2. All of the square buttons in my sponsor's section are exactly the same size. If you use buttons that are not the same size, they will not line up perfectly. If straightness and order are a big deal to you, (misaligned buttons on my blog would drive me CRAZY!) then you can certainly create the gadget with different sized buttons. Best to create the gadget with four buttons first to be sure that you like that look, though. You can resize buttons in a photo editing software program or free online photo storage site, like Photobucket. Caution: Resizing can make images blurry. If you are wanting to create a sponsor's section, it's best to only accept buttons that are the same size if you are wanting to put them beside each other.

3. You'll need html codes for all of the buttons/images. If you need html codes, you can get them from an online photo storage site, like Photobucket. Click here for help with this.

4. This gadget can be slow to load. If you have a lot of buttons, I suggest breaking this gadget up into a few different gadgets. I also advise placing the buttons as low in your sidebar as possible. Mine is at the top of the sidebar so that my sponsors will get maximum exposure.



Preparing the buttons for the gadget code:

1. Open a new word processing document on your computer. You can use any program, such as Word, Works or Notepad.

2. Copy and paste all of the button codes that you wish to include in the gadget into the document. Put spaces between each one so that you will easily be able to tell them apart. Rather than using all of the buttons in my sidebar gadget as an example, I will only be using the top four. Here's what the button codes look like in the image above:

Click on images to enlarge.

3. Remove the centering tags from each button if applicable. The centering tags are underlined in orange in the above image. Click here for help.

Writing the code for the gadget:


1. Paste in the codes for the top two buttons, one code right behind the other. Add <center> before the first button code and </center> behind the second one. If you'd like a tiny space in between the buttons (like mine) you'll need to type &nbsp; in between the two button codes. Surrounding each pair with centering tags will ensure that they will be alone on the line. This is what the code for my top two button codes look like:



2. Repeat step one for each pair of buttons. I suggest putting plenty of space in between the pairs so that you can tell them apart. I would save the individual pairs of button codes for reference. You may wish to add spaces or make other modifications later and it will be so much easier to find the individual buttons if you keep them in pairs.

3. Once you have written the code for each pair, delete the spaces and lines between them so that they are all right beside each other. It should look like a big paragraph. Here's what the code for the above button gadget looks like:


Installing the Gadget:

1. Go to your Page Elements page and click on Add A Gadget. Select HTML/Javascript.

2. Be sure that you are in html mode. If the upper right corner of the box says Rich Text, then you are in in the right mode. If it says Edit HTML, you'll need to click on that link to be in html mode.

3. Copy the code that you created above and paste it into the gadget. SAVE.

4. Move the gadget to wherever you want it to go. Click here for help.

You can put buttons side-by-side anywhere on your blog. If you want to string together more than two buttons for each row, all you have to do is move the <center> from behind the second button to behind the last button that appears on each row. Add &nbsp; between each button if you want a space.

Troubleshooting
This tip didn't work for you? Start over from scratch, taking your time to read through each step. If you miss one tiny character, the buttons will not work. Make sure that your sidebars are big enough to accommodate the width of your buttons.

Do you have a side-by-side button gadget on your blog? Did you do it differently? Please share! :)

Related Posts:
Advertise on This Blog For Only $5!
How To Center HTML gadgets
Get A Grab Box For Your Button
Get An HTML Code For Your Button

Have you been helped by my tips?
Consider grabbing my button or adding this blog to your bloglist!

Want to share this tip with your readers?
I would be honored for you to link back to this post!

ALL CONTENT © SNEAKY MOMMA BLOG DESIGN
Please do not copy and paste my content onto your blog.
I work hard on my tips and and want everything to remain here.
Thank you for your cooperation! :)

30 comments:

Nina said...

SneakyMomma I need help! I was so excited to find this tutorial, but I just can't get it to work!  My sidebar is 300 pixels wide so space shouldn't be an issue.  I'd like to think of myself as pretty internet/html self-sufficient but this has me stumped! If I sent you my gadget code would you take a quick peek?

My Mummy Daze said...

Thanks for your help with this! Put I just couldn't get my buttons to center. They keep sitting below each other. I'm obviously missing something in my code but just can't figure it out. Any further tips? Thanks again :)

Rebecca Lynne said...

Oh my gosh - I feel like I have won the lottery! Your blog is saving me so much pain. Thank you so much. I am so so so happy to have found you!!!

Amyables said...

This is a great tutorial! I am using it on my blog Http://little-willa-lamb.blogspot.com with great results!

I did notice that in your paragraph (second to last pp I think):


"You can put buttons side-by-side anywhere on your blog. If you want to string together more than two buttons for each row, all you have to do is move the " from behind the second button to behind the last button that appears on each row. Add   between each button if you want a space."

"" should really read, "" . . . right?

(I changed the "e" to a 3 b/c the comment box thinks I'm trying to use HTML tags! LOL)

Also, I like to put HTML code in the HTML section of a text widget instead of in a HTML widget on blogger because I can click back over to RTF and see the preview as many times as I need before I hit "save". Does this affect the use of the buttons at all? I'm not an HTML expert at all, so I wouldn't know.

Thanks again

Amyables said...

oh darn. That didn't help at all! Sorry!

Jill @ Sneaky Momma said...

If you're using a newer template, you'll need to experiment with the width of the sidebar. For some reason, you'll need to make it a lot larger than the combined width of your buttons. Amyables, not sure why the code is not showing up in your browser. Everything shows up fine in mine. You need to move the centering tags so that they surround all of the buttons that you want to include in that row. Leave a comment with your email address and I'll email you that part of the tutorial so that you can see what needs to be moved. You might consider adding your email address to your profile so that others may respond to your comments easily. Check it out! http://sneakymommablogdesign.blogspot.com/2009/04/benefits-of-showing-your-email-in-your.html

Amanda said...

This tutorial worked perfectly for me. Thanks so much!

Jill @ Sneaky Momma said...

Amanda, thank you for taking the time to leave a comment saying that you were able to do this. I'm glad you were helped by the tip! :)

Delicia said...

I'm so glad I found your blog. The amazing things a search engine can do. Your tutorial worked like a charm. Thank you so much :)

Abby Rogers said...

Brilliant! Thank you SO much!

-Abigail
www.PictureBritain.com

P.S. I made each photo "clickable" by changing the link after <a href="

Julie said...

I am gonna lose it!! I have tried 5 times to try and get the buttons arranged like you have in this post!!! Nothing is working!!! I tried rewriting multiple times, erasing, etc. I have followed all the directions and it is not working!! Any ideas...not to mention, I have a crying baby on me:(

megan said...

Thank you so much for this tutorial! I messed up the first time (missed something) but I started over and it worked. I'm so excited!

Jill @ Sneaky Momma said...

Julie: Sorry to hear you have a crying baby on your hands. It may be the reason why the tutorial won't work. I can't do this type of stuff if there are any distractions like that. You have to enter the codes in exactly, no mistakes. Wait until all is quiet and you have 10-20 minutes to focus on what you're doing. Then read all of the comments of others. Then try again, starting from scratch (important!) and go super slow. If that doesn't work, it's possible that the code won't work with this template. I've never seen a template that it wouldn't work with, but Blogger changes stuff all of the time...... Hope you figure it out and that you get some relief from the baby soon! :)
Megan: It's so easy to miss something little (like a space or little symbol). Glad you were able to make it work! :)

Sarah said...

Thanks SO much, I had the center tag between each button and this helped and was easy!!!

Caitlin C. said...

You're the best!! Thank you SO MUCH for this post :)

Heather DiSabella said...

Thanks so much for this post! I've been wanting to figure this out for some time now. I followed all your steps and it worked our perfectly!

Rachael S said...

WOW this was so helpful! Do you think you could do a post on how to make a custom button, like to link up to facebook and pinterest? I made my own but they arent perfect and would love some helpful tips! I added your button to my blog, thanks for the help!!

Corinna said...

You are awesome!! Thank you so much for this!!

Stefanie Sugia said...

thank you so much :):)
i've been wanting to do this, and now i can! you've been a great help :)

Anna at In The Next 30 Days said...

Oh my goodness, you are my hero! Thank you for this tutorial. I feel like my blog just got a professional make over, with the promise of more to come. Thanks!

marysews said...

I have a similar question. I know how to make a picture be a link, but not how to put the pictures side by side (and then make them be links).

Can you write a tutorial to make a page look like this: http://stitchesandseams.blogspot.com/2001/02/tutorials.html

Icyvirgorox said...

Hey thanks for the tutorial for this although I failed halfway through. I think your follow buttons are really cute. How did you do that?

Icyvirgorox.blogspot.com

Desi said...
This comment has been removed by the author.
Zephyr Hill said...

Your tutorial was easy to follow and has saved me so much sidebar space. Thanks!!

Heidi Fowler said...

Thanks so much! I don't have sponsors yet at my site, but all of my different-sized featured buttons were driving me crazy! I followed your instructions, and they worked great. I put 6 buttons in each widget so that they would load faster, but my particular template puts a large space in between each widget. That kind of bugs me, but until I figure that out, I am very happy with my new featured buttons!

I'd love for you to visit my site at OneCreativeMommy.com. Thanks so much for the help!!!

Sarah @ Just The Bees Knees said...

Thanks so much for a great tutorial! I was stumped for 2 days trying to figure this out, and you helped me get it right!
Cheers! Sarah

Janice said...

It worked perfectly! Thank you so much! I am also wondering where you got those pretty social networking buttons. Mine are so tiny and I can't find any others I like.

Zahid Amir said...

Mama this post helped me alot. Thanks for posting. It solved the problem of our team from software and game department.

com-names

Danielle Lunney said...

It worked! Yay! It looks really cool, thanks for the help :)

Danielle
Apples, Ink and Mischief

Elizabeth Carlson said...

SOOOOO HELPFUL! Thank you for feeding my OCD blogging habits!