Sometimes when you grab buttons and want to add them to a page they get all jumbled up, different sizes, some are in the center and others to the left. This can be a
Tweaking the code to make them all line up is a relatively easy affair because all you need to do is delete code from the new buttons. I am using colour to help you see the parts of the code and what to do to them.
Parts of code and what they mean
<div align="center"><a href="http://www.everybedofroses.blogspot.com.au/" title="Every Bed of Roses" target="_blank"><img src="http://i1180.photobucket.com/albums/x410/everybedofroses/DesignD_-2.jpg" height="125" alt="Every Bed of Roses" width="125" /></a></div>
- The blue part of the code tells the button to please stand in the center of where ever you place it.
- The red part in the code tells the button what size to be. Some buttons come with this some do not. It's easy to add in. Add it in near the end of the second last bracket < > before the forward slash /
- The green part of the code tells the browser to please open in a new tab.
- The pink part is followed by the internet address for the graphic.
- alt and title - following this is the name of my blog. If a graphic can't load it will read the words 'Every Bed of Roses'
- A forward slash in HTML means end something. Instructions always come in two's. Begin something end something. That's why there are two brackets in blue
You add two buttons to your blog and you want them to be the same size, line up next to each other but when you add the next button you end up with this
Tweaking the Code
The secret to making buttons stand next to each other is to remove all the center instructions that come with any new buttons you add. As well as making sure that the heights and widths are all the same. Here is some sample code for four buttons to stand side by side. This is what the HTML looks like:
<div align="center"><a href="http://www.everybedofroses.blogspot.com.au/" title="Every Bed of Roses" target="_blank"><img src="http://i1180.photobucket.com/albums/x410/everybedofroses/DesignD_-2.jpg" height="125" alt="Every Bed of Roses" width="125" /></a></div>
<div align="center"><a href="http://benandme.com" title="Ben and Me" target="_blank"><img src="http://img.photobucket.com/albums/v71/crabbygirl/blogbuttonfinal2_zps55fc7406.jpg" height = "200" width = "200" alt="Ben and Me" style="border:none;" /></a></div>
<div align="center"><a href="http://www.everybedofroses.blogspot.com.au/" title="Every Bed of Roses" target="_blank"><img src="http://i1180.photobucket.com/albums/x410/everybedofroses/DesignD_-2.jpg" height="125" alt="Every Bed of Roses" width="125" /></a></div>
<div align="center"><a href="http://benandme.com" title="Ben and Me" target="_blank"><img src="http://img.photobucket.com/albums/v71/crabbygirl/blogbuttonfinal2_zps55fc7406.jpg" height = "200" width = "200" alt="Ben and Me" style="border:none;" /></a></div>
- The first <div align="center"> and last </div> need to stay. All the blue ones need to be deleted.
- Ben and Me buttons are bigger than I want. The height and width is currently "200" I want all my buttons at 125 so I change these manually.
- Your code now looks like this
<div align="center"><a href="http://www.everybedofroses.blogspot.com.au/" title="Every Bed of Roses" target="_blank"><img src="http://i1180.photobucket.com/albums/x410/everybedofroses/DesignD_-2.jpg" height="125" alt="Every Bed of Roses" width="125" /></a>
<a href="http://benandme.com" title="Ben and Me" target="_blank"><img src="http://img.photobucket.com/albums/v71/crabbygirl/blogbuttonfinal2_zps55fc7406.jpg" height = "125" width = "125" alt="Ben and Me" style="border:none;" /></a>
<a href="http://www.everybedofroses.blogspot.com.au/" title="Every Bed of Roses" target="_blank"><img src="http://i1180.photobucket.com/albums/x410/everybedofroses/DesignD_-2.jpg" height="125" alt="Every Bed of Roses" width="125" /></a>
<a href="http://benandme.com" title="Ben and Me" target="_blank"><img src="http://img.photobucket.com/albums/v71/crabbygirl/blogbuttonfinal2_zps55fc7406.jpg" height = "125" width = "125" alt="Ben and Me" style="border:none;" /></a></div>
The result looks like this
If you want your buttons to stand next to each other in a narrower column you might need to tweak the size code numbers until you can make your buttons line up. Be sure to do the widths and heights for all the buttons.
If a button does not come with a width / height code simply add in height = "125" width = "125" near the end of your image code before the last forward slash and bracket < add it here /></a>
Happy button adding. If you have any trouble leave me a note in the comments and I will be happy to help you. I would love to see the results of your new lined up buttons so leave a link to your blog too.
Blessings
Chareen
Tutorial: Making a Grab My Button
