Paragraph Dropcap Make first letter Large In Blog Post

Paragraph Dropcap Make first letter Large In Blog Post

2
data:blog.title
dropcap

From the beginning of CSS there was: first-line and: first-letter Elements which are not much familiar but we can use them for decorating our text while Blogging. In Blogger Blog post when we write a content then first letter of that post will display large and colored. This style massively seen in news papers but we can add this style Blogger and WordPress content.

Basically this is a complete CSS:first-letter pseudo-element trick and was commonly used to create a typographical effect like a drop cap. In this tutorial I will show you about this trick thus you can add this effect in your Blogger template. Just follow the below steps for adding this CSS trick-


Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on Now click on -> Template -> Edit HTML->

Step 3
 Now find the </b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac) 


Step 4 Copy and Paste any code from below code above </b:skin>

/* Trick By www.bloggerspice.com */
.dropcap {float:left;
color:#4791d2;
font-size:75px;
line-height:60px;
padding-top:4px;
padding-right:8px;
padding-left:3px;
font-family:Georgia}

Customization

  • To change the text color replace #4791d2 code with different color code.
  • For changing the Font size replace 75px with different size
  • For changing the Font alter Georgia with other font name.
Step 5 hit the Save template button.

How to make it work in Blogger?

To make it work in Blogger Blog post you have to add a simple one line script. While writing in Blogger post editor then switch to Compose view to HTML view and copy the below code and paste it there.
 
<span class="dropcap">Your First Letter here</span>

Customization

  • just replace the Your First Letter here with first letter of your paragraph.
For example: We love Blogging

So to add dropcap write it with code


HTML view

<span class="dropcap">W</span> e love Blogging.
After completion of your writing just switch to Compose view and publish your post. 


first letter capital

After that check Blog post and see the first letter of first paragraph become large and colorful. The output will be just like above image. 
Paragraph Dropcap Make first letter Large In Blog Post
4 Stars stars - "Paragraph Dropcap Make first letter Large In Blog Post" F rom the beginning of CSS there was: first-line and: first-letter Elements which are not much...

Post a Comment

হুম অনেক সুন্দর , ট্রাই করে দেখি ....................

Hmm Good but all time manually korte hobe.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *