Text Formatting Shortcut

Tuesday, December 15, 2009

If you format text in your posts as much as I do,
your posts probably look something like this:


<u><strong><font color="#4BB392" size=”3”>Subtitle 1</font></strong></u>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum hendrerit diam a pellentesque. Phasellus at lectus at erat sodales vestibulum. Nullam elementum dolor non lacus sodales dignissim. Curabitur luctus nisi vitae nisl porta eget suscipit tortor elementum. Ut sit amet lacus dui.<br/><u><strong><font color="#4BB392" size=”3”>Subtitle 2</font></strong></u>Nam vulputate purus et ligula porta volutpat eleifend nibh tristique. Fusce ut nulla nisl, non tincidunt libero. Ut in libero vitae libero convallis dignissim vel at quam. Phasellus ac adipiscing lectus. Donec quis ante leo. Etiam ut erat euismod nunc consequat blandit.



YIKES! Formatting can make your posts look like a jumbled mess and hard to follow as you write/edit your text. However, text formatting is a necessary evil in that it can highlight important aspects of your post, and categorize it into more manageable chunks.

_____________________________________________________________________________

Preview of the above jumbled mess:

Subtitle 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum hendrerit diam a pellentesque. Phasellus at lectus at erat sodales vestibulum. Nullam elementum dolor non lacus sodales dignissim. Curabitur luctus nisi vitae nisl porta eget suscipit tortor elementum. Ut sit amet lacus dui.

Subtitle 2
Nam vulputate purus et ligula porta volutpat eleifend nibh tristique. Fusce ut nulla nisl, non tincidunt libero. Ut in libero vitae libero convallis dignissim vel at quam. Phasellus ac adipiscing lectus. Donec quis ante leo. Etiam ut erat euismod nunc consequat blandit.

_____________________________________________________________________________

Now, doesn't that look nice and convenient for your readers? If only it didn't have to be so confusing and tedious on your end... Well, it doesn't! I have come up with formatting shortcut that will drastically reduce the amount of tags in your posts. Follow these quick and easy steps and your posts will be more legible while editing in no time!

Step 1:


Log in to Blogger.
Click "Layout"




Step 2:


Once in Layout,
Click "Edit HTML"



Step 3:
Hit CTRL + F in your web browser, and find the following code:
.post h3 strong, .post h3 a:hover {

Note the opening curly brace { at the end of this line of code. There should be a line or two of code under it, and then it will end with a closing curly brace }.


Directly below this section of code, paste the following as shown below:
*Edit the code to your liking using the tips beside each value*

.post h4 {
text-align:left; /*change to center, or right*/
margin:.25em 0 0;
padding:0 0 0px;
font-size:110%; /*changes font size*/
font-weight:strong; /*change to normal */
line-height:1.4em;
text-decoration:underline; /*change to none, line-through, or blink */
color:#5AAE85; /*changes font color*/
}





Be sure to save your work!


Step 4:
The last step is to implement your work into your new post! The tag to use your predefined values is:

<h4>Your Text Here</h4>


Instead of the jumbled mess before, your post will look like this in the text editor:

<h4>Subtitle 1</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum hendrerit diam a pellentesque. Phasellus at lectus at erat sodales vestibulum. Nullam elementum dolor non lacus sodales dignissim. Curabitur luctus nisi vitae nisl porta eget suscipit tortor elementum. Ut sit amet lacus dui.

<h4>Subtitle 2</h4>
Nam vulputate purus et ligula porta volutpat eleifend nibh tristique. Fusce ut nulla nisl, non tincidunt libero. Ut in libero vitae libero convallis dignissim vel at quam. Phasellus ac adipiscing lectus. Donec quis ante leo. Etiam ut erat euismod nunc consequat blandit.


_____________________________________________________________________________

Preview of your new and improved formatting technique:

Subtitle 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum hendrerit diam a pellentesque. Phasellus at lectus at erat sodales vestibulum. Nullam elementum dolor non lacus sodales dignissim. Curabitur luctus nisi vitae nisl porta eget suscipit tortor elementum. Ut sit amet lacus dui.

Subtitle 2

Nam vulputate purus et ligula porta volutpat eleifend nibh tristique. Fusce ut nulla nisl, non tincidunt libero. Ut in libero vitae libero convallis dignissim vel at quam. Phasellus ac adipiscing lectus. Donec quis ante leo. Etiam ut erat euismod nunc consequat blandit.

_____________________________________________________________________________


Tada! You did it.

4 comments:

Adori Graphics said...

Oooooh now that does look like a nice idea! SOmetimes I have more code than text if you know what I mean LOL.

Allison said...

Love it! I'll definitely have to try that out! :D

Scrappy Gifts said...

mmmm I just might have to try that...just too tired now to mess with it =D

Tigermadstanley said...

Fab tutorial. Congrats. Thank you for sharing.

Post a Comment