Format Text In Blogger Posts. ~ Tips for Bloggers

WELCOME!

This blog contains quick tips for Bloggers. For detailed explanations do visit the main blog at :

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-color: COLOR">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. Login at Blogger.com and click on Layout link on Dashboard. Then click Edit Html subtab of Template tab. In Template code box scroll down till you locate the skin tag. It is about halfway down the code box.


Then when you are creating a post and starting a paragraph in the Post editor put this code in Edit Html tab :

<p>
PARAGRAPH
</p>

Replace 'PARAGRAPH' with your own text paragraph. 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






As you can see the word 'Maecenas' is indented in the above paragraph.



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






SCROLLING TEXT BOX


If you have a large amount of text you can put it in a Text box with a scroll bar like this :



My Favorite Pages

- Beta Blogger For Dummies

- SEO Blog Adsense

- Tips For Bloggers

- Blogger Help

- Blogs of Note

- Blogger Help Group




Here is the code to show the above box :

<div style="width:200px;height:200px;overflow:auto;border-width:2px;border-color:000000;border-style:solid;">MY CONTENT</div>



Paste the code in Edit Html tab of post editor or in a Html page element. Change width and height to suit your blog design. Replace 'MY CONTENT' with your content.

4 comments:

Edziardo said...

thx for sharing! this helped me a lot! :)

Alberto said...

Very useful post - I always wanted to know how to make this "marquee".

thanks a lot

i.e.z said...

thx!! this entry helped me a lot! love this blog.. :)

Asim jofa said...

I am absolutely amazed at how terrific the stuff is on this site. I have saved this webpage and I truly intend on visiting the site in the upcoming days. Keep up the excellent work

CLICK HERE TO LEAVE A COMMENT.



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above Search box to look for solutions before posting your valuable comments.

Comments posted on Tips for Bloggers are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

YATOC - Yet Another Table of Contents.

Loading...
Get This Gadget at YATOC.

Table Of Contents