Monday, 30 January 2012

How Does Your Blog Look ~ Resizing Buttons

Keep the buttons on your blog neat and tidy by learning how to resize them... TUTORIAL ~ Threading My Way

Most of us place buttons on our blog:
  • to show that we've been featured
  • to show what projects we're taking part in
  • or just because we like something.
What ever the reason, most of these buttons originate from someone else's blog. As intended by the button owner, we copy the button code and put it somewhere on our blog, often into our sidebar.

The button attributes are determined by the code:
  • alignment
  • whether it opens in the same or a new window
  • and sometimes, the size of the button.
What this means for you, is that buttons will probably not line up, they will probably be different sizes and they may or may not open in a new window. 

If there is nothing in the code to determine the size, the button will retain its original sizing. Sometimes code is added to change the original size.



So, what do you do if you want all of your buttons to be the same size?
I have absolutely no experience with coding. This is what I have learnt by looking at code and experimenting. It is not necessarily the best way to code, just what works for me. As always, back up your work before you experiment with coding. (Copy the code, create a new post and paste the code into the new page. Don't publish the copy.) Here's how I change button sizes...

Look at the code and see if there is anything in there that would indicate the size is set. eg:
height="200" width="150"
You can alter the size, simply by changing the value of these numbers. Bear in mind, however, that if the button is a rectangular shape and you want to make it square, it will be out of proportion, which may or may not matter.


If there is nothing in the code to indicate size, you change it by adding code. I add the following:
style="height: 150px; width: 150px;"
Vary the numbers to make the button the size you want. Again, take the original proportion of the button into consideration.

Add the code after the button name, in the example below _nameofgraphic.jpg The extension after the button name will most likely be .jpg or .png.

<a border="0" href="http://blogname.blogspot.com/" target="_blank"><img src=https://sourceand_nameofgraphic.jpg style="height: 150px; width: 150px;"></a>


Most of the buttons in my sidebar are 150px x 150px. The buttons on my Parties page, are 100px x 100px.


There you have it... How to change button sizes for consistency on your blog. I'll do a separate post on changing the alignment of buttons, so they are in a nice, straight line. You can read this previous post, to see how to ensure buttons open in a new window.

Should you alter someone else's button code? You are, after all, changing how their button will appear on your blog. That's up to you to decide...

... Pam


Edited to add: Thanks to Stephanie, from Toastie Studio, for the comment below on keeping buttons in proportion.

To keep rectangular buttons in proportion, you only need to change one value, either the height or the width and the other side will change automatically and still be in proportion.

To change the width:
<a border="0" href="http://blogname.blogspot.com/" target="_blank"><img src=https://sourceand_nameofgraphic.jpg style="width: 150px;"></a>

To change the height:
<a border="0" href="http://blogname.blogspot.com/" target="_blank"><img src=https://sourceand_nameofgraphic.jpg style="height: 150px;"></a>

This is why I love the blogging world. There is so much to learn and always someone who will help you along the way. Thanks, Stephanie!

How Does Your Blog Look ~ Master List



Have you seen our ongoing themed link parties?

Master list of ongoing link parties at Threading YOUR Way with Threading My Way 


31 comments:

  1. Thanks Pam! I really need to clean up my link party page, it's a complete mess! This will help!

    ReplyDelete
  2. Another great helpful tute Pam!


    Thanks for linking to a Round Tuit!
    Hope you have a fabulous week!
    Jill @ Creating my way to Success
    http://www.jembellish.blogspot.com/

    ReplyDelete
  3. Thanks for the tips, Pam! This will help me reorganize my link party page. I will have to try it out.

    ReplyDelete
  4. Another great thing when changing sizes is that you don't have to give a value to the height AND the width, you can just do one value and the other will automatically adjust keeping the images proportions!

    If you put style="width: 150px;" on all your buttons that are listed down your side bar, they will all be the same width, but their heights will adjust proportionally, keeping the shape of the button, but still looking nice and uniform!

    Thanks for linking this to my blog party!

    ReplyDelete
  5. Thanks so much, when ever I link up to parties my post always looks like complete mess, please do the how to make them in straight lines post soon : )

    ReplyDelete
  6. Thanks for the tutorial! I would absolutely love it if you would link this up to our "impossibility" party. Here's the link:

    http://thistlewoodfarm.wordpress.com/2012/01/31/a-journey-of-1000-steps/

    Thanks for the inspiration!

    blessings,
    karianne

    ReplyDelete
  7. This is great! I placed a link to your page of blogging tips on my post

    http://4you-withlove.blogspot.com/2012/02/blogging-tips-2.html

    Also,I'm your newest follower!

    ReplyDelete
  8. Awesome, awesome. This is the kind of stuff that you always want to do with your blog but feel like you don't have the time (or sense, lol) to figure it out. Thanks for doing the hard work for me, and thanks for sharing at our Link It Up Thursday party.

    ReplyDelete
  9. Thank You for sharing this information

    Mrs. Delightful recently posted: My Memories Giveaway @ ourdelightfulhome.blogspot.com

    ReplyDelete
  10. Thank you so much Pam!!! I'm so glad I found you at Weekend Wander this week.

    ReplyDelete
  11. SOOOO many people with blogs need this info. It's one of the first things I looked up when I started my blog! On the subject of good blogs...
    I hope you don't mind but I'm trying to get the word out...
    If you are worried about the fact that google friend connect is being discontinued even eventually for blogger blogs then please come read my latest blog post, I'm trying to get the info out there about MR. LINKY'S new FOLLOWER tool!! Yes, the same guy who wrote the cool linky tool has now put out a FREE Follower tool!! Come on over and read all about it.
    Best,
    Jennifer McLean from www.justaddwatersilly.com

    ReplyDelete
  12. Thanks for sharing this, will definitely try to do this. This was one of the reasons that I changed my places I party page to written links instead of buttons, could never get them to line up pretty and they were all different sizes. Now I know how to change the size and am anxiously awaiting the rest of the tutorials! I am your newest follower

    ReplyDelete
  13. Great tips! Thanks for sharing at oopsey daisy!

    ReplyDelete
  14. Thanks so much for linking up...Lisa Leonard Designs giveaway just started on my blog!! Stop by if you haven't entered yet...


    XO, Aimee

    ReplyDelete
  15. I haven't gotten to finish correcting it yet, but I just changed a few buttons, and it's awesome!! I made a couple HUGE buttons (that were driving me crazy) a more normal size. Thanks, Pam!!!!

    ReplyDelete
  16. Thank you, Pam!
    Actually yesterday I spent like 4 hours with a friend who is a programmer because I needed to re-size / align my buttons. It's my first time on link parties, so I was confronted with this problem for the first time. I only understood how to align the buttons. But now - I'm gonna re-size them too. YAY!

    ReplyDelete
  17. Ah I saw this post forever ago and finally spent the time to do it tonight! So impressed with how much neater it makes everything look! Thank you.

    ReplyDelete
    Replies
    1. I like all the buttons neat, too. Glad it helped, Kate.

      Delete
  18. Thanks! This helped a lot. x

    ReplyDelete
  19. Wow!! Am I ever so grateful for stumbling upon this blog post!!! You have a follower for life now!! What an amazing little trick that I would have NEVER thought of!!!

    Thanks so much...and feel free to "check out your genius" here...(http://uniquelyundone.blogspot.com/2013/03/tip-of-week-lemon-juice-rust.html) all my linky buttons are nice and uniform!!

    Kate @ Uniquely Undone

    ReplyDelete
  20. Thanks for this!! I just started the link party circuit and everyone's buttons are sized differently...my OCD does not like this!!

    You helped this sista' out, thankyouveddymuch!!

    http://soliloquyoffoodandsuch.blogspot.com/p/linky-links.html

    ReplyDelete
  21. Hi! New follower! I've been trying to do this forever! TFS!

    Inviting you to follow me at www.pjstreasures.blogspot.com

    ~Pam~

    ReplyDelete
  22. This is great!! Thanks so much! I had to resize one of the buttons I wanted to use because I have smaller side bars and this worked fabulously! :)

    --Michelle @The MaMade Diaries

    ReplyDelete
  23. Yet again your helpful advice useful for blogging! Thanks again this time for the resize buttons.

    ReplyDelete
    Replies
    1. You are powering along, Lynn. Well done!!!

      Delete
  24. Thank you! I'm no code monkey either and this was extremely helpful and easy to understand. :)

    ReplyDelete
    Replies
    1. Glad you found the instructions easy to follow, Shelly.

      Delete
  25. I did this on my link party buttons, and the looked right on my edit page. But they all published at their original size. Any idea what might cause that?

    ReplyDelete
    Replies
    1. Not sure why this would happen. Tried to look at your link party page, but your profile doesn't link to your blog.

      Delete

Thanks for stopping by! I love reading your comments and try to reply to all of them via email.