News!! Putting Text In Addition To A Film Side-By-Side Inward Weblog Posts

This article is almost lining upwardly text together with pictures side-by-side inwards your posts - together with almost how to add together a "break" hence that some text goes beside a motion-picture exhibit together with some goes underneath it.

The postal service editor's motion-picture exhibit menu:

When yous convey seat a motion-picture exhibit into a post  inwards Blogger, (either using the Insert-picture pick on the toolbar, or yesteryear adding the HTML for it another way), the Post Editor gives yous options for motion-picture exhibit size, together with for aligning the picture to the left, right or centre. 

You cab see these options yesteryear clicking on the picture.  This opens a "mini-menu" nether the picture, similar this:

This i mini-menu has options for:

Size	Options are small, medium, large, extra-large, together with original-size
Alignment:	Options are left, right together with centre (default is center)
Caption:	Add caption, together with Remove
Properties:	Where yous tin plow over the sack add together the hover-title together with alternative-text for the picture
Remove:	Taking the photograph totally out of the post

The alignment options:

When yous commencement add together a picture, the alignment is laid to "center".

Choosing Left or Right moves puts the motion-picture exhibit to the far side of the postal service and, if the motion-picture exhibit isn't equally broad equally the window it's beingness displayed in, the text that was after the motion-picture exhibit fills upwardly the infinite on the other side - similar this:

Stopping all the text from flowing some the picture:

Often bloggers desire to convey pictures left or right aligned, together with to convey some words showing beside the picture.

But they also desire to command what text is shown beside the picture, together with what text doesn't start until underneath it.   Many people pass a long fourth dimension putting extra lines into their posts, hence that the text together with pictures are educate inwards a means that's "just right" - together with hence they're disappointed when they issue the postal service together with their difficult function is all lost, because the covert is wider together with to a greater extent than text fits into the surface area beside the picture.

Luckily, this is really slow to do, yesteryear editing editing the HTML behind the post:.

1    Put some place-holder or "marker text" just where yous desire the flowing-text to stop.

Use text similar BREAK HERE  or  XXXXX  - inwards short, whatever words that won't endure anywhere else inwards the post.

I've made it bold together with with a yellowish background to larn inwards exhibit upwardly inwards the motion-picture exhibit - but I don't recommend that yous practice this, because it makes it harder to detect together with supervene upon just the right text afterwards on.


2  Choose the HTML option (top left of the post-editor screen.


3  Find the place-holder text
(hint:  role your browser's search business office - inwards Firefox, it's Edit > Find)


4  Replace the place-holder text with this code:

<div class="separator" style="clear: both;"> </div>

(The of import thing almost this code is that it re-sets the previous float instructions, which may convey been to the left or 2 the right., yesteryear maxim clear: both;)


5  Choose the Compose tab  (to larn dorsum to the regular post-editor screen).  The text after where the marking text was is straightaway underneath the motion-picture exhibit - together with it volition endure in that location when yous issue the post, too, no affair what size of covert your reader has.

Troubleshooting

Aligning to a greater extent than than i picture

The approach described hither if yous are exclusively working with i picture.   But if yous convey 2 or to a greater extent than pictures, instead of letting the text menses it is best to seat some of it into a <div> contention that is positioned to sit down beside the pictures.

See putting several pictures amongst each other for details almost this approach.

Extra blank lines:

At the bottom-left of the post-editor, in that location is a link for Post-Options.  Clicking this opens an options panel, where yous tin plow over the sack select what number line-breaks (ie pressing the "enter" key) have.   I ever seat it on "Use <br /> tags", hence that I tin plow over the sack seat extra empty lines into the HTML to larn inwards easier to read.   If it's on "Press Enter for trouble breaks", hence each extra trouble seat into the HTML volition also exhibit upwardly inwards the Compose-mode view, together with inwards the terminal post.

---

Related Articles:

Stopping pictures on your spider web log from beingness "clickable"

Getting the HTML code to seat a motion-picture exhibit into your blog

Putting pictures side-by-side inwards your blog

Telling Google almost the pictures inwards your blog

Inserting a motion-picture exhibit into a spider web log post

Tweet

Subscribe to receive free email updates: