Wanna upgrade from Classic Blogger?

How many of you are still using the Classic Blogger Templates? you? or maybe You? Oh no, not YOU!!

Seriously though. If you're still using Classic Blogger why not upgrade? It's so much easier to personalise your blog once you've upgraded to the new Layouts. To say it's user friendly doesn't do it justice. You have to see for yourself.

And you can always revert back to the classic template if you absolutely hate it. Yup, it's true!

Leave a comment on this post or email me if you're ready to take the plunge. When enough of you step up to the challenge, I'll put together a tutorial and will hold your hand along the way.

Pictures/images - resizing

Thank you bingeknitter so much for typing up the tutorial on posting pictures side by side. I don't actually use tables myself but I have often wondered how I could use them just for this purpose. It was very helpful.

Regarding the resizing of photos/images, I haven't tried it in the table format so I'm not sure whether the following would work, but it's worth a go...

Again, brackets should be changed to either <> appropriately.

The image URL will start with http:// and will end in jpg. or jpeg.

(table)(tr)(td)
(img src="image URL"/)
(/td)(td)
(img
src="image URL"/)(/td)
(/tr)(/table)

Inserting an img style tag between the image URL and the img src tag, should allow you to format any image or photo that you post to your blog. When you upload an image to Blogger, look at the HTML view of the image and you'll see tags that look similar to this:

(a href="http://i71.photobucket.com/albums/i146/craftybernie/P7260027.jpg")(img style="FLOAT: left; MARGIN: 0px 10px 10px 0px; WIDTH: 200px; CURSOR: hand" alt="" src="http://i71.photobucket.com/albums/i146/craftybernie/P7260027.jpg" border="0" /)(/a)

The first part is the address or the URL of the photo - this is where people will be directed to when they click on the image itself (you can change this to your blog or another website):

(a href="http://i71.photobucket.com/albums/i146/craftybernie/P7260027.jpg")

The second part is the style of the image, namely the formatting of the image -

FLOAT:LEFT; - the image is aligned to the left of the post.
MARGIN: 0px 10px 10px 0px; - there is a margin or space of 10 pixels at the
right & bottom of the image.
WIDTH: 200px; - the image is 200pixels wide (you can make the image bigger
or smaller by increasing or decreasing this figure)

(img style="FLOAT: left; MARGIN: 0px 10px 10px 0px; WIDTH: 200px; CURSOR: hand" alt=""

The last part is the actual source of the image, namely where the photo is being hosted on the internet (photobucket/flickr/picasa, etc). Do not change this!

src="http://i71.photobucket.com/albums/i146/craftybernie/P7260027.jpg" border="0" /)(/a)

Display pictures side by side - tutorial

This is done as a table with two columns. The only disadvantage that I can see is that you cannot click on the pic to have it enlarged.

(table)(tr)(td)
(img src="image URL"/)
(/td)(td)
(img src="image URL"/)(/td)
(/tr)(/table)

Change the brackets to <> appropriately.
The image URL will start with http:// and will end in jpg. or jpeg.

In the image URL you will have the image size looking something like this /s144/ or 144px can be with a different number, depending on the size of your original image. Find out the size of your mainframe in the html edit

#main-wrapper {
width: 410px;
float: left;

And then change the size of your image from 144 to half the main wrapper width (200 or 205 in this case) to fit the frame nicely.