How To Create Drop Caps In Blogger Template

0 /

Also Read

How To Create Drop Caps-First letter large In Blogger Post
How To Create/Make Drop Caps In Blogger Template | Hello Guys,today in this article we will show you how make first letter large in blogger post that is called Drop Caps.You have seen a use of Drop Caps in Newspaper,Magazines and also lot of websites are using this technique to make paragraph beautiful by making first letter large. You can use this technique in first paragraph of your article to look more stylish and unique.To grab this trick follow the steps mentioned below.we are using pure CSS for Drop Caps.

How Make Drop Caps In Blogger Post Template

installation steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for ]]></b:skin> by Pressing Ctrl+F keys.
Step 4.Copy the below code and paste it just before the ]]></b:skin> tag.
.post-outer:first-letter {
    float: left;
    font-size: 4em;
    color: #666666;
    margin-right: 0.10em;
    line-height: 90%;
    text-shadow: 0.05em 0.05em #C0C0C0;
Step 5.Save your template..You Are Done !!


  • To change the color of the letter (Drop Caps) replace 666666 with your color hex can choose colors from our tool Color Wheel Picker and Color Code Generator.
  • To change the shadow color of the Drop Caps, replace C0C0C0. with your color hex value.
We hope this article helped you to learn How to Make First letter large in paragraph by using CSS trick.If you liked this article please Join us on Facebook,Twitter,Google Plus.

Learn trick to make first letter large in paragraph in blogger template,Tutorial on creating Drop Caps Using CSS trick.Creating First letter/alphabet capital in post to look unique.



Post a comment Blogger Disqus

0 Comments on "How To Create Drop Caps In Blogger Template" So Far - Comment Now!
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Team Bloggersstand