Create Drop Caps (Large First Letter) in Blogger/Blogspot

No Comments
I'm sure you have seen newspaper articles with a large first letter that stretches down four or five lines, with the text wrapped around the large letter.I have heard this called a drop cap or newspaper effect but for the want of a better term we will call it the large letter effect. In this tutorial i will show you how to apply automatically Magazine text style in Blogger Posts and Comments. So let's start adding it!.You can add  Drop Caps letter in our blogger post or blogger comments.Here we go for the code.



    

Follow These Steps;-

1.Login to blogger and go to Design>>Edit HTML
2.Click Expand Widget Template Check Box
3.Find following code ( Using CTRL+ F )

]]></b:skin>

4.Copy and Paste the following code Directly Above / Before ]]></b:skin>

.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;
}

For Customize:
Color - change the color highlighted in blue with the value of your desired color
Size - to change the letter size, increase/decrease the value highlighted in pink. 

Now search for this code:
<data:post.body/>

5.Then immediately before and after add the red fragments you see in the example below: 
<div class='capital'><data:post.body/></div>

6.Save your template  

And If the given code is not working then try this code
<p class="capital"><data:post.body/></p>
                                 or
<span class="capital"><data:post.body/></span>

Next PostNewer Post Previous PostOlder Post Home

0 comments

Post a Comment