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.

drop cap 1We 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 Template > Edit HTML > Proceed.
  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” post:

  1. Open the post in Blogger post editor.
  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!

18 comments to "Add a drop cap to each post using CSS"

Anup @ Hack Tutors September 7, 2010 at 7:20 PM    

This one is amazing trick. I have these type of letter on the newspapers and you have made this on blogspot :)

Thanks for sharing :)

Anonymous,  September 9, 2010 at 8:17 AM    

Could this feature be modified so that the drop cap appears only on those posts where chosen, rather than on all posts? Thanks for a fantastic blog tutorial site. Heaven for HTML beginners like me.

Greenlava September 9, 2010 at 1:22 PM    

@Anonymous
Remove ".post-body:first-letter" from I)2, then do step part II.

Suresh Khanal from seommotips.com September 15, 2010 at 10:33 PM    

It is an interesting post. You have defined and explained Drop Cap very nicely. Though I can't use it in my blog as it is not in Blogger platform, I could learn how I can modify my theme code and css file to produce the result.

Greenlava September 16, 2010 at 1:16 AM    

@Suresh Khanal
I hope you can adapt it to your Wordpress theme.

Swamykant from YourDigitalSpace.com September 17, 2010 at 5:07 PM    

Thanks for the Tips. I will try to use this in Wordpress Theme

cu734ngel October 22, 2010 at 7:57 PM    

uh-oh..sooo coool...thanx for the tips..:)

Greenlava October 22, 2010 at 8:52 PM    

@cu734ngel
You're welcome. Thanks for taking the time to comment.

Unknown December 16, 2010 at 1:23 PM    

Hello, I've added your code in the "edit html" and add your step 2, but it doesn't work. And then, I also edit my post (the newest one) so that it begins with text rather than image, but the drop cap also doesn't work. Any suggestions? My web is www.martinmanurung.com

Thanks!

Greenlava December 16, 2010 at 7:52 PM    

@Martin
Your posts start with p tags. Replace your selector with this one:
.post-body p:first-child:first-letter

lizbeth.pereira@gmail.com March 12, 2011 at 7:59 PM    

Sheer genius! Thanks for sharing such amazing tips.

Anonymous,  November 3, 2011 at 7:25 PM    

GUYS! DOES ANY1 KNOW HOW TO CHANGE THE COLOUR OF THE BIG LETTER...??? I WANNA MALE MINE LIKE BLUE OR SOMETHING.

Anonymous,  November 3, 2011 at 7:27 PM    

NEVER MIND! I GOT IT!

Unknown February 1, 2012 at 9:29 AM    

But I can't find ]]> in my html code...

Greenlava February 2, 2012 at 11:03 PM    

@Lucy Chen
Look carefully, you'll find it. Or try the search function by pressing Ctrl+F, type in ]]> in the search box and hit Enter.

Unknown July 6, 2012 at 6:07 PM    

HI Admin,

Your articles are copied by these sites.

http://www.latesthack.com/2012/07/how-to-add-drop-cap-to-each-post-using.html
http://atoz2u.blogspot.in/2011/03/how-to-add-drop-cap-to-each-post-using.html

Take serious action against these copy thefts..

thanks

Carrie Patel January 25, 2013 at 1:45 AM    

Thanks for the tip! I'd tried code snippets from a few other sites, but this is the one that worked!

CynthiaNadine March 3, 2013 at 7:35 AM    

Finally a code what does work! I searched on other sites, but no luck. Thanks!

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.