Tech Tips Thursday: How to Center and Re-size Blog Images In Your Sidebar

How to Center and Re-size Blog Images In Your Sidebar. A step-by-step tutorial for the everyday blogger who doesn’t want technical jargon. 

After you’ve been blogging for a while, you tend to collect a lot of “buttons” for various things. (Buttons are those little graphics advertising various link parties, blogging groups and networks, or other bloggers. I have a ton here on my link party page.) Here’s my button in case you want it:

<div align="center"><a href="http://www.sustainingthepowers.com" title="Sustaining the Powers"><img src="http://www.sustainingthepowers.com/wp-content/uploads/2014/12/Sponsor-Button-Sustaining-the-Powers275pixels.png" alt="Sustaining the Powers" /></a></div>

The problem with collecting so many buttons is that they all tend to be different sizes, and some are aligned left, some center, and some right, so they tend to look a bit haphazard when you put them all together. 

Here’s an example from a friend’s blog that I worked on a few months ago:

Now, it’s not horrible in the least, but visually, your eye can’t decide where to settle when you look at them, so they tend to look a bit chaotic.

Here’s the same set of buttons all aligned to the center:

Doesn’t that same set of buttons look a million times better with that small change?! It’s crazy how much of a difference it makes and how much your eyes really prefer the second example. I really enjoy having all my ducks blog buttons in a row. Now, you can decide to align center, left, or right, but I prefer aligning center because it still looks great even if you have many buttons of different sizes.  

So, here’s the part where I tell you that you have to write 2 tiny lines of code to make this happen. I promise you that it’s going to be super duper easy and I’m going to be very specific so you can do it too.

How to Center Button Images in Your Sidebar 

1. Open up your text widget or the text editor tab on your edit post page and look for the code for the button you want to center.  

The code for my blog button looks like this:

and makes this: 

 2. What you’ll be looking for are the html tags that contain “a” and “/a”. Tags are the things in between the angle quotes/sideways arrow things like this: < >.

Side note because I know you’re wondering: The “a” in this tag stands for “anchor” because the code is used to anchor a URL to the line of text you see on your web page. “href” that you usually see after the “a” stands for (H)ypertext (REF)erence. So all together, you’re anchoring a hypertext reference (URL) to the line of text to make what you see as a clickable link like this one. (That link goes to my valentine’s day candy making tutorial by the way.)

Here are the tags I’m talking about highlighted in the button code above:

They’re almost always at the beginning and end of the button code, so it’s not too hard to find. 

3. Next we’re going to paste a few short bits of code before and after these tags. The code we want is:

<div align="center">

before the first “a” and this code:

</div>

should go after the “/a”

Note: I have to use the code boxes above because if I actually type the code my blog post will think I want it to process the HTML and won’t show it to you anymore. 

4. All together, the new code will look like this: 

and makes this: 

How to Change the Image Size Using HTML Code

1. Go to your HTML button code again and look for a tag that says “img” (See directions above if you don’t know what a tag is.)

Here’s my code with the”img” tag highlighted: 

(“img” is short for image by the way.)

2. Insert the code for the new desired height and width immediately after “img”.  Note that the size in quotes is measure in pixels.

Here’s the height code:

height="175"

and the width code:

width="175"

Here is what it looks like when I put it in the code. Be sure to leave the spaces between “img” “width” and “height” so it will work:

And here’s what my resulting image now looks like:  

Have you worked with HTML before?