How To Use A Drop Cap Large First Letter In Posts On Blogger


A very popular effect used in magazines and newspapers is a drop cap first letter to paragraphs.This effect can also be found on many blogs and websites.The effect is a large first letter stretching down three or four lines with the text wrapped around.The drop cap letter can also use a different font and can be a different color to the rest of the text.Almost two years ago i published a post showing how to add a Drop Cap to your blog, in this post i have an even easier more effective method.This method needs just a few lines of Css to be added to your template then the first letter of every post on your blog will automatically be a drop cap.You can then choose the color and font of the drop cap.Check out the Blogger screenshot, demo and tutorial below.Wordpress users can use the Wordpress Drop Cap Plugin.

View Demo Button

Add The Drop Cap Large First Letter To Your Blogger

Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

Step 1. - In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css, as shown in the video below.

Step 2. Copy and Paste the following code into the Css Section then click Apply To Blog.

p:first-letter {
margin:5px 0 0 5px;

Edits :

Color - The Color highlighted in yellow can be changed, find color codes here : Html Color Code Generator.
Size - The font size highlighted in green can be increased and decreased from 60px.
Font - The font highlighted in red is currently Georgia and can also be changed.

Step 4. Save your template.

That's it you now have a cool drop cap first letter on your blog.Some people have had trouble with this method so i it does not work for you try the original - Large First Letter Blogger.Make sure to check out more of our Blogger Tutorials.

Drop Your Comments And Questions Below.

Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative

If You Enjoyed This Post Please Take 5 Seconds To Share It.


  1. I tried this w/ blogger, but it didn't work. I use the new template designer and have been editing HTML for 2 years now. Didn't work. Anyone else figure it out?

  2. Doesn't work for me either. Is it because I too am using the new template desigenr?? Any help is appreciated indeed

  3. LOL it only works in the sidebar...and THAT is just not where I wanted it.mmm strange, why in the sidebar and NOT in posts??

  4. If this method is not working for you check out the original here.

  5. It didn't work for me either. I think the JS I am using to create a summery of each post is causing it to be ignored.

  6. I can't get this to work. I tried the older version as well, but still couldn't get it to work. Any recommendations would be greatly appreciated. Thanks so much!

  7. I've tried this and the old and I'm still not getting it to work. Above/Before that piece of code is a right bracket...should I return after that and put the code on a separate line or just use the same line that right bracket is on? Thanks.

  8. thanks for sharing

  9. Paul,
    It seems that the p:first class acts on any text utilising the P element, is this correct? My posts have a date field above which also uses P and consequently both the first letter of the day AND the first letter of the post comment is uppercase. Anyway I can just make my posts appear with the uppercase and not the date?

  10. Can't get it to work no matter which way.

  11. Its really a great info to share.Thanks a lot for this post.

  12. It only works for me in the sidebar... i may have done something wrong.


Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.

Hire Us