Create Drop Caps For Blogger Posts And Comments

Hundreds of plugins are not available in blogger similar to WordPress but still we can customize blogspot using JavaScript, CSS and HTML codes. It has been seen over the years that people prefer customized blog than non customized. If your blog is attractive then visitor is surely gonna stay for sometime. Of course beauty attracts everyone. So today we're having one more way to modify your blog. This feature is called drop cap. It's also referred as drop initial. You might have noticed the capital first letter of a paragraph in some blogs, websites or magazines. 

create drop caps in blogger posts comments

It just make your article attractive, stylish, eye-catching and no doubt classy. We're gonna show you how to add drop cap in blogger articles and comment section too.

What Is Drop Cap?

It is the capital or enlarged first letter of any paragraph which is stretched down up to 3-4 lines. It starts at the first line and end up on second, third or even fourth line. Drop cap be of different font or color from the rest of the text.

How To Automatically Apply Drop Cap 

1. In Blog Posts

1. Go to blogger.
2. Login with your account user name and password.
3. Navigate to Blogger Dashboard>>Template>>Edit HTML.
4. Click anywhere in the code screen and press Ctrl+F to open search box.
5. Now paste the following code into it and hit enter.

]]></b:skin>

Note: - Now you might need to expand the code within it, simply click on the arrow next to above code and search ]]></b:skin> one more time.

6. Copy the following CSS code and paste it just above the code mentioned in previous step.

.capital:first-letter {

float: left;

display: block;

font-family: Times, serif, Georgia;

font-size: 40px;

color: #000000;

margin:0px 5px 0 0;

padding:0 0 0 10px;

}

7. To increase/decrease font size, change the value in red color.
8. Change font color using value in blue.
9. Then search for this code.

<data:post.body/>

10. Now add the red color code just before and after, see the example below.

<div class='capital'><data:post.body/></div>

11. Once everything done, click on Save Template button.
12. If the above code doesn't work then try any one out of these codes.
<p class="capital"><data:post.body/></p>

or

<span class="capital"><data:post.body/></span>

2. In Blog Comments

1. Login into your Blogger Dashboard.
2. Go to Template and click on Edit HTML button.
3. Perform the step 4th, 5th and 6th given above.
4. Now search for this piece of code.

<data:comment.body/>

5.Add the red color code before and after <data:comment.body/>

<p class="capital"><data:comment.body/></p>

6. Save the template and you're done.

For any doubt or query feel free to leave a comment below.