Blogger CSS-create Drop Caps(Big different color First letter) blogger blog post ~ SAMPATKUMARI'S Blog "PARISHKAR"

Blogger CSS-create Drop Caps(Big different color First letter) blogger blog post

Blogger CSS-create Drop Caps(Big different color First letter) blogger blog post - 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
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’.

‘]]></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 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.
<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.

15 comments:

  1. Nice look. Informative post and Good looking blog.

    ReplyDelete
  2. Very informative article here. Thanks for sharing.

    ReplyDelete
  3. Useful information on Drop Caps. Thanks for this.

    ReplyDelete
  4. Every brilliant idea that comes around needs a room and usually the internet provides the perfect place for them in the form of websites.For more information: html and css

    ReplyDelete
  5. It is very useful for text decoration purpose and no deep knowledge of HTML is needed

    ReplyDelete
  6. Very useful article. thanks a lot to the writer.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  7. Hello, are you looking extra money? i recommend Clixsense. Free to sign up by clicking above link

    http://www.clixsense.com/?8172285

    ReplyDelete