Sizing Up My Buttons: An Easy Tutorial for Sizing/Spacing Grab Buttons Equally

Due to waking up this morning around 4:30 wide eyed and feeling rested, I decided to tinker with my blog. For a while now, I've wanted all my blog grab buttons to be more uniform because they were all different sizes and zigged zagged back and forth. I chose to be adventurous and take a risk to try to manipulate the HTML code for my buttons. And...it worked!! Look at the grab buttons I have under Blogs I Read or Use in my sidebar to the left to see an example. So for those of you who are interested in sizing up your buttons, I decided to post my first little tutorial.

There are 3 things to check for if you want uniform buttons. Some buttons might have one element but not another. The elements you want to look at are: sizing, centering, and spacing. In order to change or manipulate any of these elements, you must first click Layout in your menu items on the left hand side of your Blogger page. (These directions are for Blogger, but I'm sure there are very similar options for Wordpress. In fact, I know there are because I helped a friend place her grab button on her Wordpress blog, and the steps were very similar to the ones I followed for Blogger.)  

Sizing Buttons Equally

After pulling up your Layout page, go to your Gadget where your buttons are listed. Find the section of code that corresponds with the button you want to change. It will look like this:

 

<center><a
href="http://n2tching.blogspot.com/"><img border="0"
src="http://i1129.photobucket.com/albums/m514/thesweetlifeofsecondgrade/

LOGOBEST-1.gif"/></a>


To resize each particular button, you will need to insert the following section of code between image type" (i.e. gif", png", jpg") and the code at the very end that reads /></a>:

width="140" height="140"

          

Afterwards, your code should read like this:

 

 

<center><a
href="http://n2tching.blogspot.com/"><img border="0"
src="http://i1129.photobucket.com/albums/m514/thesweetlifeofsecondgrade/
LOGOBEST-1.gif" width="140" height="140"/></a>



Some button codes might have an additional thread of code just after the image type". The code looks like this:

alt="Blog Name"

If this is the case for you, insert the width="140" height="140" between alt="Blog  Name" and /></a> as in the following example.

<div align="center"><a href="http://n2tching.blogspot.com"
title="The Sweet Life of Second Grade" target="_blank"><img
src="http://n2tching.blogspot.com/2013/03/image6-e1363031933286.jpg"
alt="The Sweet Life of Second Grade" width="140" height="140"/></a>

               

You can change the numbers for width and height if you like. I used 140. It's better to use the same number for both so that your buttons will be square.

Spacing Buttons Evenly

Again, you will go to your Layout page, access your Buttons Gadget, and locate the section of code for the button you want to work with. Then, you'll need to add

<center><a

   

as the first line of code above the existing code for the button as in the example below:

<center><a
href="http://n2tching.blogspot.com/"><img border="0"
src="http://i1129.photobucket.com/albums/m514/thesweetlifeofsecondgrade/
LOGOBEST-1.gif" width="140" height="140"/></a>                


Centering Buttons

Follow the same procedures (Layout and Buttons Gadget) as explained above to locate the existing code for the non-centered button you want to move. To center the button, insert the highlighted section of code shown below just before the existing code: href="http://n2tching.blogspot.com".


<div align="center"><a href="http://n2tching.blogspot.com" 
title="The Sweet Life of Second Grade" target="_blank"><img 
src="http://n2tching.blogspot.com/2013/03/image6-e1363031933286.jpg"
alt="The Sweet Life of Second Grade" width="140" height="140"/></a


Well...that's all folks. Hope this tutorial will be helpful to some of you. Please don't hesitate to comment if you have any questions or to let me know if it helped you.


*Thanks for dropping by!