Adding Drop Caps to Your Blog

Print

Blogging Tips

Thursday, June 12 2008 07:17 Written by Joeprah

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 coWhat Drop Caps Look Likemprised 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. 

Level of Tech Difficulty: 2 (You Need to Be Able to Read this Post, Navigate the Internet and Your Computer and Click on Things)

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
Adding Pull Quotes to Your Blog< Prev   Next >June - A Bloggin Income Update
Comments (11)Add Comment
feedSubscribe to this comment's feed
0
...
written by Khylek, June 13, 2008
Thanks for the tip! I'll be trying this out soon.
0
...
written by Black Hockey Jesus, June 13, 2008
Sweet! Why do you do it, Joeprah?
0
...
written by jt12blk, June 13, 2008
This is great! Pretty soon we'll all be stylin' like Joeprah.
0
...
written by HRH, July 07, 2008
I like it. And it looks easy which is good because easy is good.
0
...
written by kberg83, September 23, 2008
Joeprah, you have got earned some good karma coming back to you, dude. I love it! Thank you! It worked--even on Blogger.
0
...
written by Loucks, November 30, 2008
Hey thanks Joeprah! This is beautiful and I really like it. There are other modules and plugins that try to do this on Joomla but your way works much better, thank you very much.
0
...
written by Edwin, January 23, 2009
Finally found a great drop cap style sheet. Thanks.
0
...
written by Jacob Hiller, March 21, 2009
Awesome, worked like a charm.
0
...
written by S.Pradeep Kumar, June 06, 2009
Thanks buddy !

Gr8 Customization ! Cheers ! smilies/smiley.gif
0
...
written by Michelle, January 10, 2010
Thanks for the easy, but very effective tip. Just started my blog and having fun (mostly) setting this stuff up. smilies/tongue.gif
0
...
written by Sarah18nV, February 03, 2010
That’s undisputed that the experienced essay writing services will create the premium quality online term paper for men which do not know how to write. It can be the best way for such people, I opine!

Write comment

busy