How To Use A Drop Cap Wrapped Large First Letter In Your Blog Posts

This tutorial will guide you "How To Add a Drop Cap To Each Post Using CSS In Blogger Blog?". In a written or published work, an initial is a letter at the beginning of a work, a chapter, or a paragraph that is larger than the rest of the text. The word is derived from the Latin initialis, which means standing at the beginning.

An initial often is several lines in height and in older books or manuscripts, sometimes ornately decorated. Many newspapers make the first letter of their articles a feature.I'm sure you have seen newspaper articles with a large first letter that stretches down four or five lines, with the text wrapped around the large letter.

How To Add a Drop Cap To Each Post Using CSS In Blogger Blog

• Go to Blogger Dashboard --> Template --> Edit HTML --> Proceed
• Backup Your Template Before Any Changes
• Now Expand Widget Templates
• Press Ctrl + F and Search The Code Shown Below

]]></b:skin>

• Now Paste The Code Shown Below Just Above/Before it 

p:first-letter {
display:block;
margin:5px 0 0 5px;
float:left;
color:#0033CC;
font-size:60px;
font-family:Georgia;}

Edits : 

Color - The Color highlighted in yellow can be changed, find color codes here : Html Color Code Generator.

Size - The font size highlighted in green can be increased and decreased from 60px.

Font - The font highlighted in red is currently Georgia and can also be changed. 

If The Above Method Is Not Working Then Try This: 

• Press Ctrl + F and Search The Code Shown Below

.capital:first-letter {
float: left;
display: block;
font-family:Georgia;
font-size: 60px;
color:#0033CC;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}

• Find The Code Shown Below Using [Ctrl+F]

<data:post.body/>

• Now Paste the Code As Shown Below

<div class='capital'><data:post.body/></div>

• If this not work then try this code

<p class='capital'><data:post.body/></p>

or

<span class='capital'><data:post.body/></span>

• Save Your Template and Its Done :)
• Enjoy Blogging