Paragraph Dropcap Make first letter Large In Blog Post
Paragraph Dropcap Make first letter Large In Blog Post
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
<span class="dropcap">W</span> e love Blogging.
After
completion of your writing just switch to Compose view and publish your post.
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.
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.
2 comments