How to add DROP CAPS in Blogger?

D (caps) rop Caps is the first letter of a paragraph that is enlarged, made larger than the rest of the text therein so that it drops to several lines below, as visibly illustrated in this paragraph and the image below.

The drop capital letter, sometimes known as 'dropped initial' . This is one of the many ways to enliven your posts visually and make them more stylish and eye-catching or simply just to move away occasionally from the mundane display and spice it up!

Steps to add DROP CAPS in Blogger:-

  1. Log in your Blogger Account to Create New Post or to Edit Post that is already published.
  2. Choose the HTML mode in the Post Editor. Your post have at least to enable a Drop Caps to be added as illustrated in the image below.
  3. Replace the First Capital Letter at the beginning of your paragraph with the following span tag code:

     
    <span style="float: left; font-size: 70px; font-weight: bold; line-height: 50px; margin: 0px 5px 0px 0px; padding: 0px; position: relative;">V</span> (code-box)


  4.  Now, change the Capital Letter V, highlighted in red, with the capital letter that you want convert to Drop Caps. You can customize the CSS font properties, etc. and their values inside the quotation marks for style = " " to suit your blog and style preferences.
  5. You can click on Preview button or Toggle between the Compose mode to view the added Drop Cap and HTML mode to modify the CSS code to ensure that it's properly aligned with the adjacent text.
  6. Save your post.

Examples of DROP CAPS and their CSS codes


<span style="float: left; font-family: 'Apple Chancery',cursive; font-size: 70px; line-height: 50px; margin: 5px 5px 0px 0px; position: relative; text-shadow: 2px 2px 2px rgb(153, 102, 255);">M</span> (code-box)
<span style="color: red; float: left; font-family: 'Comic Sans MS',cursive,sans-serif; font-size: 70px; font-style: italic; line-height: 50px; margin: 2px 8px 0px 0px; position: relative;">S</span> (code-box)
<span style="background-color: lightgrey; color: darkblue; float: left; font-family: Georgia,Times,serif; font-size: 65px; line-height: 45px; margin: 0px 5px 0px 0px; padding: 5px; position: relative;">T</span> (code-box)



0 Comments