Adding Drop Cap to Each Blogger Post

Upon landing the viewers to your site sometimes needs another way for them to read articles of their need or just stay and read for there is  something that catch their attention and that is your  big capitalized letter in the beginning of  your post.
Adding drop cap to your post may  in the other way  increase traffic for  it  leads the readers eye to the start of an article or a chapter. You can find them in most magazines and newspapers articles.

In this tutorial, I will show you how to transform the first letter of the post into a drop cap.Once the code is added it automatically apply drop cap to all your existing and future posts.
For this code to work, TEXT  should occur first and not an image in  your blogger post.

 adding drop cap to post

Adding Drop Cap to Each Blogger Post


Step 1. Go to Blogger Dashbboard >>  Template >> Edit HTML
 adding drop cap to post
Step 2. Find the code </b:skin> and click the arrow beside it to show its css, then scroll down and look for the code   ]]></b:skin>. You can use Control F,
 adding drop cap to post

Step 3. Just above ]]></b:skin> paste the code below, the screenshot below could help you,
 adding drop cap to post


.post-body: first-letter, .post-body .dropcap:first-letter {
font-weight:bold;
font-size:65px;
color:#158aee;
float:left;
padding:0;
margin:-4px 5px 0px 0px;
position: relative;
background-color:none;
line-height:0.9;
}



Step 4. Save it. Have a nice day, friend!

Short Customization:


To change the font size of the  letter, replace the red bold text 65px with your own font size.
To change the font color of the letter, replace the blue bold text with your own color preference. You can choose it here.
To have a proper drop cap alignment with rest of the text in your  post, adjust the orange bold text -4px 5px 0px 0px  above.

If you have some questions regarding this post don't forget to drop your comment below.
HAVE  A NICE BLOGGING!

Credits goes to bloggersentral with some modification from me. 

No comments:

Post a Comment