Wednesday, 3 July 2013

How To Align And Re-Size Blog Buttons

Pin It!

I've shared a couple of tutorials on blog buttons, including how to add social media icons to your sidebar and how to add buttons to a post signature. Occasionally I get emails from people asking for further tips on how to get the buttons behaving as needed. This means lining up nicely, or fitting in better with the sidebar. So today I am sharing a quick tutorial on how to re-size your blog buttons and set their alignment using simple HTML code. 

This tutorial doesn't just apply to social media icons, you can also use it for getting your link party buttons looking neat and orderly. Actually, these bits of code can be used for any image, not just buttons, but I'm writing the tutorial in this context because it reflects the questions I receive.

How To Re-Size Blog Buttons And Images


What if you have download some pretty blog buttons, (like my free social media icons), but they are slightly too wide to all fit in your blog's sidebar? Having them over two different lines just doesn't look quite as neat! In this sort of situation, you need to know how to re-size an image.

The HTML code for images looks like this:

<img src="MyImageHost.com/MyImage.jpg">

If you want to alter the size you need to add in a width and height command:

<img src="MyImageHost.com/MyImage.jpg" width="50" height="50">

And since we are talking about buttons in this tutorial, this is an example of how the entire HTML code for a social media icon might look:

<a href="SocialMediaSite.com/MyPage"><img src="MyImageHost.com/MyImage.jpg" width="50" height="50"></a>

To help you re-size your buttons, here is a visual guide of what different widths/heights look like in pixels.



How To Align Buttons And Images


If you are adding images or buttons to a Blogger blog post, aligning them is very easy. If you click on the image in Compose mode then it brings up your options for alignment (right, left or centre):



However, adding buttons to a sidebar or signature means using the proper HTML. 

Align your buttons to the left


To align your buttons to the left, you will need the following code:

<div align="left">
</div>

The code for the buttons is placed in between the two commands, so that your HTML will look like this:

<div align="left>
<a href="http://www.bloglovin.com/mypage"><img src="MyImageHost.com/bloglovinbutton.png"></a>
<a href="http://www.plus.google.com/mypage"><img src="MyImageHost.com/googlebutton.png"></a>
<a href="http://www.pinterest.com/mypage"><img src="MyImageHost.com/pinterestbutton.png"></a>
<a href="http://www.feedburner.google.com/mypage"><img src="MyImageHost.com/rssbutton.png"></a>
</div>

Align your buttons to the right


If you want to align either icons or an image to the right of the page then the code is:

<div align="right">
</div>

As with the previous example, the code for the image(s) goes before the </div> command.


Align your buttons to the centre

Finally, to align your buttons or image to the centre the code is:

<div align="center">
</div>
English bloggers, please note that the HTML command uses the American spelling of "center".


25 comments:

  1. Thanks so much for this because my "grab my button" image is huge and I couldn't figure out how to fix it. This came at the perfect time. Thank you again!!!!

    ReplyDelete
  2. What a fantastic tutorial on how to do this - I've always wondered!!!
    Would it be ok if I put a link to your site on my blog for this page?
    THanks!

    ReplyDelete
  3. Fantastic - it worked! Many thanks...

    ReplyDelete
  4. I needed this! TFS

    PAM
    @ www.pjstreasures.blogspot.com

    ReplyDelete
  5. Nice! Pinned:)http://www.sewsweetvintage.com/2013/06/red-white-and-blue-roundup.html

    ReplyDelete
  6. I saw you at the Real Thing with the Coake Family - great tutorial. I'm a fan now. :)

    ReplyDelete
  7. Thanks so much for sharing! I have been looking for the answer to this!

    ReplyDelete
  8. Very helpful! Although now I have a project. Glad I saw this at the Bloom party. New follower.

    ReplyDelete
  9. Thank you so much for the tips.
    Happy 4th of July!

    Ellya

    ReplyDelete
  10. I just read a blog post on how important it is to have images scaled to the right size on blogs, because it helps the pages load faster, so this is very helpful, thanks!

    ReplyDelete
  11. Found you on Show & Tell Saturday but then realized I used your blog buttons on my blog! Now following you :)

    Alyssa @ ohsewcraftylife.blogspot.com

    ReplyDelete
  12. So glad I found your blog this past week. I keep running into your tutorials via blog hops. :)

    ReplyDelete
  13. Awesome tutorial! You have the best ones! Thanks so much ;
    Jamie @ somuchbetterwithage.com

    ReplyDelete
  14. Pinned! Thank you, GREAT tutorial!!!
    Stopping by from The Frugal Foodie Mama Link Up :)

    ReplyDelete
  15. Awesome tutorial! Shared this on my google+ page :)
    Ang

    ReplyDelete
  16. Great tips! I'll definitely be hanging on to these!

    ~ Tenns
    New Mama Diaries

    ReplyDelete
  17. So helpful! You have the best tips, they are easy to understand and always work. Thank you so much.
    Sarah
    http://www.creativeramblingsblog.com

    ReplyDelete
  18. Great info!!! Sharing on facebook and twitter, thanks for sharing at Marvelous Mondays. I also wanted to ask you if I could add this link to my Resource tab on my blog. I post a lot of helpful blog tools like this there. I only post the title linked back to you, I wouldn't post any of the tips. Will you email me at pmctunejones@gmail.com if that's ok? This is a link to the resource tab so you can check it out. http://www.callmepmc.com/resources/important-links/

    ReplyDelete
  19. That is so much easier than the way I have been doing it! I have been re-sizing them in individually in picmonkey, then uploading them to photobucket. Then when I realize they are still the wrong size, I go through the process all over again...LOL I absolutely love your helpful tips, thank you so much Angela :)

    ReplyDelete
  20. Thank you so much for the great tutorial! Pinning!

    Ritchil
    http://chengand3kids.blogspot.com/

    ReplyDelete
  21. I think a lot of bloggers and aspiring blog designers would love to know how to do this! Thank you for sharing this tutorial Angela, I bet it's going to help a lot of people!

    My readers would love this tutorial! I’d love it if you linked this up over at Living Well Spending Less for Thrifty Thursday this week! http://www.livingwellspendingless.com/category/thrifty-thursday/

    ReplyDelete

Thank you for taking the time to leave me a comment. I try to respond to as many as possible. :)