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:
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 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:
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 between each button if you want a space.
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! :)
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