Tips and Tutorials #1: Align your sidebar widgets

Hi there! I thought I'd make a little feature with some very simple tips for building a better blog. Because, who doesn't want to have a pretty and functional blog? 

Some of these tips are my own, some I learned elsewhere and am just sharing with you (you'll find the link to the source in the post).

Today I thought I'd teach you how to pretty up your sidebars. A lot of blogs, especially fashion blogs, tend to have sponsor banners on their sidebars, or buttons to other blogs.

And sometimes your sidebars can look like the one on the left.

A button to the left, one centred and another to the right, or to the left, etc. Here's how to fix that, so your sidebars will look better.

Every button/banner has an HTML code you have to copy and paste on your blog, like this:

<a href="http://www.blogcatalog.com/directory/lifestyle/fashion/"><img src="http://www.blogcatalog.com/images/buttons/blogcatalog7.png" alt="All Award Winning Fashionista & Fashion Blogs - BlogCatalog Blog Directory"/></a>

<a href="YourURL"> is the link to the page you want your image to link to.
<img src="ImageURL"> is the link of the image you want your button to be. The alt inside the img tag is the little yellow box that appears when you hover your mouse over the button, and a title appears. That's for when a browser doesn't show the image, and instead you see the title with a link.

Closing tags (placed at the end of codes) always have /'s, like <center> for the beginning, and </center> at the end. So remember to close your tags!

If you copy and paste this on your blog, the button will appear on the left, like on the first photo above. To centre, you have to add <center>, </center> tags at the beginning and end of the code, like this:

<center><a href="http://www.blogcatalog.com/directory/lifestyle/fashion/"><img src="http://www.blogcatalog.com/images/buttons/blogcatalog7.png" alt="All Award Winning Fashionista & Fashion Blogs - BlogCatalog Blog Directory"/></a></center>

And to make it the same size as the others, add width="80%" after the photo link. Like this:

<center><a href="http://www.blogcatalog.com/directory/lifestyle/fashion/" title="All Award Winning Fashionista & Fashion Blogs - BlogCatalog Blog Directory"><img src="http://www.blogcatalog.com/images/buttons/blogcatalog7.png" width="80%" alt="All Award Winning Fashionista & Fashion Blogs - BlogCatalog Blog Directory" style="border: 0;" /></a></center>

If the code you're copying comes with a specified width and height, delete it and place width="the percentage you choose%" only. 

If you don't have an HTML code, and instead you're just copying an image URL to paste on the Image Widget on Blogger, you can do this:

Open your code with <center> if you want the image to be centred; followed by the <a href=""> tag, where you'll place the link between the quotation marks. Then the <img src=""> tag, and an alt tag if you want. Before closing the img tag, put width="AnyNumber%". Close the <a href> and <center> tags.

So, your code would look like this:

<center><a href="the URL of the page you're linking to"><img src="the URL of the imge you'll be using" width="80%" alt="the title you want it to appear when you hover your mouse over the image" (up until here all tags are open) /> (<= that's the img closing tag) </a> </center> (closing a href and center tags).

You can copy that code and replace the text with links.

Hope this worked and you now have a pretty and symmetrical sidebar!
xo,
Ella

(original source, Parajunkee Design)