How To Use A Drop Cap Large First Letter In Posts On Blogger

7:02 AM | , ,

Become a guest author on Create the Blogger.

A very popular effect used in magazines and newspapers is a drop cap first letter to paragraphs.This effect can also be found on many blogs and websites.The effect is a large first letter stretching down three or four lines with the text wrapped around.The drop cap letter can also use a different font and can be a different color to the rest of the text.Almost two years ago i published a post showing how to add a Drop Cap to your blog, in this post i have an even easier more effective method.This method needs just a few lines of Css to be added to your template then the first letter of every post on your blog will automatically be a drop cap.You can then choose the color and font of the drop cap.Check out the Blogger screenshot, demo and tutorial below.Wordpress users can use the Wordpress Drop Cap Plugin.


Add The Drop Cap Large First Letter To Your Blogger


Remember Always Back Up Your Template Before You Make Changes!

Step 1. In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css

Step 2. Copy and Paste the following code into the Css Section then click Apply To Blog.

p:first-letter {
display:block;
margin:5px 0 0 5px;
float:left;

color:#0033CC;
font-size:60px;
font-family:Georgia;
}

Edits : 

Color - The Color highlighted in yellow can be changed, find color codes here : Html Color Code Generator.
Size - The font size highlighted in green can be increased and decreased from 60px.
Font - The font highlighted in red is currently Georgia and can also be changed.

Step 4. Save your template.

That's it you now have a cool drop cap first letter on your blog. Make sure to check out more of our Blogger Tutorials.

Drop Your Comments Below.

No comments:

To Use A Smiley In Your Comment, Simply Add The Characters Beside Your Choosen Smiley To The Comment:
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =)) Grab Smily Gadget

Post a Comment

 
Gadgets By For Bloggers