Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Creating Drop Caps in Blogger

Creating Drop Caps in Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

757 views

The guys at helplogger have another great tip for you if you want to customize your blog site. It’s creating drop caps first big letters for Blogger posts and comments. This style adds up a new look which is similar as those you can see in newspapers and magazines.

For Big First Letter for Blogger Posts:

  1. If you’re using old interface:

Go to Blogger Dashboard > Design > Edit HTML > Expand Widget Template

2. If you’re using new interface:

Go to Blogger Dashboard > Template > Edit HTML > Proceed > Expand Widget Template

3. Locate the code below:

]]></b:skin>

4. Add this code above no.3 code

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

You can change color (green highlight) and font size (pink highlight) with your own preference

5. Locate this code:

<data:post.body/>

6. Add red fragments below and after.

 <div class='capital'><data:post.body/></div>

7. Save

Note: If the above code is not working, add one of following codes:
 
 
 <p class="capital"><data:post.body/></p>
 or
 
 <span class="capital"><data:post.body/></div>

For Big First Letter For Blogger Comments

  1. Blogger Dashboard > Design (Layout) > Edit HTML > check Expand Widget Templates box
  2. Locate this code. If you have added this one, skip steps 2 and 3.
 ]]></b:skin>

3. Add this code above the code provided on step 2

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

Replace color (green highlight) and font size (pink highlight) with your own preference

4. Locate this code

<data:comment.body/>

5.  Add these codes before and after the code on step 4

 <p class="capital"><data:comment.body/></p>

6. Save.

Note: Always save a backup before making any changes on your template.

 

 

Liked It ? Please Share

Comments

2 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Shijil says:

    WOW !!! not working…

  2. Bension says:

    grate work .its help me a lot

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here