Tips for New (and not so New) Bloggers #1: Images in Blogs

Hi guys! I'm back after having spent a beautiful week with my family and been to a wedding!

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 if that's the case).

So today will be my first Tips and Tutorials post: Images in Blogs

A lot of blogs tend to have sponsor banners, challenge buttons, and things like that on their sidebars.

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

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 one:

<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.

Another thing about images in blogs is quantity. I get that you want everyone to know which challenges you're doing this year, which blogs are your favourites and which books you're loving, but filling up your blog with a lot of images makes it load slower, and a reader with a low bandwidth might get bored while waiting for your page to load. 

SO: 

1. You should always convert your images to PNGs. PNG files are not as heavy as JPEG files, making you blog load faster. Any photo editor can convert your files, you don't need to have Photoshop CS5.
2. Try working with a slideshow or a rolling marquee (like the one I have for Favourite Sites and Affiliates), saves space on your sidebars and looks more professional, don't you agree?
3. Make different pages on your blog for your features. Like my 2011 Challenges page. Instead of putting the images/links on my sidebar, I created a page solely dedicated to my challenges. You could make one for your affiliates, and put their buttons there. 

The key is not to overburden your blog with images, that honestly, you don't really need. Less is more!

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

xo,

Ella

(Idea for part of this post from Parajunkee Design)