Adding Drop Caps to your posts on Blogger Blog

Tweet

You might have seen on many blogs that there are posts in which the first letter of the first word is bigger in size. This letter is called "Drop Cap" also termed as initial cap.

A drop cap is an over-sized capital letter at the start of the text in a paragraph (or in a blog post). It is generally used for design emphasis on many blogs.

It is quite easy to add drop caps to your blog by adding some CSS to your template and here is how you can do it.

Adding Drop Caps...

First you need to backup your blogger template. In your blogger dashboard, click on 'Design' > 'Edit HTML' and then click on 'download full template' and save your template.

1. Go to Blogger Dashboard > Design > Edit HTML.
2. Press CTRL+F to find the code ]]></b:skin>
3. Copy the below code

.post c{float:left; font-size:40px; line-height:30px; margin:0 1px 0 0}

4. Paste it on top of ]]></b:skin> this code or anywhere in the CSS section of your template.
5. Preview your template and if everything works fine, then save it.

Before creating a New Post...

If you want to create a drop cap in your post, then you need to use <c> tag in the post. The first letter of your post needs to go in between the <c> and </c> tags, in order to work your drop cap properly.

Customization

If you want to change the size of the drop cap to whatever size works best for your articles, then just change the 'font-size'. This results in a beautiful and attractive drop cap in your Blogger post.