Tuesday, August 24, 2010

Changing Image Sizes [Tutorial]

Okay, so after one of my Blogger Tutorials, a reader had a question about changing the sizes of buttons that she picked up from other blogs.  There’s no way to ensure that all buttons will be the same size without adding a bit of HTML!  This would also be helpful to make sure images fit your posts or sidebars, and keeps things the same size so they look nice and neat.

So here we go…

  1. ALWAYS BACK UP CODE BEFORE CHANGING HTML! It will save you lots of potential tears.
  2. Go wherever you need to to change the HTML, whether it’s a specific post, a gadget on Blogger, or the HTML of your template.
  3. Find the portion of the HTML for your image.  It should look something like this: <img src=”url of image”>.
  4. This next part is really easy!  All you have to do to change the size of the image is add height and width elements in by adding height=”desired height” and width=”desired width”. 
  • For example, if I wanted to change my button size, which normally looks like this:

And here is the code for that:
    <center><a href="http://www.cheapgeeksanonymous.blogspot.com"><img src="http://i14.photobucket.com/albums/a306/Selana46/CGA%20Stuff/CGAButton.gif" /></a></center>
     
  • All I have to do to change the size is add the bolded areas:
    <center><a href="http://www.cheapgeeksanonymous.blogspot.com"><img height=”100px” width=”100px” src="http://i14.photobucket.com/albums/a306/Selana46/CGA%20Stuff/CGAButton.gif" /></a></center>
    And we end up with this:
 
  • Save, and you’re done!

__________________________________________________________

So, to answer the original question, all you have to do to make your button page look uniform and tidy is go into the page’s HTML and change/add the height and width to a uniform size for every button.  Depending on how many buttons you have, it might be a little time-consuming, but once you get the hang of it, you’ll be done in no time.

 

Feel free to link to or share this tutorial, but please credit me!

 

If you have anything else you’d like me to create a tutorial for, don’t hesitate to ask.  I do have a few others that I have to write yet (sorry it’s taking so long!), but I do promise to get to each and every request.

3 comments:

  1. Hey! This is a great idea and I just tried it, but I did something totally wrong and it erased most of my buttons ;( For some reason when I cut and pasted, it put spaces in the button codes that won't allow them to show even when I remove the spaces...please help!

    Steph

    ReplyDelete
  2. Thanks for the tip. It made it possible for me to straighten up my side bar by making everyone's button a standard size.

    ReplyDelete
  3. I just wanted to let everyone know that if you have questions, I am always available to answer them. Just comment or shoot me an e-mail if you have any problems with my tutorials. I may not comment here, but I do e-mail everyone who has issues. Just so you all know!

    ReplyDelete

Thank you for visiting Cheap Geeks Anonymous and aiding me in my quest for world domination!

Note: Only a member of this blog may post a comment.