Tutorial # 34 - How to Create Drop Caps (Big First Letters) in Blogger/Blogspot

This tutorial will help you to enlarge the first letter of posts and comments which stretches down three or four lines with the text wrapped around. That letter is called as "Drop Cap" 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, and magazines.

For 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 ]]></b:skin> inside the search box then hit Enter to find it.

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;
	}

view raw gistfile1.txt hosted with ❤ by GitHub

Font size and color can be edited by amending the lines # 5 and 6 respectively.

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

Note: 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>

For Comments

Step 1: Follow the above Step 1, 2 & 3 (if you have already added the CSS code, skip above Step 2 & 3)

Step 2: Then Search for this piece of code:<data:comment.body/>

Step 3: Add <p class="capital"> before and add </p> after the above searched code

Step 4: Save your Template