April 25, 2012


First and foremost I think I should offer an apology for any confusion the first of my layout lessons post caused. Over here in My Girl Thursday-land I'm still using the Minima template and so my advice was based on the assumption that it would work for the more commonly used Simple template. It didn't. Sorry about that!

Okay, so to rectify that oversight I'm going to show you exactly how I compose my posts. What you'll get in the end is a post with photos and text that fill the entire width of your content bar. As an added bonus you won't have to deal with those crazy ass gaps that occur between photo and text. What's up with that nonsense?! We're going to do it all by creating the majority of the blog post in the HTML section of the composition box. You scurred? Don't be. Just imagine me holding your hand (but don't go any further or you'll have to imagine you buying me dinner).
First things first. Click the button to create a new post. Then click the tab that says 'HTML'. You'll see a little bit of this...

Then I just start typing like I'm writing a letter to my imaginary best friend. Blogging is so much fun! ...I'm so lonely.

But wait one second, what happens when I need to show a picture of my cat? People have to see my cat and her hilarious hijinks!

This is where we'll begin to use some HTML tags to place images within the blog post. First you'll need to upload your images to a photo hosting site. The most popular options are Flickr and Photobucket. Since Flickr decided to make their images unpinnable I tend to use Photobucket more often these days. Plus I like how easy Photobucket makes it to grab the url of the image. It saves me quite a few clicks and that's important because I'm lazy.

So you've uploaded your image to Photobucket (I'm just assuming you took my solid gold advice). Next you'll want to copy the url of the image location. (With Photobucket you just click that link and it automatically copies it to your clipboard.)

Now you'll go back to your composition box. Don't start pasting like a premature mouse clicker. We have a bit of typing to do first. Where you left off you just had some text, correct? Well click your ENTER key twice like you normally would to create a line break. Then you're going to start creating the HTML tag for inserting an image. Your completed picture insertion (that sounds wrong) will look like this...

The wonderful thing about that whole 100% thing is that you don't need to adjust the size of your image before uploading it to your photo hosting site.  That coding will automatically resize your image to fit the width of your content bar.  Change the width of your bar in the future?  So long as you used that added coding the width of your image will change as well.  And that is very, very cool.

The last thing we're going to do before clicking over to the 'Compose' tab of the composition box is to add the appropriate line breaks. I never used to have to do this with the old Blogger interface but this new fangled edition doesn't play as nicely. I add a line break wherever I would have hit the ENTER key to add a line break. Here's some examples...

Now I click over to the 'Compose' tab and add a few finishing touches. I tend to do it in this order so that I don't get ahead of myself and publish the thing too soon:
1. Adjust the alignment of text to 'Justify' so that my text spans the full width of the content bar. This isn't a necessity but I think it's adds a nice clean touch.

2. Add any links that I would like to showcase. 
3. Italicize, bold or highlight any text for added effect.
4. Check spelling if you harbour bad memories of childhood Spelling Bees.  I do.
5. Add a 'Label' if necessary. 
6. If you're not planning on publishing your masterpiece right away then be sure to schedule a time for later.

That's how I do it!  It might seem a bit crazy bananas at first but I've always had better luck putting my posts together this way.  Blogger can be a shifty character and it likes to mess with the layout of your posts.  While you are putting everything together in the HTML tab try not to jump over to the 'Compose' tab to check your work.  Instead click the 'Preview' button that is located up top near the 'Publish' button.  When I used to switch back and forth between my HTML and Compose every once in a while I would notice that changes in spacing would occur without having done anything to change it.  Like I said, shifty.

I hope this tutorial serves you well.  As always please don't hesitate to leave questions in the comment box below.  I'll do my darnedest to get back to you quickly so check the comments again within 24 hours for an answer.

Good luck and happy blogging! ♥