How To Make Drop Capital Letter (Drop Cap) In Blogger Post

I n MS Word, there are facilities that can be used to create Drop Cap "formats the first character in the first paragraph as a drop capital letter", we often seen at the beginning of the novels, where the top of the first letter of the first word lines up with the top of the first sentence and drops down to the four or fifth sentence.

In this post we will learn how to create a drop cap in blogger post. exactly like the first sentence of this post.

1. Go to Dashboard >> Layout >> Edit HTML  and ensure you have checked the "Expand widget templates" box..
2. Then using your browser's search fuction, locate this CSS Code

.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }

3. Add this CSS code right after it

.dropcaps {

float: left;

color: #000000;

font-size: 100px;

line-height: 80px;

padding-top: 1px;

padding-right: 5px;

}

So it will look like :

 

4. Don't forget to SAVE TEMPLATE 

5. If you want to create a drop cap in your post, then in the beginning word of your post, you  must type

<span class="dropcaps">Your First Letter</span>...second letter and so on

The following example is what I do on this post.

 

And you can see for yourself the Drop Cap display of this post.

6.  We can easily set/adjust the display of our Drop Cap by change the setting of .dropcaps.

You can change the color by change value #000000 (Black) with "yours". You can also change the setting of the font (size, height, weight, padding etc).

If you confuse about your HTML color code, then you can visit

http://doit2us.blogspot.com/search/label/change header color

Hope works for you and.. Good luck..!!