Sep 21, 2016

Make Paragraph's First Letter Big (Large) with CSS in Blogger

data:blog.title

Today I'm here with another post customization trick, In this case, You are going to make paragraph's first letter bigger of your blog posts. You might have seen this effect on many other blogs too. This effect is only for stylizing the first letter of your blog's paragraph and make it look good.




First Letter Big, First Letter Large, Paragraph First Letter Large in Blogger

You can see demo of this effect in the above screenshot and I've also stylize the first letter of this post and make it bigger, better and sexier to give you a live demo. Scroll to top and see it live on this post.

You can also use Drop Cap letter in a different color from the all other text. You might have also seen this effect on many newspapers, magazines and literature. So in this post, I'm going to show you, How to apply Paragraph Drop Cap using CSS in Blogger/Blogspot?


Make Paragraph's First Letter Bigger in Your Blogger Blog


 Note :  Must download a backup copy of your blogger template before doing any customization inside.

STEP 1] Go to Blogger.com >> Template >> Edit HTML.

STEP 2] Click anywhere inside the code area and using CTRL+F keys of your Computer Keyboard search for ]]></b:skin> tag and paste below code just above of it.

.post p:first-letter{ float:left;padding:20px;font-size:30px;font-weight:bold;text-transform:uppercase;font-family:verdana;background:#ff0072;border-radius:100%;color:#fff;line-height:.6;margin:5px 10px -7px 0;border:10px solid #111;}

STEP 3] Above I've highlighted few codes, you can customize it's style as per your needs.

STEP 4] Now click on Save Template button to apply this effect on all of your blog posts.

STEP 5] Now when ever you want to show drop cap (Paragraph's First Letter Big) on your blogger blog then open post editor >> click on HTML button and after that use <p>YOUR PARAGRAPH</p> tag. For example look below screenshot.

First Letter Large, Big Paragraph First Letter

That's it. Now open your blog post and see it live on your blogger blog.

Conclusion:'

So above guide is about "How To Make Paragraph's First Letter Bigger in Blogger Blog?" And I hope you guys will like this effect. I've tried my best to make this tutorial as easy as possible bu in any case you are facing problem with this trick, then let me know via using comment box. I'll happy to assist you. :)


Did you like this post? If you like this post then don't forget to share this article with your blogger friends using any one of your social networking ID.

Don't forget to subscribe.
Thank You! 
Stay Blessed and Stay Happy!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.