How To Capitalize First Letter In Blogger Posts Using CSS?

A drop top is a broadened first (capital) letter of a passage. The letter is dropped a few lines profound and the highest point of the letter is generally flush with the highest point of the primary line of rest of the content. Drop tops are utilized to lead the perusers eye to the begin of an article or a section. You can discover them in many magazines and daily papers.

This instructional exercise will demonstrate to you best practices to transform the main letter of your Blogger posts into a straightforward drop top. Once the code is included it ought to ideally apply drop top to all you’re existing and future posts, consequently. We will just utilize a first-letter pseudo component in your format CSS. There is no requirement for you to alter your posts.*

*Note 1: For this to work, your content must be first thing to happen in your post. On the off chance that you put a picture, a div or whatever other HTML component toward the start of a post, the code without anyone else won’t work.

Features:

1.) Pure CSS Added.
2.) No JQuery Added.
3.) No JavaScript Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Browser.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog”.
3.) Go To “Layout”.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT”
6.) Click “+” Icon To Add It.
7.) Now “Copy” The Below Code And “Paste” It To There.
8.) Leave The “Title” Empty.
9.) Click “Save”, Now You Are Done.

CSS:

<style>.post-body:first-letter, .post-body .dropcap:first-letter {font-weight:bold; font-size:65px; float:left; padding:0; margin:-4px 5px 0px 0px; position: relative; background-color:none; line-height:0.9;}
.post-body p:first-child:first-letter. {font-weight:bold; font-size:65px; float:left; padding:0; margin:-4px 5px 0px 0px; position: relative; background-color:none; line-height:0.9;}</style&g

Now if you want to captilize any paragraph first letter then you can do this by adding the text inside the below HTML box easily.

HTML:

<span class="dropcap">This is the text at the beginning of your post. Any amount of text will do.</span>

Customization:

1.) Edit Your CSS Options As Per Your Requirements. Rest Is Ok For General Us. If You Are Pro, Then You Can Do Any Thing.

Last Words:

That’s all we have. If you have any problem with this code in your blogger template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…