Format Text In Blogger Posts

Settings Formatting

Settings----->Formatting is where you can set a lot of format settings for your Blogger posts. The most important of these is to set Convert line breaks to Yes and save. Now when you press Enter key on keyboard while in the post editor this will enter <br/> in your post and create spacing between the text. Also you should enable float alignment so that your images and text can be aligned properly.


HTML CODE FOR TEXT EFFECTS

While creating a post in Post editor the tool bar in the top frame gives icons to format your text as bold, italic etc. However if you do not have this toolbar use the following HTML codes in Edit Html tab of Post Editor :

To Make text Bold : <B>BOLD</B>

To make it Strong use : <strong>
TEXT
</strong>

To make it Big use : <big>
TEXT
</big>

To make it Small use : <small>
TEXT
</small>

To Emphasize text use : <em>
TEXT
</em>

To make it Italic : <I>ITALIC</I>

To make it Underlined : <U>Underline</U>

For a Strikeout effect : <S>Strikeout</S> You can also use <del> since <S> has been deprecated.

For a line on top of your text : <span style="text-decoration: overline">Overline</span>

To Superscript Text : <SUP>Superscript</SUP>

To Subscript Text : <SUB>Subscript</SUB>

To change font colour : <font color="COLOR">Colored Text</font>

Instead of "COLOR" you can also input the exact hex number of the colour you want. To get the hex number if colors go here.

To Highlight text or give it a background color : <span style="background-">TEXT</span>

Replace "COLOR" with the name of the color like "RED" "YELLOW" etc.

To change font size : <font size="NUMBER">TEXT</font>

Put in a "NUMBER" from 1 to 7.

To change the font : <font face="NAME">TEXT</font>

For font face NAME choose from : Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana. Remember to choose a universally available font face or your viewer will not be able to see it.


To give a heading to your text : <h2>TEXT</h2>
Choose from H1 to H5. You can use this to create sub headings by using H1, H2, H3, etc... in sequence.

For Preformatted text useful in displaying poetry use :

<pre>
POETRY
</pre>

For example :

There once was a man from Aruba,
Whose favorite hobby was scuba.
Every day he would wish,
He could spear a big fish.
But settled instead for canned tuna.

To show the meaning of a word when you hover the mouse over it use the 'title' attribute like this :

<abbr title="RED CROSS">RC</abbr>

This will look like this :

RC

Hover your mouse over 'RC' to see the effect.

<acronym title="SOUTH AMERICA">SA</acronym>

This will look like this :
SA
Hover your mouse over 'SA' to see the effect. It works in Firefox 2 and Internet Explorer 7.

INDENT PARAGRAPH

To INDENT TEXT at start of a paragraph insert this styling code :

p {text-indent: 1cm}

immediately before this :

]]></b:skin>

tag in your template. Then when you are starting a paragraph in the Post editor put this code in Edit Html tab :

<p>
PARAGRAPH
</p>

You can also use this code in Edit Html tab of Post Editor immediately before starting a paragraph :

<p style=" text-indent: 20px;">PARAGRAPH <p>

and close it as shown above after the PARAGRAPH. For example :

Maecenas id justo. Proin ut elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed tellus odio, aliquet vel, rhoncus nec, aliquet faucibus, magna. Phasellus tellus sem, aliquet aliquet, pellentesque sed, facilisis nec, tellus


DROP CAPS

You can also use Drop Caps at the start of your paragraph like this :
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lobortis, turpis ut facilisis convallis, nulla sem feugiat tellus, in tempus mauris urna non lacus. Duis pellentesque. Cras tempor iaculis lacus. In pharetra elementum purus. Ut odio lectus, pharetra eu, luctus ut, fringilla eget, neque. Ut et augue ac magna gravida varius. Suspendisse at odio.

OR you can use big first letter at the beginning of your paragraph like this :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lobortis, turpis ut facilisis convallis, nulla sem feugiat tellus, in tempus mauris urna non lacus. Duis pellentesque. Cras tempor iaculis lacus. In pharetra elementum purus. Ut odio lectus, pharetra eu, luctus ut, fringilla eget, neque. Ut et augue ac magna gravida varius. Suspendisse at odio.

For the code to implement the above go here.


MARQUEE EFFECTS

To create a moving text effect you can use the <marquee> tag. For example :

<MARQUEE>
Tips For Bloggers! <IMG SRC="http://ezeeblog.googlepages.com/blogtips.png" HEIGHT=40 WIDTH=100 ALT="Tips For Bloggers">
</MARQUEE>

The above code will produce the following effect :
Tips For Bloggers! Tips For Bloggers

You can use the following parameters to define your marquee :

* WIDTH: how wide the marquee is
* HEIGHT: how tall the marquee is
* DIRECTION: which direction the marquee should scroll
* BEHAVIOR: what type of scrolling
* SCROLLDELAY: how long to delay between each jump

* SCROLLAMOUNT: how far to jump
* LOOP: how many times to loop
* BGCOLOR: background color
* HSPACE: horizontal space around the marquee
* VSPACE: vertical space around the marquee