Organizing Blog Buttons

So we’ve all seen it right, the {Link Party} pages that go one of two ways – a long huge list of random blog buttons down the center of the page, causing you to scroll down for 18.2 minutes, or the random splattering of blog buttons all over the page, in different sizes and alignments, as if just thrown there.  Does it ever drive you nuts?  It drove me nuts, and it drove my friend Jill, over at Create.Craft.Love nuts, so when she asked me how to fix them before her OCD kicked in and drove her crazy, I decided to write a tutorial to share with you.

Before we get into how to fix it, let’s review some basic html for those who may not know.  The code for your basic image link looks like this:

This is a wide open image tag – it has no restrictions on alignment or size.  However when you add images to blogger, it likes to tell you how you can and cannot display your images.  For instance – you must left, right, or center align each image, and you cannot just line them up one next to the other.  Also, Blogger likes to give you predetermined sizes (S, M, L, XL, or original size).  So each time you add a button, Blogger places those images into one of those categories.  That’s why you have the random mess you see above.  And that’s why I am here to fix it.
Here’s how.  {And I promise, it really is simple.}  Go to your {Party Page}, or whatever page you want to use this technique on (I also used it to create my projects and tutorials tab at the top of my page).  Add your image codes (or your images if you are creating a projects tab – you will need to manually add the linkable part to the code).
There are a number of things you will need to delete.  These are all of the codes placed on the image link by either Blogger or the person that created the code.  Here’s what you need to delete:

I like to space my images out so I can clearly see what code belongs to each image.  I simply hit enter after every because I know that piece of code means the end of a link.  I space it out to look like this:

Another step that you will need to address is the target=”_blank” section of the code.  This is what tells the image link to open in a new window.  You can delete it from all, or add it to all, but you should keep it consistent.  I chose to add it to all for the purposes of this tutorial, but if you want to delete it, you just delete the section of code that is highlighted in the first portion of the image below – and repeat for every image.

Once you finish all of that, if you click on “preview” you will see that your link party page now looks similar to this:

That’s because we have deleted all of the variables and now all that’s left is the basic image tag.  This means we haven’t told Blogger how to resize the images, and the images are left in their original uploaded form – someone could have uploaded their image in 1000×1000 (huge!) like our Keep Calm & Link Up button, or people could have created any range of “acceptable” button sizes, since there isn’t really a steadfast rule about size, and anywhere from 125×125 to 200×200 is the going size.  So now we need to go back and tell Blogger we want all of these images to look the same.  Now thankfully – that is super easy.
Click on the “compose” tab to get out of the html window.  You will now see your images instead of code.  Click each image, and select small.  If it already says small but doesn’t look the same as the others, choose medium then choose small again – it should resize correctly.  IGNORE THE ALIGNMENT!  Don’t choose anything, or you will re-add the codes that you just deleted.

*Note:  If an image was created with white space above the image portion, it will look like it isn’t the same size, but really it is, the white portion just blends in with your blog background.
If you want to go back into HTML to see how this action affected your code, you will see this:

Height and width codes were automatically added to each link to make it the same size.  If you aren’t using Blogger, you can manually add these height and width codes to any html code and get the same result.

Now, if you hit Update, you will see your wonderful new Link Party page, or Projects page, or whatever you created page, in all of its shining, organized, wonderful glory.

OCD-inclined or not, you have to admit that this sure does look a whole lot better than what we started with!

*Update:  If you want to make your buttons even smaller, head into your html and change the height and width variables to something smaller – mine is set to 125, and here’s a snippet of how it looks.

About Sarah

Sarah Desjardins is a mother of two girls, a wife, an elementary school teacher, and a self proclaimed glitter addict. Becoming Martha is a place for anyone who wants to make their domestic life more beautiful and creative. Sarah started Becoming Martha as a place to find bliss between the diapers and the dishes, and invites you to do the same.

Comments

  1. Man! I wish this would have come out before I deleted all of the fun buttons and turned them into plain text links because they were driving me crazy!

  2. Awww! You didn’t have to work so hard on that! You are the best! =)

  3. So, I was all ‘no way, this won’t work so easily’…

    IT WORKED. YOU’RE A SPECTACULAR HUMAN BEING. :)

    Thanks so much!

  4. Thanks for the tutorial! I’ll definitely be trying this!

  5. Great tutorial! Very helpful … thanks, Sarah :)

  6. Yeah!! This is what I have been trying to figure out!!

    Thank you, Thank you!!

  7. How’d you know I was just wondering this very thing this morning? You’re awesome, thanks a million!
    Stacia@http://feathersandsunshine.blogspot.com

  8. This is great! Thanks so much. I tried to make mine look similar but I really didn’t know much about HTML so it still didn’t look as nice as I wanted. Now I can change it! And, I learned a bit more about HTML too :)

  9. Hi, I’m Shasta from the LinkyHere.com team. You recently submitted your blog hop and link party to our directory and they were both approved. I will be giving your blog hop a “welcome” shout out on twitter and fb tomorrow (Tues.). I’m also planning several posts on linky party tips and etiquette for our blog. I would love to reference (link back) your tips on organizing blog buttons in one of my posts….it’s an excellent tutorial! Please let me know if that’s OK with you. I don’t like to reference another blogger without their knowledge and permission.

    Thanks,
    Shasta (LinkyHere Team)
    linkyhere@gmail.com

  10. Great tutorial! I was OCD about my buttons as well and then found out how to make them pretty. Thank you for sharing this tutorial on Marvelous Mondays! :)

    Julie

  11. Whew! I would love for my link buttons or project thumbnails to look like this so I’m definitely pinning this to keep as a reference for when I stop procrastinating :) Thanks for the very thorough tutorial!

  12. WOW this is great. I’m pinning it right now. Thanks for putting this together. I’m stopping over from Clean & Scentsible Link Party. I’m your newest follower. Have a great day!!! :)

  13. Amazing information. Now…I just have to do it. :)

  14. That little piece of code has changed my whole blog – I now have custom buttons for everything! I was amazed to find it was so simple!

    Sarah
    http://acatlikecuriosity.blogspot.co.uk/

  15. Man.. I wish I would have found this a week or so ago. I finally did mine but this would have made it so much easier.

  16. It is very difficult for someone who knows HTML very well to explain it to those of us who don’t and let me just say that you have the BEST tutorial that I’ve ever used on any kind of HTML! You definitely have a gift in being able to give excellent instruction, clear and easy to follow! Thank you Thank you Thank you! I was just looking for info on this yesterday. I found your tutorial and I have pinned it and have also already applied it to my blog and it’s AWESOME! Thank you! You are so sweet for helping all of us out with this cause I’m OCD and it was driving me CRAZY!

  17. This was sooo helpful! It was so easy to follow, the pictures of each step were especially useful for us visual learners. It made my new projects page so much more organized. One question though – when I updated the size of the images, some of them were slightly distorted so I ended up playing around with the sizing in the code so they didn’t look funny… any idea why this would happen?? Great tutorial and love your blog otherwise :)

  18. What a fantastic tutorial! Thank you!! I will be trying this out on my blog. :)

  19. Thanks for this tutorial I needed it big time!!!

  20. Super helpful! I’m marginally terrified of code, but we are slowing making nice.

    Have a fabulous and inspired day!

    ~I hope you can take a moment to pop over to http://www.mywatermelonmoon.com and checkout my (relatively new) blog! I a follower of yours and would love you to give some blog love as a follower of mine! :) Happy Crafting!

  21. I’m not on Blogger, but I have recently been working on my Linkup Page. You have motivated me to work on it some more tonight. It has been driving me crazy! I need to get my buttons in order :)

  22. This is such wonderful and helpful information. I am using it to clean up the buttons on my side bar as well. Thank you so much for this helpful tip!!!

  23. I am soooo doing this once the kids are in bed. Your before picture looks just like my party page. See for yourself at http://thedomesticatedprincess.blogspot.com! I found you from the Happy Hour linky party.

    Thanks,
    Bonny

  24. Pinned it! I am too tired to figure it out tonight, but hopefully be able to tomorrow, because I sure need to organize my party page.

  25. This was awesome!! I’ve tried to resize and center all my buttons, but not knowing the code had left me to have a messy page. Thanks to you, and a few hours tonight, my featured page looks GREAT! Thanks so much!

  26. Thanks. I did this same thing on my sidebar last week. Pinning this great tutorial. Thanks for sharing this week at One Creative Weekend! Have a great weekend!

  27. Thanks for this. Do you have any special instructions for doing this on word press?

  28. Thanks so much, this was very helpful and easy to understand!

  29. Thank you! I am in some serious need of organizing my blog buttons…thank you! :-)

  30. Thank you for this! You have allowed me to seriously organize my blog!

    You can check out the pretty organized party page —>http://www.thecomfycrafter.com/p/link-party-time.html

    It looks sooooo much better now!!! thanks again!

    Mandy from thecomfycrafter.com

  31. Thank you sooo much! I needed this! I looked everywhere to find something that showed me how to do this and found NOTHING! You are Amazing and it was so easy to follow! Great post!

  32. This is way better than the image maps I created which are constantly needing to be updated!

    • Oh no! Did you seriously image map it all? Oh you poor, poor girl!!

      • I seriously did!! I’m just still so new to the whole bloggy thing! You can bet I am using rest time today to use your method and add about a million more links!! I just kept getting so frustrated, and the image map “Seemed” like the easiest option! Thanks for showing me the right way!!!

  33. Growl! I got them looking really good…in my editing window. But when I published, there was still a long row of different sized button. What could I be missing??

  34. Ok, got them side by side. Still different sizes, but way better. Baby steps, I guess.

    • I’m sorry, I’m just catching this comment now! Look through your code, the “size” code must still be in there. If there are no size codes in there (height, width), make your own, which will force it to be a set size, (i.e. height=”150″ width=”150″). Hope that helps!

Speak Your Mind

*

The Blogger NetworkAdvertise with us Report this ad

Have great ideas and fresh inspiration delivered straight to your inbox!

  • Kids Crafts + Family Activities
  • Simple DIY Projects
  • Delicious Recipes

Don't miss a thing - sign up below!