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. 
About the Author:
tilt  hover effect
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV

Related Posts Plugin for WordPress, Blogger...