CSS for Blogger-Drop caps First letter capital Big & different color in blogger blog posts

CSS for Blogger-Drop caps First letter capital Big & different color in blogger blog posts

Drop caps is term in writing text article and it mean the beginning letter appears bigger than the rest of the text. As we see in many articles the first letter of the article appears big in size and sometimes the first letter appears even a different color too. This is a writing style and looks attractive. 

 

CSS for Drop caps

 

We can use it in our blog posts too. For this we need to add a small CSS code to our blog template HTML file. After adding the code, the style will automatically implied to the blog posts at the time of posting. The CSS code and the simple procedure is explained below-

 To implement Drop caps on blog post comments please read this post - Blogger CSS-add drop Capsfirst letter big capital different color to post comments

• Login to your blogger dashboard.
• Click Template
• Click Edit HTML, the Blogger HTML file will be opened.
• Click anywhere in the open HTML file and press ‘Ctrl+F’ to open the HTML search box.
• Now write or copy and paste the following string in the HTML search box and press ‘Enter’.

‘]]></b:skin>’

 

When you hit ‘Enter’ the string will be highlighted as shown 

 

below and you will automatically taken there.

‘]]></b:skin>’

Now copy and paste the following small code carefully just 

 

above the highlighted string.

.capital:first-letter {

float: left;

display: block;

font-family: Times, serif, Georgia;

font-size: 50px;

color: #000000;

margin:0px 5px 0 0;

padding:0 0 0 10px;

}

Note –

1.       50px - This is the size of the font of the first letter of your

 

 ffirst letter. You can change it as per your choice like 30px, 40px, 60px, 70px and so on.

 

Y

Yyou may like to read on - How to Define Maximum Limit or  

    Number of blog Posts Under each Label by HTML Editing

          

 

2.       #000000 – This the color of the font of the first letter of your first letter. #000000 means dark black but You can change it as per your choice. Click here togo to the HTML color picker page to find HTML color codes

 

3.       You can add font-weight: bold or font-weight: normal if you so wish.

Now find the following tag in your HTML File using the HTML search box.

<data:post.body/>

You have to make the following additions to it.

Add ‘<div class='capital'>’before it and add ‘</div>’ after it and finally your code will be like this.

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

Save your template and test the work you have done. If it works properly, well and good and you are done, but unfortunately if it does not work in your template try these steps.

Please don’t touch the main CSS code and go to these changes you have made recently to the HTML tag <data:post.body/>

as mentioned above. Your recent changes to be changed further tries are –

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

Try replacing the above string by the following two strings one by one and either of these must work.

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

Or

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

Thanks and enjoy.

 

why drop caps are used in document, Are drop caps necessary, 

What is the purpose of drop caps, What is meant by drop cap, 

How do you make a drop cap drop caps css, drop caps in design, 

drop cap means, when to use drop caps, drop caps font, drop 

caps penguin, types of drop caps,