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.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
Enjoy Don't Forget to Drop our comments
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>
Enjoy Don't Forget to Drop our comments
0 comments
Post a Comment