Thursday, February 26, 2009

Blog design tip of the day - Resizing someone's blog button

Update - RSS reader friends, you'll probably have to view this post on the actual blog - The text boxes the code is in are showing up as the actual code inside them, which won't make sense to you.


I only started "professionally" redesigning blogs a few months ago, thanks to Heather, who asked me to design her a blog header because she liked mine. When asked how much I would charge, I just told her to donate to my BikeMS ride (the one I hadn't registered for yet!). 

Since then, I've raised almost $400 for the MS Society by designing blogs and basically started a new business, Blogs by Mandy. I'm hoping that after BikeMS is over in May, I can continue to design blogs both as a way to raise money for organizations I believe in (String of Pearls is next!) and for a little extra cash to do things like MckCruising. But at least part of the money spent at Blogs by Mandy will always go somewhere else. It just makes good sense to me.

Since I love all of you "tens" of faithful readers so dearly (seriously!), and I believe the reason I get clients is lack of time, not lack of ability (i.e., I'm not taking clients away from myself, and if I am, oh well, you've learned something), I'd like to start a new series of blog posts with instructions for modifying your blogs yourself! My HTML and digital deign ability is self-taught, and I believe that anybody can do this if they have time.

So, without further ado, welcome to my first blog tip of the day:

Resizing your blog buttons

You guys all have friends whose blog buttons just aren't the right size for your sidebars. And because you're so devoted to them, you add their buttons anyway. This results in about half of the button actually being visible. This cut-off look isn't ideal, but you don't know how to change it.

Mandy to the rescue!

You can find out how wide your sidebars are by viewing the HTML for your blog. To find your HTML, go to your Dashboard, click "Edit Layout," then click the "Edit HTML" tab. There, you'll find a text box with a whole bunch of HTML in it. You need to find the section of code that looks something like this:

Your code may not have the same wording; perhaps it says "sidebar-left," "sidebar-right," or just plain "sidebar." In any case, the number below the sidebar code is what you're interested in. On this "blog," it says "width:140px," which means that if my blog button is bigger than 140 pixels, it's not going to fit. Once you know this, you'll know the maximum size the buttons you add to your sidebars can be.

Now, on to the actual button code.

The HTML for the button probably looks a lot like this:

...and this is what the button looks like on your blog:
Blogs by Mandy

Let's take a look at the actual HTML. 

Do you see the section that says this?

This is the part of the code that points to the actual image. The URL within this code is a link to an image - see for yourself:

In this case, it's a .png file. The URL on your button could end with .jpg, .tif, .bmp, or any other image extension. Just look for the code that begins with "img" and you'll likely find the URL pointing to the image soon after that.

To modify the size of the button, you need to add a width to the button. You can do this by adding a width to the image code right after the URL, which, in this case, is "width=140px," telling the image to resize itself to 140 pixels wide.

Now, your image code looks like this:

And all put together, your entire button code looks like this:

And your image looks like this:
Blogs by Mandy

instead of this:
Blogs by Mandy

Exciting, yes?


By the way, once you've sized your button to what you want it to be, you may want to also center it on your sidebar if that's not included in the code. To do this, just add before everything in the code and after everything in the code. Then, all your buttons line up!

Get it?


If you liked this tip, and want to see a tutorial on something else about blog design, please leave me a comment! If, like many of my clients, you just don't have the time to learn how to do all this stuff, then check out my portfolio and what I'm about and hire me to do it!


Jamie McLaughlin said...

Time! Yes time is why I hired you. It wasn't at all my complete lack of ability.

Abigail Hutchinson said...

Oh man! Thanks for the great tip...I totally made my own blog button and had to upload the same stupid pic into photobucket 4 times cuz it kept being too big or too small! hheehhe! Hey, I have a question for you..How do I make my blog the 3 column format? I have no idea where to find the template for that on blogspot!

Alicia said...

I am glad I "hired" you. I love my new blog. But I do love all the tips. I might try and re do my other blog using your tips. Have no fear though if I mess it up I will come straight to you lol!

Brittany said...

Thanks so much for this tutorial! I have been trying to get a couple of buttons to fit on my blog right but with this it took me a whole 10 seconds and it was perfect!!