Add a drop cap to each post using CSS

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.

This tutorial will show you how to turn the first letter of your Blogger posts into a simple drop cap. Once the code is added it should hopefully apply drop cap to all your existing and future posts, automatically.

We will only use a first-letter pseudo element in your template CSS. There is no need for you to edit your posts.*

*Note 1: For this to work, your text must be first thing to occur in your post. If you put an image, a div or any other HTML element at the beginning of a post, the code by itself won’t work.

Here we go:

 

I. Adding drop cap style in CSS

1. Go to Dashboard > Design > Edit HTML.
2. Add the following CSS code snippet right before ]]></b:skin> line in your template code  (or for Designer template,  add it into the custom CSS editor):
   

   .post-body:first-letter, .post-body .dropcap:first-letter {font-weight:bold;font-size:65px;float:left;padding:0;margin:-4px 5px 0px 0px;position: relative;background-color:none;line-height:0.9;}

   
   If you write your post using Windows Live Writer, replace the selector post-body:first-letter with .post-body p:first-child:first-letter. This is because WLW will automatically put your text in a paragraph (<p> tag).
3. Preview.
   Make sure the drop cap aligns nicely with the rest of the text. Adjust font-size and top margin to achieve that.
4. Save when you get it right.

 

II. Defining “dropcap” class in post HTML

Proceed with this step only if a drop cap does not appear in a post after completing step I. (It’s probably due to one of the reasons stated in Note 1.)

You need to do the following steps on every “troubled” posts:

1. Go to Dashboard > Edit Posts to edit the post.
2. Switch to HTML mode.
3. Enclose the text at the beginning of your post with a span tag and give it a class, named “dropcap”, like this:
   

   <span class="dropcap">This is the text at the beginning of your post. Any amount of text will do.</span>

4. Preview post before saving.

Enjoy!