Notification texts go here Contact Us Buy Now!

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
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 ?

  1. Go to Blogger.com and Login with Your Account.
  2. Now Open the Template/Theme Menu.
  3. Then Click the down arrow icon next to the Customize/Customize button.
  4. Next select Edit HTML.
  5. 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; }
  6. 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 ?

  1. Create a new post or edit an existing post.
  2. Set the editor to HTML view mode not Compose Mode.
  3. 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
  4. 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.

Getting Info...

About the Author

Theforyou you can Trust on us for any information provided by our trusted team and we also help others to earn money online and yes we donate 30% of our profit to charity. Love & Support theforyou.in

5 comments

  1. Keep it up
  2. Nice post ❤️❤️❤️
    1. Thanks For Comment. :(
  3. Perfect
    1. Thanks For Comment. :(
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.