How To Simply Use A Drop Cap Large First Letter On Your Blog - Helper Blogger

Blogger Widgets | Templates | Tutorials

Latest

Monday, 13 February 2012

How To Simply Use A Drop Cap Large First Letter On Your Blog

Just read any magazine while reading you will surely watch a large first letter.Here I am giving a tutorial about dropping a large cap.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.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.




How To Add It On Blogger?

  1. Go to Blogger Dashboard Design Edit HTML.
  2. Download/Backup your template.
  3. Now find ]]></b:skin>
  4. Paste below code just before ]]></b:skin>
p:first-letter {
display:block;
margin:5px 0 0 5px;
float:left;
color:#0033CC;
font-size:60px;
font-family:Verdana;
}

Customizations


  • To change the color of font find this line - color:#0033CC;
  • To change font size find this line - font-size:60px;
  • To change font family find this line - font-family:Verdana;

3 comments:

  1. Dude everything is alright but.After Adding this code.My footer links and some other unwanted letters are alo getting the Drop cap.Which i don't Want and Also not getting the Drop cap on My posts

    ReplyDelete
    Replies
    1. Ok.Thanks for informing me.I am working on this issue.I will update my code soon.

      Delete
    2. Okay Now it's Working But How to Hide this On Homepage

      Delete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM