Tutorial: Making Your Party Buttons Small and Neatly Organized

 Today I am going to attempt to explain how I get my Linky Party buttons in Blogger to line up all nice and neat at the bottom of my post like this:

Linking up With:

 Since I am a very visual person, I am going to try and show you a lot of pics to help explain each step.

When Editing your post there are these buttons at the top left hand corner:

[COMPOSE] [HTML]

When you copy and past a button code you use HTML
When you want to read your post you use COMPOSE

I know this is elementary, but I need step by step to help me soooooo......

This is what the button codes look like that already exist in my post.  The highlighted part is a new button code that I am copying and pasting to my post.  Always paste below the other codes like this:

<a href="http://cedarhillranch.blogspot.com/"><img border="”0”" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibCqi4GD3t4x2K3RZT_YC845Vf9xl66RYgzZLK6IjpcjrkHFb1lLwgrsqTbQCyJ7AX4zovQ3XEXWihDV7nLiY7mlhk0YUZtj2yiT3g_vVzvUkK-MtAqUxyHtMd3IurpJ77FRs6id2VCSI/s200/cowgirl-up-003-button-4.jpg" width="75" /></a><a href="http://tipjunkie.com/" target="_blank"><img alt="Tip Junkie handmade projects" border="0" height="75" src="http://www.tipjunkie.com/images/TipMeTuesdayButton1.png" width="75" /></a><a href="http://kathewithane.com/"><img border="0" height="75" src="http://i524.photobucket.com/albums/cc321/Maximavwife/Party150.png" width="75" /></a></div>

 <a href=http://homespunhappenings-tammy.blogspot.com target=”_blank”><img src="http://i1092.photobucket.com/albums/i403/monahan6/homespun%20happenings/Ourbedroom2012055-1.jpg?t=1336019037" /></a>

Some codes, like the one I copied, don't have a Height and Width measurement in it so by doing this next step you will add that Height and Width code to the button.

So next click on COMPOSE.  This is what you would see.  A big button:

Now click on the big button and in Blogger it gives you the option of making the image small- medium-large- x large.  I usually click on small.  Now go back to the HTML and the code will look like this:

<a href="http://cedarhillranch.blogspot.com/"><img border="”0”" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibCqi4GD3t4x2K3RZT_YC845Vf9xl66RYgzZLK6IjpcjrkHFb1lLwgrsqTbQCyJ7AX4zovQ3XEXWihDV7nLiY7mlhk0YUZtj2yiT3g_vVzvUkK-MtAqUxyHtMd3IurpJ77FRs6id2VCSI/s200/cowgirl-up-003-button-4.jpg" width="75" /></a><a href="http://tipjunkie.com/" target="_blank"><img alt="Tip Junkie handmade projects" border="0" height="75" src="http://www.tipjunkie.com/images/TipMeTuesdayButton1.png" width="75" /></a><a href="http://kathewithane.com/"><img border="0" height="75" src="http://i524.photobucket.com/albums/cc321/Maximavwife/Party150.png" width="75" /></a></div>
</div>
<a href="http://homespunhappenings-tammy.blogspot.com/" target="”_blank”"><img height="168" src="http://i1092.photobucket.com/albums/i403/monahan6/homespun%20happenings/Ourbedroom2012055-1.jpg?t=1336019037" width="200" /></a></div>

I highlighted in Red the measurements of the button.  Change those measurements to "75"

Looking at the same example I highlighted some codes in green.  You can delete these.

So now your button code should look like this:

<a href="http://cedarhillranch.blogspot.com/"><img border="”0”" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibCqi4GD3t4x2K3RZT_YC845Vf9xl66RYgzZLK6IjpcjrkHFb1lLwgrsqTbQCyJ7AX4zovQ3XEXWihDV7nLiY7mlhk0YUZtj2yiT3g_vVzvUkK-MtAqUxyHtMd3IurpJ77FRs6id2VCSI/s200/cowgirl-up-003-button-4.jpg" width="75" /></a><a href="http://tipjunkie.com/" target="_blank"><img alt="Tip Junkie handmade projects" border="0" height="75" src="http://www.tipjunkie.com/images/TipMeTuesdayButton1.png" width="75" /></a><a href="http://kathewithane.com/"><img border="0" height="75" src="http://i524.photobucket.com/albums/cc321/Maximavwife/Party150.png" width="75" /></a>

<a href="http://homespunhappenings-tammy.blogspot.com/" target="”_blank”"><img height="75" src="http://i1092.photobucket.com/albums/i403/monahan6/homespun%20happenings/Ourbedroom2012055-1.jpg?t=1336019037" width="75" /></a>

Now in the example above you can see that I highlighted some codes in blue.  All you need to do is join the two codes together by backspacing.  BE CAREFUL NOT to erase any of these ><  if you do just hit the undo arrow and try again.  You want the arrow at the end of the previous button to connect to the arrow to the beginning of your new button

Like this:

<a href="http://cedarhillranch.blogspot.com/"><img border="”0”" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibCqi4GD3t4x2K3RZT_YC845Vf9xl66RYgzZLK6IjpcjrkHFb1lLwgrsqTbQCyJ7AX4zovQ3XEXWihDV7nLiY7mlhk0YUZtj2yiT3g_vVzvUkK-MtAqUxyHtMd3IurpJ77FRs6id2VCSI/s200/cowgirl-up-003-button-4.jpg" width="75" /></a><a href="http://tipjunkie.com/" target="_blank"><img alt="Tip Junkie handmade projects" border="0" height="75" src="http://www.tipjunkie.com/images/TipMeTuesdayButton1.png" width="75" /></a><a href="http://kathewithane.com/"><img border="0" height="75" src="http://i524.photobucket.com/albums/cc321/Maximavwife/Party150.png" width="75" /></a><a href="http://homespunhappenings-tammy.blogspot.com/" target="”_blank”"><img height="75" src="http://i1092.photobucket.com/albums/i403/monahan6/homespun%20happenings/Ourbedroom2012055-1.jpg?t=1336019037" width="75" /></a>

Now if you go to the COMPOSE part of your post the buttons should look like this:

 

Sometimes a button may have a >Center< code at the beginning and end of their code.  You will want to delete these too (arrows and word).  It will not allow the buttons to be right next to each other if you don't. 

I hope this was helpful.  Let me know if you tried it, and if you could follow what I was trying to instruct.

It makes your post look more organized, and I like to be organized :) 


Linking up with: