How to add drop cap feature to every posts in Blogger blogs. First line of the paragraph can be enlarged to drop down other lines, that is called drop cap.

How to add drop cap feature in Blogger blogs

Adding drop cap would always enhance readability of your post. It is of much bigger size than any of other letters. Normally this is used in the beginning of paragraph.
It enhances the typography of the post. Drop cap is always a common technique in printing industry. In websites, it is rare. If you are caring about typography, you should use drop cap.

Using more than one drop cap in a single post is not better method.

Let’s go to coding part. This is very simple. Add a class for drop cap in CSS part. Go to Edit HTML from Template. Search and find ]]</b:skin>. Paste the following piece of CSS to below ]]</b:skin>.

.drop-cap{font-size: 3.6em;
line-height: 0.815em;
padding: 0 0.111em 0 0;color: #888888;
float: left;
}

Save the template. You can use drop cap in following format. Please don’t use more than one letter in drop cap format. It is not a better typography.

<span class="drop-cap">drop cap here</span>

Replace drop cap here with a single letter. Use this code in the first paragraph as a first letter. This will turn first letter to a drop cap.
Automatic addition to each and every new post can be implemented. Copy above code and go to Settings and take posts and comments. Click on post template, paste the code here and save. Now onwards, this code will automatically added to new post. Just replace drop cap here with first letter.
Finally your HTML part of post will look like this.

<span class="drop-cap">T</span> is my first letter of Post. After I will type like this..

Share this article