Add Drop Cap Large First Letter To Each Post In Blogger

A drop cap is an enlarged first (capital) letter of a paragraph. The letter is dropped several lines deep and the top of the letter is usually flush with the top of the first line of rest of the text. Drop caps are used to lead the readers eye to the start of an article or a chapter. You can find them in most magazines and newspapers. The drop cap letter can also use a different font and can be a different color to the rest of the text.

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

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> 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;

}

If this method not works then try this

• Find the code shown below using [ctrl+F]

]]></b:skin>

• Now Paste the Code Shown Below just above/before it

.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>

• Now save your template

Like it? Share it.