Wednesday 13 March 2013

Widgets

How to Add First Big Letter (Drop Cap Letter) in Blogger


Today I'll tell you the way that how can you add or create first big letter in your each post. Sometimes it looks very beautiful as show in the picture that the very first letter of the post is larger than other words. This is also called 'Drop Cap Letter'. The drop cap letter can have different colour and font size than rest of the words of post. Drop cap letter can also be shown in comments.

Now let's start it. Before doing this you have to get and save the backup.

  • First of all go to your blogger 'Dashboard' then in 'Template' , 'Edit HTML' then you have HTML file then on the top of file you'll have the option 'Expand Widget Template', check this option.
  • Now search the following code with CTRL+F:
  
]]></b:skin>

  • Add the following code, just above mentioned code:

.capital:first-letter {

float: left;

display: block;

font-family: Times, serif, Georgia;

font-size: 40px;

color: #000000;

margin:0px 5px 0 0;

padding:0 0 0 10px;

}


In this code 40px is Size of letter you can decrease or increase it according to you desire and 
#000000 is Value of color you also set it with your desired colour value.

  • After adding above code, search the following code:
 <data:post.body/>
  • Then before and after the above code write the following code (in colour) like this:
<div class='capital'><data:post.body/></div>
  • Finally, save your template.
I hope above mentioned code (<div class='capital'><data:post.body/></div>) will work for you, In case of not working this code you can check one of these code:
 
<p class="capital"><data:post.body/></p>

OR

<span class="capital"><data:post.body/></span>
   
Then save template and I am sure it will work for you. Apply this in you blog and enjoy it. 

SHARE THIS POST   

Author: Muhammad Faheem Usama
Muhammad Faheem Usama is a professional blogger, web designer/ developer and Founder of BHD. He belongs to Read More →

0 comments :