Below is the CSS code to create drop caps (or dropped initials) for Blogger templates. I have tested it on Firefox, Chrome, Edge, Internet Explorer, Opera and Safari and verified that it looks the same on all those browsers.
.post-body > p:first-of-type:first-letter {
font-family: Georgia, serif;
font-size: 550% /* or 330% */;
margin: 6px 4px 0 0;
line-height: .7;
float: left;
}
The above code targets the first letter of the first paragraph of every article in a blog, specifying its font face, font size, alignment, line height and margins. In order for it to work, paragraphs must be properly wrapped with opening and closing paragraph tags (<p> ... </p>).
Using Georgia font, a font-size value of 550% creates a drop cap that is 3 lines tall, while a value of 330% makes it 2 lines tall. Using a different font could require adjusting the line-height and margin settings.
To use it, just insert it into your existing stylesheet, or just wrap it with opening and closing style tags (<style> ... </style>) and drop it just before the closing head tag (</head>) of your HTML. Again, it will only work if your paragraphs are properly wrapped with opening and closing paragraph tags. Try it!