Adding Drop Caps to Your Blog

Written by Joeprah | 12 June 2008

Have you ever wanted to add some extra style points to your blog and just don't know the first thing about it?  I have comprised an easy to swallow tutorial for those who use Blogger, Word Press and Joomla! so that they may be able to add "Drop Caps" to their blogs.  Why?  Because drop caps in all their various forms are cool.  It's a fact.  Drop caps are the over-sized-magazine-style letters that you see in print media and online media alike.  It can take a bland post and turn it into a thing of beauty--well, maybe just a little nicer.

The Tutorial

Whether you use Word Press, Blogger, Joomla! or some other format for your blog you can easily install your own “Drop Cap” effect into any post you like by using the following CSS code. CSS code (Cascading Style Sheet) can be manipulated in many different ways and the “Drop Cap” effect is merely one extension of this.

Here is the CSS code you will need for "Drop Caps":

.dropcap {
         float: left;
         padding: 3px 3px 0 0;
         display: block;
         color: #b4b4b4;
         font: 50px/37px Georgia, Times, serif;
 }

If you have a Blogger blog here is what you need to do to insert the code.

1. Go the "Dashboard" of your blog
2. Click "Layout"
3. Click "Edit HTML"
4. Before the tag  ]]></b:skin>  Insert the "Drop Cap" Code above
5. Save the Changes
6. Go to "Settings" tab
7. Go to "Formatting" tab
8. In "Post Template" at the bottom add the following code

<span class="dropcap"> </span>       

• Click Save Settings
• When you are writing a post all you need to do is click “Edit HTML” and you will see:

<span class="dropcap"> </span>       

• Make sure to put the first letter of the first sentence in gap in the code.

Word Press is Much Easier

1. Add the dropcaps code to your Word Press Theme Stylesheet
2. Save changes
3. In your posts edit the code to include the following for the first line of your post:

<span class="dropcap">D</span>rop caps rule, but so do Joeprah's tutorials.       

Joomla! is about the same

1. In the administrator backend select "template manager" then "site templates"
2. Pick the template you use for your site and choose "Edit CSS"
3. Add the "drop cap" code to your Stylesheet
4. Save changes
5. In your posts edit the HTML and add the code to create drop caps in the appropriate section of your post

<span class="dropcap">D</span>rop caps are sweet!       

Customization:

If you want something different than the Joeprah-Drop-Cap-style, you can make adjustments as you see fit.

1. Change the "color" in the code to whatever color works best for your blog
2. Change the "font type" to whatever Font you like
3. Change the size of the drop cap to whatever size works best for you and your articles