Paragraph breaks and blank lines
Pressing return in the visual editor gives a line break plus a blank line. If you want a line break only, you press shift-return. In the html editor, pressing return once gives a line break, pressing it twice gives a line break plus a blank line.
If you want more blank space between paragraphs, you cannot do it by pressing return repeatedly, because the HTML web standard is no multiple line breaks (no multiple spaces either). You need to add padding or margin to your paragraph in the HTML post or page editor.[*] You can add it above a paragraph, or below it, or both; change the number to adjust the amount of extra space:
Text wrap
To have text wrapping around an image, you don’t interfere with the text: you set the image alignment to either left or right.
You can specify that when you initially insert an image. You can also change the alignment of an already inserted image: in the visual editor, you click on the image, click the edit button (the mountain icon), click the desired alignment option, click Update; in the html editor, you modify the relevant part of the image code (“alignnone”, “aligncenter”, “alignleft”, “alignright”).
In some themes you automatically get some space around images; in other themes you get no such space, which means that text wrapping around images will stick too close to them. In that case you must add space yourself: in the visual editor, you click on the image, click the edit button, click “Advanced Settings”, set a number in the “Horizontal space” box, click Update; in the html editor, you add this inside the image code (with a space before and a space after):
a) The image needs to be at the beginning of the paragraph that should wrap around.
b) If you only want a short paragraph next to the image, and the rest of the text below the image, you need to add this after that paragraph:
Change Text Font Colour Html Code Blogspot, Alignment, Blank lines, Html & inline css codes, Images, Line breaks, Space between paragraphs, Text-wrap, Two-column text
Pressing return in the visual editor gives a line break plus a blank line. If you want a line break only, you press shift-return. In the html editor, pressing return once gives a line break, pressing it twice gives a line break plus a blank line.
If you want more blank space between paragraphs, you cannot do it by pressing return repeatedly, because the HTML web standard is no multiple line breaks (no multiple spaces either). You need to add padding or margin to your paragraph in the HTML post or page editor.[*] You can add it above a paragraph, or below it, or both; change the number to adjust the amount of extra space:
<p style="padding-top:14px;">TEXT HERE</p>
<p style="padding-bottom:14px;">TEXT HERE</p>
<p style="padding-top:14px;padding-bottom:12px;">TEXT HERE</p>
(Or write margin in place of padding).
To add extra space below and/or above larger sections comprising more than one paragraph, you use div and /div in place of p and /p.
For extra space above and below an image, you add this to the image code, after “img” (again, adjust by changing the numbers):To add extra space below and/or above larger sections comprising more than one paragraph, you use div and /div in place of p and /p.
style="margin-top:12px;margin-bottom:10px;"
Or, in the visual editor: click image, click edit button (mountain icon), click Advanced Settings, type number in the “Vertical space” box, click Update, update post or page.
In the post or page editor, avoid solutions such as div or p tags enclosing nothing (or enclosing a space, or enclosing the html for a space): they are stripped out if you switch the editor to visual.
Alignment
But this isn’t always safe, among other reasons because in the visual editor you cannot see or control exactly what you’re selecting. In the html editor, the code for setting the alignment of a single paragraph is this:
<p style="text-align:DEFINE;">TEXT HERE</p>
Where I’ve put DEFINE, you write left, right, center or justify. Usually you don’t need to specify left alignment, since that’s the default (when the blog language is set to English or any other left-to-right language).
For more than one paragraph, you write div and /div in place of p and /p. Or you use this code (again DEFINE should be left, right, center or justify):
<div align="DEFINE">
TEXT HERE
</div>
TEXT HERE
</div>
Note on coding: when you want to apply multiple commands to the same chunk of text, you combine the relevant pieces of code within the same “div” or “p” tag. For example:
<div align="center" style="padding-top:14px;">
TEXT HERE
</div>
TEXT HERE
</div>
<p style="text-align:center;padding-bottom:14px;">
TEXT HERE
</p>
TEXT HERE
</p>
Text wrap
To have text wrapping around an image, you don’t interfere with the text: you set the image alignment to either left or right.
You can specify that when you initially insert an image. You can also change the alignment of an already inserted image: in the visual editor, you click on the image, click the edit button (the mountain icon), click the desired alignment option, click Update; in the html editor, you modify the relevant part of the image code (“alignnone”, “aligncenter”, “alignleft”, “alignright”).
In some themes you automatically get some space around images; in other themes you get no such space, which means that text wrapping around images will stick too close to them. In that case you must add space yourself: in the visual editor, you click on the image, click the edit button, click “Advanced Settings”, set a number in the “Horizontal space” box, click Update; in the html editor, you add this inside the image code (with a space before and a space after):
style="margin-right:12px;"
(Of course margin-right is for a left-aligned image; for a right-aligned image you use margin-left; and the number is just an example – you can change it.)
Setting the alignment of an image to left or right means that the rest of the content will wrap around. So:a) The image needs to be at the beginning of the paragraph that should wrap around.
b) If you only want a short paragraph next to the image, and the rest of the text below the image, you need to add this after that paragraph:
<div style="clear: both;"></div>
Two columns (or more)
The simplest way (for fixed-width themes) is this:
<div style="float:left;width:46%;">
LEFT CONTENT HERE
</div>
<div style="float:right;width:46%;">
RIGHT CONTENT HERE
</div>
<div style="clear: both;"></div>
LEFT CONTENT HERE
</div>
<div style="float:right;width:46%;">
RIGHT CONTENT HERE
</div>
<div style="clear: both;"></div>
You can change the percentages, to adjust the amount of blank space between the columns, or to create columns of unequal width; make sure the sum remains lower than 100%.
On flexible-width themes you’d better use this:
<div style="float:left;width:50%;">
<div style="padding-right:10px;">
LEFT CONTENT HERE
</div></div>
<div style="float:right;width:50%;">
<div style="padding-left:10px;">
RIGHT CONTENT HERE
</div></div>
<div style="clear: both;"></div>
<div style="padding-right:10px;">
LEFT CONTENT HERE
</div></div>
<div style="float:right;width:50%;">
<div style="padding-left:10px;">
RIGHT CONTENT HERE
</div></div>
<div style="clear: both;"></div>
You can change the padding numbers, to adjust the amount of blank space between the columns; or you can change the percentages, to create columns of unequal width; make sure their sum remains 100%.
The same type of coding can be used to create more than two columns: setting all the divs that define each column to float left (with appropriate width percentages) will make all of them show up side by side.
Change Text Font Colour Html Code Blogspot, Alignment, Blank lines, Html & inline css codes, Images, Line breaks, Space between paragraphs, Text-wrap, Two-column text
Tags
Blogger Codes