How to Create Drop Caps (Big First Letter) in Blogger

Hi Bloggers, today I'm sharing an amazing CSS trick known as Drop Caps (Big First Letter). This trick is still being used by some top websites. This trick Enlarges the first letter of each blog post on your blog and gives a unique and professional look to your blog. You might have seen this trick on some top websites. If you ever wished to use this trick on your blog, then you're at the right place. Today in this tutorial I'll show you that How to Create Drop Caps (Big First Letter) in Blogger. Let's begin:

Recommended for You:

• 4 Cool CSS Tricks to Spice Up your Blog

• Create a Stitched Effect Using CSS  

• How to Change the Text Selection Highlighting Color in Blogger

• Add Hover Effect to Your Header Image in Blogger

• How to Create 3D Rolling Link Effect Using CSS in Blogger

How to Create Drop Caps (Big First Letter) in Blogger

First and foremost go to Blogger.com and log in to your Blogger Account. Go to Template >> Edit HTML >> Click inside the code area >> Press Ctrl+F to search and search for the below tag

]]></b:skin>

 Now copy the below code and add it just above/before it (]]></b:skin>)

.capital:first-letter {
color: #000000;
float: left;
margin:0px 5px 0 0;
font-size: 38px;
font-family: Times, serif, Georgia;
display: block;
padding:0 0 0 10px;
}

Now again search for the below tag

<data:post.body/>

And then add the green tags before and after it as shown below

<div class='capital'><data:post.body/></div>

Click Save Template button and check your blog. If the above code is not working then try the below two methods (Skip the above line and try the below one, add the green codes before and after)

<p class="capital"><data:post.body/></p>

Or Try this:

<span class="capital"><data:post.body/></span>

Finally Click Save Template button and you're done!

We hope this article may have helped you in learning How to Create Drop Caps (Big First Letter) in Blogger. Share this article with your friends and don't forget to subscribe us!

Share This:

Tags:

Blog Design CSS Tricks

• Prevoius
• Next