How to Make Drop Cap Letters in Blogger Website

Hello Everybody, Today We are going to tell a amazing tutorial. Today in this post I am going to show How to Make Drop Cap Letters in Blogger Website and How You Can use Drop Cap in Blogger Website ? Have you ever noticed that some websites have the first letter at the beginning of a paragraph larger than the letters after it ?

Drop Cap is an abbreviation of Dropped Capital or capital letters that are at the beginning of a paragraph which is usually used to decorate the writing style to make it more attractive. Most Drop Caps are 2 to 5 lines long, depending on your settings.

To make a Drop Cap on a blog is not as difficult as we imagine. For those of you who often grapple with the world of CSS code, maybe you can easily create your own Drop Cap. However, for lay people and don't understand code, calm down here I will share how to make a drop cap on a blog.

How to Create a Drop Cap on a Blog ?

Go to Blogger.com and Login with Your Account.
Now Open the Template/Theme Menu.
Then Click the down arrow icon next to the Customize/Customize button.
Next select Edit HTML.

Then Copy the code Provided Below and Paste it above the ]]></b:skin> tag.

.first-letter { float: left; color: #636363; font-size: 47px; font-weight: 700; padding-right: 6px; line-height: 1em; }

Do not Forget to Click on Save button.

We have successfully installed the first-letter CSS code on our blog template, the next step is to apply it to the article.

Let's practice right away!

How To Use Drop Cap in Blogger Post ?

Create a new post or edit an existing post.
Set the editor to HTML view mode not Compose Mode.

In the first letter wrap with this code

<span class="first-letter">(First Letter)</span>

example of the first word Have:

<span class="first-letter">P</span>aragraph

Then Publish Your articles and see the results. Finished.

Later the letter P that we have wrapped with the first-letter class span above will look bigger on its own like the first letter at the beginning of this article paragraph.

Conclusion :-

Well that is a great tutorial on How to Make Drop Cap Letters in Blogger Website or How You can use Drop Cap in Blogger Post. I hope you like this post. If you found this helpful then put your lovely comment and if you face any problems then put your comments without any hesitate. Thanks For Reading Our Posts.