How To Organize Link Party Buttons

Hello everyone, happy Monday!  I was hoping to have started painting the dresser in Strapping Lad's room, but I haven't gotten to that yet.  We just got all of the Christmas decor put into the attic yesterday.  Phew, it's always so fun to have it come out, but nice to get it put back, too.  We were able to pick up a Craigslist daybed for Artsy Chick this weekend.  Does anyone in the Tampa Bay area want to purchase bunk beds?  The children's old ones are on CL right now.

* * * * *

I'm doing this post by popular request.  Well, I don't know how popular, exactly, but every once and awhile, someone will ask me about how I get my linked blog buttons into neat, small squares.  Quite some time ago, I wrote a post on resizing buttons, which is the exact principle we'll be using today.  I'll just get more specific on how to get them all lined up and pretty for you.  Disclaimer:  I am by no means a coding expert and there are undoubtedly other ways to accomplish this--this is just the method I use. 

The problem starts when we have a Great Blog Post (they're all great, right?) that we want to link up to a host blog's link party.  We go over to the hosting blog and like a good party guest, copy and paste their blog button to the end of our Great Blog Post.  So when you do that, you get something that looks like the patchwork, below:


























After you've slaved over, and taken a ridiculous amount of photographs for,  your Great Blog Post, this doesn't look all that attractive.  So.  How do you fix it???  Let's look at all of the html coding for the above buttons:

<a href="http://firefliesandjellybeans.blogspot.com/search/label/Show%20Off%20Your%20Stuff%20Party" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="blank"><img border="0" src="http://4.bp.blogspot.com/-fvxHkFmRuww/TjYS_3oztzI/AAAAAAAAAjA/H6n_MRE4xhs/s200/Show+off+your+Stuff+party+button.JPG" width="125" /></a>

<center><a href="http://nominimalisthere.blogspot.com/"><img border="0" src="http://i951.photobucket.com/albums/ad357/NoMinimalist/houseart-2.jpg" /></a></center><a border="0" href="http://frommyfrontporchtoyours.blogspot.com/" target="_blank"><img src="http://i1194.photobucket.com/albums/aa363/fromyfrontporchtoyours/blog%20button/BlogButtonHorizontal.jpg" /></a>

<center><a href="http://southernlovely.blogspot.com/"><img border="0" src="http://i132.photobucket.com/albums/q37/schoenfelds/showandshare.jpg" /></a></center>
<a href="http://bec4-beyondthepicketfence.blogspot.com/" target="_blank"><img alt="Beyond The Picket Fence" border="0" src="http://i454.photobucket.com/albums/qq266/bec8257/button2.jpg" /></a>

Don't freak out!

Make these changes, instead.  The green highlight is what you will ADD, the red is what you will DELETE:

<a href="http://firefliesandjellybeans.blogspot.com/search/label/Show%20Off%20Your%20Stuff%20Party" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="blank">&lt&img border="0" src="http://4.bp.blogspot.com/-fvxHkFmRuww/TjYS_3oztzI/AAAAAAAAAjA/H6n_MRE4xhs/s200/Show+off+your+Stuff+party+button.JPG" width="75" /></a>

<center>  <a href="http://nominimalisthere.blogspot.com/" ><img border="0" src="http://i951.photobucket.com/albums/ad357/NoMinimalist/houseart-2.jpg" height="75" width="75" /></a></center>
<a border="0" href="http://frommyfrontporchtoyours.blogspot.com/" target="_blank"><img src="http://i1194.photobucket.com/albums/aa363/fromyfrontporchtoyours/blog%20button/BlogButtonHorizontal.jpg"  height="75" width="75" /></a>


<center><a href="http://southernlovely.blogspot.com/" target=_blank><img border="0" src="http://i132.photobucket.com/albums/q37/schoenfelds/showandshare.jpg" height="75" width="75" /></a></center>
<a href="http://bec4-beyondthepicketfence.blogspot.com/%20" target="_blank"><img alt="Beyond The Picket Fence" border="0" src="http://i454.photobucket.com/albums/qq266/bec8257/button2.jpg" height="75" width="75"/></a>

You should now have small, uniform blog buttons. (Note:  The target=_blank opens a new tab for that particular blog and doesn't have anything to do with the tiles themselves, humor me and add it anyway because it benefits both you and your readers.  For more info click the link.)  What you have done is removed all of the host's centering instructions and changed the image size to 75 pixels square.  Sometimes the host will have their own width and height specified already, in that case, just change them each to 75.  There are a couple more things you need to do. Make sure all of your returns or breaks have been removed, so your html looks like one big uninterrupted block of text.  Your buttons will look all lined up like below:




Now to get them all centered, add a <center> at the very beginning and a </center> at the very end.  Your coding will look like this:

<center><a href="http://firefliesandjellybeans.blogspot.com/search/label/Show%20Off%20Your%20Stuff%20Party" target="blank"><img src="http://4.bp.blogspot.com/-fvxHkFmRuww/TjYS_3oztzI/AAAAAAAAAjA/H6n_MRE4xhs/s200/Show+off+your+Stuff+party+button.JPG" width="75" /></a><a href="http://nominimalisthere.blogspot.com/" target="_blank"><img height="75" src="http://i951.photobucket.com/albums/ad357/NoMinimalist/houseart-2.jpg" width="75" /></a><a href="http://frommyfrontporchtoyours.blogspot.com/" target="_blank"><img height="75" src="http://i1194.photobucket.com/albums/aa363/fromyfrontporchtoyours/blog%20button/BlogButtonHorizontal.jpg" width="75" /></a><a href="http://southernlovely.blogspot.com/" target="_blank"><img height="75" src="http://i132.photobucket.com/albums/q37/schoenfelds/showandshare.jpg" width="75" /></a><a href="http://bec4-beyondthepicketfence.blogspot.com/" target="_blank"><img alt="Beyond The Picket Fence" height="75" src="http://i454.photobucket.com/albums/qq266/bec8257/button2.jpg" width="75" /></a></center>

If you are very observant, you will see I deleted some other coding, let's not worry about that now, it shouldn't affect you one way or the other.  Your final blog buttons should now look like this!  (Occasionally, I will get extra returns before these small blocks appear--I think I am now, as a matter of fact--that is a Blogger issue that I think can be corrected if you edit is something other than the Blogger format.)






What I do, instead of making these adjustments every single time I link, I copy and paste from my Parties page. You could also do the same thing by making a Party page for yourself, or putting them in your sidebar, or copying and pasting your parties from one post to the next. Good luck and please let me know when you do this and I'll come over and take a look. 

* * * * *

I'm considering doing a couple other New Year-New Blog Look posts, we'll all have to stayed tuned to see if that happens or not.  Regardless, I think I'm going to paint that dresser in time for the text post, so do, indeed stay tuned!

I'll be linking here: