How to create drop caps on blogger (Big first latter)

How to create drop caps on blogger (Big first latter)
Actually, we can do something like Drop Caps Effect on our blog as possible.

Drop cap effect is a large first letter stretching down three or four lines with the text wrapped around. We often see this style in newspapers, literature, magazines and etc.
Now, I ll show you how to create drop caps Magazine effect in Post and Comment blogger.

Ok let's see,

 How to create drop caps on blogger POST (Big first latter)?

Example :

Drop caps effect on blog post
 
Drop caps effect on blog comment

 1.

Go to Dashboard >> Design - Edit HTML >> Expand Widget Template

2.

Use (CTRL + F) to find this code:
]]></b:skin>
Add above it with the following code:
.capital:first-letter {
float: left;
display: block;
font-family: Times, serif, Georgia;
font-size: 40px;
color: #000000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}
Size :  Change the letter size, (decrease/increase) the value.
Color :  Adjust it with your desire color.

3.

Find for this code
<data:post.body/>
 And add the red fragments you see below :
<div class='capital'><data:post.body/></div>
When done, save and exit.

!!!if  this code is not working,  

add one of the following codes below:
<p class="capital"><data:post.body/></p>
Or
<span class="capital"><data:post.body/></span>


 How to create drop caps on blogger COMMET (Big first latter)?


The steps is not so different with adding drop caps on blogger post.
Following the steps 1 & 2 and find this code :
<data:comment.body/>
add the red codes before and after
<p class="capital"><data:comment.body/></p>
 Save template and done!
Just simple!

Labels: ,