google-site-verification: googlefcc831f3afff5489.html google-site-verification=XK9IDkjU7jjUURp5A425iStvbYoDk39UO0ryXDjSqWw google-site-verification: googlefcc831f3afff5489.html CSS for Blogger-Drop caps First letter capital Big & different color in blogger blog posts ~ Blog on Computer, Blogging, Mobile Phones,Technology Network security tips banking Frauds, Malware,

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. 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-
Drop Caps
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.

.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 first letter. You can change it as per your choice like 30px, 40px, 60px, 70px and so on.

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.

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.

0 टिप्पणियाँ:

टिप्पणी पोस्ट करें

Please Donot spam