Dropcap - Giving your post a customizable look

, Posted by ngsk at 1:14 AM

You may be looking in some sites that first letter of each article is displayed as a big letter as shown in below figure. This feature is know as drop cap.
If you too want to show your posts in your blog in similar manner then here is a simple code to add to your blogger template.
1) Log to your blogger

2) Go to Layout “Edit HTML page”

3) Search for </head>

4) Now add below code just above </head>

<style type='text/css'>
.dropcaps {
float: left;
padding: 3px 3px 0 0;
line-height:40px;
display: block;
color: #b4b4b4;
font:Georgia, "Times New Roman", Times, serif;
font-size:70px; }
</style>

OR

Add below code just before "]]></b:skin>"

.dropcaps {
float: left;
padding: 3px 3px 0 0;
line-height:40px;
display: block;
color: #b4b4b4;
font:Georgia, "Times New Roman", Times, serif;
font-size:70px; }

Now as a last step when ever you write a post enclose the first character / Letter of the post betwwen below tags

<span class="dropcaps">"First character / Letter" goes here</span>

When you do the above process you will find First letter of your post as shown in the figure shown at beginning of this post.

You you want to chage the color of the font and size of the font you can edit the style sheet values.

If you like this post place your valuable comments here.

Thank you