1.
Log into your Blogger account to create a new post or to edit
post that is already published.
2. Choose the HTML mode in the Post Editor. Your post must have at least one paragraph to enable a drop cap to be added as illustrated in the image below.
2. Choose the HTML mode in the Post Editor. Your post must have at least one paragraph to enable a drop cap 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:
1 |
<span style="float: left; font-size: 70px; font-weight: bold; line-height: 50px; margin: 0px 5px 0px 0px; padding: 0px; position: relative;">D</span> |
Then, change the capital letter A, highlighted in red, with the capital letter that you want to be converted into a drop cap. You can customize the CSS font properties, etc., and their values inside the quotation marks for style="" to suit your blog and styling preferences as explained below.
4. Preview:
You can do this by clicking the button and/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. Play around with
the font-size, line-height, and margin to achieve that.
5. Save your post when you're finally satisfied. Easy, yes?Some explanation
& customization:
Modify CSS to Best for your blog posts:
- Float: left: - the drop cap is floated to the left to allow other text to wrap around it.
- Font-family: Georgia, Times, serif; - specifies the font for the drop cap. You can change to the type of font that you like by getting ideas about the various fonts from W3Schools. If this font-family property is omitted in the code, then the drop cap will follow the default font you've set for your blog's posts.
- Font-size: 70px; - sets the font size to 70px. Change the px value as you wish: the larger the number, the larger the size of the font.
- Font-weight: bold; - self-explanatory. Omit this if you'd rather the font be normal.
- Font-style: italic; - self-explanatory. Omit this if you wish.
- Color: red; - defines the font color as red. The color can be specified by color name, rgb value, or hex value. More color choices here.
- Line-height: 50px; - sets the line height to 50px, change the value as you wish.
- Margin: 0px 5px 0px 0px; - sets the four margins around the drop cap, where the first value is for the top margin and followed by right, bottom and left margin respectively.
- Padding: 5px; - sets the padding around the letter as 5px. Include this property if the drop cap has a background color, with the value changed as you wish.
- Background-color: light grey; - self-explanatory. Exclude this property if you don't want it.
- Text-shadow: 2px 2px 2px #9966ff; - sets a shadow for the drop cap where the first value is for the shadow's horizontal length, the second is for its vertical height and the third defines the blur distance, plus an optional color. If no color value is indicated, a shadow is created using the color of the font.
- Position: relative; - specifies the type of positioning.
