Humor
Cross Eyed KidIn this section of Joeprah you will be whisked away to all the side splitting posts that made this site what it is. Videos, photos, articles--this stuff is just funny.
 
Confessions of a Stay at Home Dad
Confessions of a Stay at Home Dad Confessions of a Stay at Home Dad is a candid look at parenting, marriage and life through the eyes of a stay at home dad.  
 
Blogging Tips
BloggingThis section is has useful information from the practical to the technical.  Want to improve your blog or website?  Take a look here. 
Subcribe
RSS PodcastThe X Feed

  Register

The Members' Bounce

These Ads Crack Me Up

.::Helpful Parenting Links::.

Examiner Promo
Adding Drop Caps to Your Blog | Print |  E-mail
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

 

If you have any questions regarding adding "Drop Caps" to your blog feel free to ask away.  Also, if you found this post useful, leave me a comment and rate this post at BuzzFuse.  Thanks!

  
Use Buzzfuse* to easily rate, review, and share this item
Trackback(0)
Comments (0)add comment
feedSubscribe to this comment's feed

Write comment

busy

Tags

See All Tags Add New Tag...
Please Enter New Tags Separated By Comma's
Or Close

Powered by Joomla Tags



All You Gots to Do is Click
Reddit!Del.icio.us!StumbleUpon!Spurl!Newsvine!Blinklist!Furl!Fark!Blogmarks!Squidoo!BlinkBits!Free social bookmarking plugins and extensions for Joomla! websites!
 
< Prev   Next >
[ Back ]

Videos
    

If you like these movies you will love the video section.

Joeprah
Joeprah Who is Joeprah?  I am a stay at home dad to three daughters.  I have an amazing wife, and under the direction and encouragement of close friends, I started this site over a year ago.  You can follow me at The Examiner.com, Twitter, Stumble Upon and Cre8Buzz.  Read more...

 

What is "Team Joeprah?" Read more...