How to Create Drop Caps (Big First Letters) in Blogger/Blogspot

Here's another way to customize your Blog. In this case, your Posts and Comment's first letter. The effect is a large first letter stretching down three or four lines with the text wrapped around. The drop cap letter can also use a different font and have a different color from the rest of the text. This style can be often seen in newspapers, literature, magazines. So, in this tutorial I will show you how to apply automatically a Magazine text style on Blogger Posts and Comments. Let's start adding it...

Big First Letter for your Blogger / Blogspot Posts

Step 1. From your Blogger Dashboard, go to Template and click on the Edit HTML button:

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box. Type this piece of code inside the search box then hit Enter to find it:

]]></b:skin>

Note: you might need to click on the arrow next to it to expand the code within and then you need to search ]]></b:skin> one more time.

Step 3. Just above ]]></b:skin>, add the following CSS 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;
}

Color - change the value in blue with the hex of your color
Size - to change the letter size, increase/decrease the value highlighted in pink.

Step 4. Now search for this code:

<data:post.body/>

Step 5. Then immediately before and after add the red fragments you see in the example below:

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

Step 6. Save the changes by clicking on the Save template button.

Important! If the above code is not working, add one of following codes from this example:

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

Or try this instead:

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