How to Create Drop Caps (Big First Letters) in Blogger/Blogspot

Here's another way to customize your Blog. In this case, your Posts and Comment's first letter. 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 have a different color from the rest of the text. This style can be often seen in newspapers, literature, magazines. So, in this tutorial I will show you how to apply automatically a Magazine text style on Blogger Posts and Comments. Let's start adding it...

-> Add Drop Caps For Blogger Posts

drop caps, blogger blogspot, tutorials

-> Add Drop Caps For Blogger Comments

drop caps, first letter, blogger

Big First Letter for your Blogger / Blogspot Posts


Step 1. From your Blogger Dashboard, go to Template and click on the Edit HTML button:


Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box. Type this piece of code inside the search box then hit Enter to find it:
]]></b:skin>
Note: you might need to click on the arrow next to it to expand the code within and then you need to search ]]></b:skin> one more time.

Step 3. Just above ]]></b:skin>, add the following CSS code:
.capital:first-letter {
float: left;
display: block;
font-family: Times, serif, Georgia;
font-size: 40px;
color: #000000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}
Color - change the value in blue with the hex of your color
Size - to change the letter size, increase/decrease the value highlighted in pink.

Step 4. Now search for this code:
<data:post.body/>
Step 5. Then immediately before and after add the red fragments you see in the example below:
 <div class='capital'><data:post.body/></div>
Step 6. Save the changes by clicking on the Save template button.

Important! If the above code is not working, add one of following codes from this example:
<p class="capital"><data:post.body/></p>
Or try this instead:
<span class="capital"><data:post.body/></span>

Big First Letter For Blogger/Blogspot Comments

Step 1. Log in to your Blogger account > go to Template > Edit HTML > click anywhere inside the code area and press CTRL + F keys to open the search box

Step 2. Type the following piece of code inside the search box and hit Enter to find it (if you have already added this code, skip step 2 & 3):
]]></b:skin>
Step 3. Add the following code just above ]]></b:skin>:
.capital:first-letter {
float: left;
display: block;
font-family: Times, serif, Georgia;
font-size: 40px;
color: #000000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}
Color - to change the letter color, replace the value in blue with the value of your color. Here's a tool that might help you to find the hex of the color that you need: Color Code Generator
Size - to change the letter size, change the value in pink.

Step 4. Then Search for this piece of code:
<data:comment.body/>
Step 5. Add the red codes before and after <data:comment.body/> as you can see in my example below:
<p class="capital"><data:comment.body/></p>
Step 6. Save your Template.

That's it! Now you have a cool drop cap first letter on your blog. If you have any question, leave a comment below!

30 comments:

  1. hii admin.. ihave 2 doubts please help. First one is how to draw arrows and cirles on a picture? Second one is how can i create a animated image for blogger tutorial? please help........

    ReplyDelete
  2. intersting post...keep it up...
    recent post:Customise About me
    Regards,
    ProBloggersTricks

    ReplyDelete
  3. Nice tutorial Dude. i like to Publish Articles With a Drop Cap First Letter.thanks for Sharing

    ReplyDelete
  4. @arun Kumar:
    I think Anonymous..:D

    ReplyDelete
  5. how to add html code in a box like yours in blog post. please tell me

    ReplyDelete
  6. nice tips...i tried it on my blog. thanx

    ReplyDelete
  7. Ya... very nice info And Very Useful To Attractive blog post..

    ReplyDelete
  8. Thanks its brilliant and it works :)) Keep up the good work!

    ReplyDelete
  9. Not working no matter what method used, not surprised either.

    ReplyDelete
  10. Guess the Caps for the Post Doesn't work anymore . and the code for span code should close span not div otherwise template showing error !!

    ReplyDelete
    Replies
    1. Thanks for telling me, didn't noticed the error. For me it works, try adding the code to the first data:post.body

      Delete
  11. My HTML doesn't contain
    What can I do?

    The following is the only part of my HTML that mentions post-body...

    .post-body {
    font-size: 110%;
    line-height: 1.4;
    position: relative;
    }
    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img {
    padding: 0;
    background: #111111;
    border: 1px solid #111111;
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    }
    .post-body img, .post-body .tr-caption-container {
    padding: 1px;
    }
    .post-body .tr-caption-container {
    color: #134f5c;
    }
    .post-body .tr-caption-container img {
    padding: 0;
    background: transparent;
    border: none;
    -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
    box-shadow: 0 0 0 rgba(0, 0, 0, .1);
    }

    ReplyDelete
  12. Just like to say that your tutorials have helped me a lot. I don't use them all but they've helped me become far more comfortable with coding and blogger in general.

    Thanks again.

    ReplyDelete
  13. Not Working for me... i had tried it many times.. is three times in my html code

    ReplyDelete
  14. It does not work for me either. Shame,because i would like to add it to my blog.

    ReplyDelete
  15. I tried this tutorial and it worked for me in a different way! When I previewed the template, the capital letter was present on the post title! What did I do wrong? I just want a capital letter for the post! Thank you

    ReplyDelete
    Replies
    1. Sorry but it doesn't take effect if your post starts with an image because the code is trying to read the first letter of your text and the html code of your pictures is before it.

      Delete
  16. it works on my blog, thanks for the code.

    ReplyDelete
  17. Brilliant! You are a genius.

    ReplyDelete
  18. did not work for my blog, but thanks anyway

    ReplyDelete