Pages

Tuesday, May 22, 2012

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:

Tip Junkie handmade projects



 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:



Tip Junkie handmade projects







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:

9 comments:

  1. Great idea for a post. And, I DO need the visuals, so this is perfect. Thanks.

    ReplyDelete
  2. WOW!!! This is soooo helpful!!! Thanks sooo much!!! You should do a post on making a button, too. :) I still need to make one (I do have the instructions you emailed me, but this REALLY helps, with the colored areas hightlighted.) Make sure you link this up to places!! :)

    ReplyDelete
  3. Thanks so much! I will have to give this a try :) Have a great week.

    ReplyDelete
  4. Thank you so much, Tammy. I have been trying to rearrange them with the cursor - just picking them up and shoving them into a slot. I like neatness! I actually think I can do this. Now if you could do two more tutorials with the simple instructions on how to make a button and how to put a featured button on the side bar! By the way, thanks for visiting and commenting!

    Distressed Donna Down Home

    ReplyDelete
  5. Success! At least on the codes that had height and width listed. They are a lot more manageable now!

    A Less Distressed Donna!!!

    ReplyDelete
  6. Oh thank you! I have been wanting to do this!

    ReplyDelete
  7. Standard blog button sizes are so nice. It is a lot of work to do them one by one, but i definitely think it looks so much better! I love how neat and tidy it is!

    ReplyDelete
  8. Great tutorial and people need this, since I see all kind of button sizes, and I much prefer the neatly done uniform sizes. Thanks for sharing at cowgirl up.

    ReplyDelete
  9. Hi:

    What a great post, I have trouble with the buttons. I wish I could do it. I want to start joining the parties.

    thank you

    <Martha

    ReplyDelete

Thank you for your thoughts! I really enjoy hearing from my readers. If you ask a question, I will try to reply A.S.A.P.