LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Tricks » How To Capitalize First Letter In Blogger Posts Using CSS?

How To Capitalize First Letter In Blogger Posts Using CSS?

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.

Recommended For You:
Essential Tips For SEO And SMO In 2017

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…

Recommended For You:
Want To Make A Killer Post Then Here We Have Secrets

You Like It, Please Share This Recipe With Your Friends Using...

14 Responses to “How To Capitalize First Letter In Blogger Posts Using CSS?”

  1. Communiqua says:

    Great article. It is very useful and informative. Thanks a lot for sharing this post.

  2. Thanks for this tutorial admin. I was searching for this since very long time. My Navigation bar doesn’t capitalize on it’s own. Thanks for the guide. have a nice day

  3. naman malviya says:

    Awesome post thanks to provide this amazing knowledge visit most amazing things in the world.

  4. Communiqua says:

    Awesome and helpful post! Thanks for sharing this post. Nice tips shared

  5. Communiqua says:

    Great article, It is very useful and informative. Glad to read the article. Thanks for sharing.

  6. Sadri Ercan says:

    This is very useful css codes. I like this style. Thanks for article.

  7. Its very amazing article thank to provide itamazing article thanks to provide this importent knowledge.

Leave a Reply to Communiqua Cancel reply

Your email address will not be published. Required fields are marked *