This article is about lining up text and pictures side-by-side in your posts - and about how to add a "break" so that some text goes beside a picture and some goes underneath it. The post editor's picture menu:
When you have put a picture into a post in Blogger, (either using the Insert-picture option on the toolbar, or by adding the HTML for it some other way), the Post Editor gives you options for picture size, and for aligning the picture to the left, right or centre. You cab see these options by clicking on the picture. This opens a "mini-menu" under the picture, like this:
This one mini-menu has options for:
| Size | Options are small, medium, large, extra-large, and original-size |
| Alignment: | Options are left, right and centre (default is center) |
| Caption: | Add caption, and Remove |
| Properties: | Where you can add the hover-title and alternative-text for the picture |
| Remove: | Taking the photo totally out of the post |
The alignment options:
When you first add a picture, the alignment is set to "center".Choosing Left or Right moves puts the picture to the far side of the post and, if the picture isn't as wide as the window it's being displayed in, the text that was after the picture fills up the space on the other side - like this:
Stopping all the text from flowing around the picture:
Many bloggers want to have pictures left or right aligned, and to have some words showing beside the picture.But they also want to control
what text is shown beside the picture, and what text doesn't start until underneath it. Many people spend a long time putting extra lines into their posts, so that the text and pictures are set up in a way that's "just right" - and then they're disappointed when they publish the post and their hard work is all lost, because the screen is wider and more text fits into the area beside the picture.
There is a very easy way to control this. You just need to edit the HTML that is behind the post. Luckily, this is very easy to do:
1 Put some
place-holder or "marker text" where you want the flowing-text to stop.
(eg BREAK HERE or XXXXX - use some words that won't be anywhere else in the post)
I've made it bold and with a yellow background to make it show up in the picture - but I
don't recommend that you do this, because it makes it harder to find and replace exactly the correct text later on.
2 Choose the HTML option (top left or top right of the post-editor screen, depending on which version of blogger you are using).
3
Find the place-holder text
(hint: use your browser's search function - in Firefox, it's Edit > Find)
4
Replace the place-holder text with this code:
<div class="separator" style="clear: both;"> </div>
5 Choose the
Compose tab (to get back to the regular post-editor screen). The text after where the marker text was is now underneath the picture - and it will be there when you publish the post, too, no matter what size of screen your reader has.
Troubleshooting:
Extra blank lines:
At the bottom-left of the post-editor, there is a link for Post-Options. Clicking this opens an options panel, where you can choose what effect line-breaks (ie pressing the "enter" key) have. I always put it on "
Use <br /> tags", so that I can put extra empty lines into the HTML to make it easier to read. If it's on "Press Enter for line breaks", then each extra line put into the HTML will also show up in the Compose-mode view, and in the final post.
Editor versions:
The pictures and instructions in this article are based on Blogger's "updated" post editor, not the old one. The technique will work in the old editor too, but things may look a little different.
Related Articles:
Stopping pictures on your blog from being "clickable"Getting the HTML code to put a picture into your blogPutting HTML from elsewhere into your blog Telling Google about the pictures in your blogInserting a picture into a blog post Applying hover-text to picturesTools for applying copyright protection to your blog
