Thursday, October 28, 2010

How to arrange link-up buttons in your post so that they look pretty... aka my longest blog title ever!

I have finally figured out a super-easy way to arrange the link-up buttons in my post so that they look nice, so I thought I'd share it here.

Here is the code in my blogger post creator:

Here is what it looks like in my post:

See how they are aligned so nicely?! LOVE IT.

Here is the code color-coded to help you understand it:

  • First I copy and pasted all of the code from the blogs I was linking up with into my post in "edit html" view.
  • Then I inserted the code (called a "tag" ) to make the whole thing centered. It's highlighted in yellow. Don't forget that you have to "close" this tag! That's the code at the very bottom, also highlighted in yellow.
  • Then I have some text "Linking up with:" 
  • Then you see the green code - that is the code that links the image to the blog I'm linking up with!
  • Next is the purple/fucia code. That's the image code. (Sometimes there are "extra" little bits of code like "border" or "alt" that are giving additional information to your html viewer. Don't worry about those bits.) 
  • Here is the important part highlighted in light blue/teal: you want to make sure that you insert this before the "img" tag closes " />" insert your code=  height="###" and they will turn out lovely. You may need to edit code that is already there - just make sure if there is also a width code that you delete it. You don't have to use 125. The number is relative to pixels, I believe, and so long as these numbers are all the same then your buttons will all be lined up neatly.

The cool thing about html code and your images is that you only have to supply one image specification to resize your image, either height or width. Sometimes I'll use width as my specification, like when I'm adding buttons to my sidebar, in this case I am going to use height as the common image specification. That code is highlighted in bright blue/teal. The important thing to remember is to insert your height code inside of the image code and not inside of the link code.

Please be sure to leave a comment if this was helpful to you! :)


  1. YAY! Thank you so much for posting this! It bothers me to not have the links looking pretty. Can't wait to give it a try!

  2. Thanks for posting this I've spent the day googling how you line up html buttons and couldn't find anything! :)

  3. That's actually really helpful - I've tagged it so I can come back to it later.

  4. yes, this will be very helpful. I'll have to come back to it when I have a fresh mind tomorrow. LOL

  5. It does my heart good to see my daughter writing computer code! (how ever different from what I used to write!)and no punch cards to mess with or drop!

  6. You were reading my mind!!! I have been trying to figure this out! You are amazing. Thanks so much.


Your comments make my day!!

Sign up to be notified about upcoming classes!!

* indicates required