2008-08-21

First Letter Drop Cap


It's becoming a "cool" factor for webblogs to use the first letter drop cap in their first paragraph. It makes your paragraph catchy and stylish. By adding drop caps can increase visual stimulation and drawing your readers attention to stay on a bit longer. Unfortunately, I don't have the statistical data to justify.

Today, I'll show you exactly how I do it, so you can do it on your own in just minutes. Login to your Dashboard> Layout> Edit Html. Copy and paste these lines into your CSS section. The preferred place to add CSS code is right in front of the closing b:skin tag

.dropcap {
float:left;
color: #000000;
font-size:100px;
line-height:80px;
padding-top:1px;
padding-right:5px;
}

Save the template. Next, click on Settings> Formatting> Post Template. Add this line into the post template box.
<span style="gt;<span class="dropcap">Post First Letter Goes Here</span></span>


Save settings. Now, we'll make a new post using our first drop cap. Click on Posting>, you'll notice that anything you type into the box of "Post Template" will appear in your new post.



For this example, copy and paste this into your post editior.
This article is related to my article before. The objective is to create a photo sharing gallery on your webblog. And this is a much simpler way to do.

It will look like this.
<span style="color: rgb(255, 0, 0);">T</span>his article is related to my article before. The objective is to create a photo sharing gallery on your webblog. And this is a much simpler way to do.

(Note - remember to place your first letter between span tags as shown above.

Publish post and you're done with it.

0 comments:

Post a Comment

1. Comments posted must be accompanied by names or pseudonyms.
2. Anonymous posting and those containing profanities will be rejected.
3. Comments are moderated due to spam problems. I have to approve the comment before it will show up.

:)) ;)) ;;) :D ;) :p :(( :) :( :X
=(( :-o :-/ :-* :| 8-} :)] :-t b-( :-L