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! :)

Store Backgrounds For Free On Picasa

I stumbled upon this tip a couple of months ago. I modified it a little bit to get it to work for me. I have been using it ever since and have been surprised at how easy it is to store full-sized backgrounds on Picasa. Goodbye, Photobucket Pro!

Intimidated by Picasa? Don't be! If you don't think you have a Picasa account, you probably do and don't know it. Every time you post a photo/image on your blog using the Blogger upload photo tool it is stored in a Picasa web album. Who knew?

How To Store and Link to a Full-Sized image on Picasa

1. Go to https://picasaweb.google.com/home. If you are logged into your Blogger account, you'll be taken to your albums. If you are not logged in, please do so using your Blogger username and password (same info you use to log into your blog).

2. Upload your file by clicking on the gray upload button at the top. Create a new album or select an existing one. I have a separate album just for backgrounds so that I can easily find them.



3. Click on the blue button to select a background to upload from your computer. Once it is uploaded, click on OK down in the lower right hand corner. This will take you to the album where you can find the image.



4. Click on the uploaded image.

5. Click on "Link to this photo", located on the right side of the screen at the bottom of the sidebar. Click on images to enlarge.




6. Check the box beside "Image Only: No Link".

7. Copy the code directly below "Embed Image".

8. Paste it where you intend to install the background code on your blog. Change the s144 in the embed image code to s0 (zero). VERY IMPORTANT!

9. Preview and save!

If you see a striped pattern instead of your background on your blog, make sure that you completed step 8. I often forget to do this and panic every time before I realize how quick and easy it is to fix. :)

Related Posts:
Easy Background Installation
Move Your Background Code For Better Load Time
Create a Header With Picasa

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 words and images into your own posts.
I work hard on my tips and and wish for everything to remain on this blog.
Thank you for your cooperation! :)