Make Drop Caps Effect on Post

If you read newspapers, surely you often see the effects of the DropCaps. DropCaps effe ct is installed on the first letter in the article. If you have worked with Microsoft Word, then you can make the DropCaps effects your document. DropCaps effect that look like this.

If you read newspapers, surely you often see the effects of the DropCaps. DropCaps effe ct is installed on the first letter in the article. If you have worked with Microsoft Word, then you can make the DropCaps effects your document. DropCaps effect that look like this.


To create an effect like this is easy. You need to add this code on your post.

<span style="float:left;color: #cc0000;background:#ffff66;line-height:80px;
padding-:2px 6px 0 0; font-family:verdana; font-size:100px;">First Alphabet Of Your Post</span>

For example.

<span style="float:left;color: #cc0000;background:#ffff66;line-height:80px;
padding-:2px 6px 0 0; font-family:verdana; font-size:100px;">I</span>f you're a Blogger, Technorati perhaps the term is no longer in a foreign ear you. Did you know about Technorati? If not, read this article to complete. Technorati will index all blogs around the world and placing them in the directory. Currently, they are indexing more than 112 million blogs worldwide. They also said that every day there are thousands of 120 blog born. Then a question appears: whether we will need to register to Technorati?

The results is like this.


If you're a Blogger, Technorati perhaps the term is no longer in a foreign ear you. Did you know about Technorati? If not, read this article to complete. Technorati will index all blogs around the world and placing them in the directory. Currently, they are indexing more than 112 million blogs worldwide. They also said that every day there are thousands of 120 blog born. Then a question appears: whether we will need to register to Technorati?

To be you more understanding, I will explain in detail about aboves code.

color: #cc0000 : this code works to set up alphabet color, #cc0000 code is garnet.

background:#ffff66 : this code works to set up background of alphabet, #ffff66 code is yellow.
#fff is code for white color, you can alter this code with you want color.

padding:2px 2px 0 0 : this the code dor padd, 2px--> padding for top, 6px padding for right,
0 --> padding for bottom, 0 --> padding for left. You can alter the value of padding with other value.

font-family:times : this code is for style of font, you can alter the font with font what you want.
Example Arial, Times New Roman and etc.

Font-size:100px : this code works to set up the font size, you can change the size of font.

Below are some examples of DropCaps.

<span style="float:left;color: #6131BD;background:#99C9FF;line-height:80px;
padding:1px 5px 0 0;
font-family:comic; margin: 0px 5px 5px 0px;
font-size:100px;">I</span>f you're a Blogger, Technorati perhaps the term is no longer in a foreign ear you. Did you know about Technorati? If not, read this article to complete. Technorati will index all blogs around the world and placing them in the directory. Currently, they are indexing more than 112 million blogs worldwide. They also said that every day there are thousands of 120 blog born. Then a question appears: whether we will need to register to Technorati?

The result like this.

If you're a Blogger, Technorati perhaps the term is no longer in a foreign ear you. Did you know about Technorati? If not, read this article to complete. Technorati will index all blogs around the world and placing them in the directory. Currently, they are indexing more than 112 million blogs worldwide. They also said that every day there are thousands of 120 blog born. Then a question appears: whether we will need to register to Technorati?


<span style="float:left;color:#51bd31;background:#7f7f7f;line-height:80px;
padding:0 13px 0 10px; border: 2px solid #FF6FCF; border-right: 2px
solid #057B19; border-bottom: 2px solid #606160; border-top: 1px solid
#057B19; border-left: 1px solid #660000; font-family:Verdana; font-style:
italic;margin: 0px 5px 5px 0px; font-size:100px;">I</span>f you're a Blogger, Technorati perhaps the term is no longer in a foreign ear you. Did you know about Technorati? If not, read this article to complete. Technorati will index all blogs around the world and placing them in the directory. Currently, they are indexing more than 112 million blogs worldwide. They also said that every day there are thousands of 120 blog born. Then a question appears: whether we will need to register to Technorati?

If you're a Blogger, Technorati perhaps the term is no longer in a foreign ear you. Did you know about Technorati? If not, read this article to complete. Technorati will index all blogs around the world and placing them in the directory. Currently, they are indexing more than 112 million blogs worldwide. They also said that every day there are thousands of 120 blog born. Then a question appears: whether we will need to register to Technorati?

Perhaps the way over too difficult for you. You can create an DropCaps effect in other ways easier.

1. After log in, go to Layouts.
   
2. After that, click the Edit HTML.
   
3. Please backup your template before edit. Click Download Full Template.
   
4. Search ]]<</b:skin> code. Then copy below code and paste it before ]]<</b:skin> code.
   
   
   /* drop caps effect*/
   
   .dropcaps {
   float:left;
   color:#000;
   background:#fff;
   line-height:80px;
   padding-:1px 5px 0 0;
   font-family:times;
   font-size:100px;
   }
   
   
5. Then save.
   
6. Go to Settings tab.
   
7. Click on Formatting.
   
8. Scroll down the page and you will see Post Template. Beside Post Template you will look a empty box, type the following code there.
   
   <span class="dropcaps"> </span>
   
   
9. Then save.

When you post an article, you can make dropcaps effect with the following code.


<span class="dropcaps">FIRST ALPHABET </span>


Now, you can enjoy the effect you DropCaps! See you at my next post!!!