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’.
When you hit ‘Enter’ the string will be highlighted as shown
below and you will automatically taken there.
Now copy and paste the following small code carefully just
above the highlighted string.
font-family: Times, serif, Georgia;
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.
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.
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>
<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,
