Computing Magazine

Create Drop Caps For Blogger Posts And Comments

Posted on the 07 January 2016 by Rahulthepcl

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.
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. Go to .
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.

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.

font-family: Times, serif, Georgia;

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.

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

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.

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.

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


Back to Featured Articles on Logo Paperblog