Paragraph Dropcap Make first letter Large In Blog Post

From the beginning of CSS there was: first-line and: first-letter Elements which are not much familiar but we can use them for decorating our text while Blogging. In Blogger Blog post when we write a content then first letter of that post will display large and colored. This style massively seen in news papers but we can add this style Blogger and WordPress content.

Basically this is a complete CSS:first-letter pseudo-element trick and was commonly used to create a typographical effect like a drop cap. In this tutorial I will show you about this trick thus you can add this effect in your Blogger template. Just follow the below steps for adding this CSS trick-

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on Now click on -> Template -> Edit HTML->

Step 3 Now find the </b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac) 


Step 4 Copy and Paste any code from below code above </b:skin>

/* Trick By www.bloggerspice.com */
.dropcap {float:left;
color:#4791d2;
font-size:75px;
line-height:60px;
padding-top:4px;
padding-right:8px;
padding-left:3px;
font-family:Georgia}

Customization

• To change the text color replace #4791d2 code with different color code.
• For changing the Font size replace 75px with different size
• For changing the Font alter Georgia with other font name.

Step 5 hit the Save template button.

How to make it work in Blogger?

To make it work in Blogger Blog post you have to add a simple one line script. While writing in Blogger post editor then switch to Compose view to HTML view and copy the below code and paste it there.

 
<span class="dropcap">Your First Letter here</span>

Customization

• just replace the Your First Letter here with first letter of your paragraph.

For example: We love Blogging

So to add dropcap write it with code

<span class="dropcap">W</span> e love Blogging.

After completion of your writing just switch to Compose view and publish your post. 

After that check Blog post and see the first letter of first paragraph become large and colorful. The output will be just like above image.