How to Large The First Letter of a Post in Blogger

 How to Large The First Letter of a Post in Blogger

Reading a book or a newspaper or sometimes even a magazines you probably seen a big letter in the first paragraph of the chapter. That big letter call Initial or drop caps. In this lesson we will show you how to add drop cap in blogger blog.

You can read out previous post on How To Restrict Your Blogger Blog From Users and How to Easily Add LinkedIn Share Button to Blogger

What is Initial Or Drop Caps 

Initial or drop caps however it has very old history it was mostly used in the old books or manuscripts.

Drop caps is use to decorate and Larger the first letter on the first paragraph of the chapter. Nowadays it is the most commonly use in newspaper,magazines and also in books. It help to capture the use interaction with in a second.

What we will do and what you have do:

Actually we will be using CSS pseudo class selectors to grab the first letter of the content and give larger font-size and other staying to appropriate character.

Probably most of blogger use custom template on their blog and for that reason they have different classes , so in order add drop caps in blogger blog you have to create a div and add class name to it and inside that div place your blogger <data:post.body code.

Add Drop Caps In Blogger

It is pretty simple , sign in to your blogger account then go to >> tempate >> Edit HTML and now click anywhere in the html editor then press Ctrl+F and then a search box will open now paste the following code and press enter two times .

<data:post.body/>

you will see couple of data:post.body code  like this ,we will add our div to the bottom one



2nd Now replace that code with following.
<div class='drop-cap'><data:post.body/></div>


3rd And then its time to add CSS style codes , now you have to serach for following code.

</b:skin>

4th Now Just above it paste the following codes.
@import url(https://fonts.googleapis.com/css?family=Alegreya:400,900,700);
.drop-cap:first-letter 
  {
    font-family: 'Alegreya', serif;
    text-shadow: -1px 6px 5px #a4a4a4;
    float:left;
    font-size:4.3em;
    line-height:100%;
    color:#333;
    margin-top:5px;
    marign-right:5px;
  }

Note: I'm using Google font for drop cap font-family if you do not want to use then remove @import url and font-family.

5th Finally save your template and your done!.

I hope you like this post , please share and comment and you can follow us on twitter and like us on facebook.

“The greatest revenge is massive success.”
- Les Brown

Comments

  1. thanks bro that was helpful :) http://c-med.blogspot.com/

    ReplyDelete

Post a comment