Saturday, March 04, 2017

Blogger CSS-add Drop caps new blogpost simplest way no HTML editing

ad300
Advertisement
Blogger CSS-add Drop caps new blogpost simplest way no HTML editing-While we add drop caps to our blog posts, it effects the first letter of the first word only of a blog post. The size and color of the first letter will appear as defined in the CSS code. For it we need to add a small CSS code while writing the post. We can write the code and save it on our hard drive and use it whenever we need it while writing a new blog post. We can apply different sizes and different colors for each post. The procedure for adding Drop caps for new post is defined below – 

Drop Caps
Drop Caps


First open the blogger post editor  and write a new post in the ‘Compose’ mode as usual and when it is complete the go to HTML mode by clicking the ‘HTML’ button of the blogger post editor. Here carefully check and if there is any HTML scrap there delete everything if it is before the first character of the first paragraph of your blog post.


Now carefully  add this code before the first letter of the post 

<span style="float: left; font-size: 65px; font-weight: bold; line-height: 45px; margin: 0px 6px 0px 0px; padding: 0px; position: relative;">

add the closing tag </span> after it.


Please see the example below-


Suppose the following is the text of the first paragraph of my post –

The health benefits of this spice are well known to the society over the centuries. Known for its anti-inflammatory properties since centuries, recent researches  revealed that turmeric is a natural wonder, extremely beneficial in the treatment of different health conditions even in cancer and Alzheimer’s disease.

Now I Want to add drop caps to letter ‘T’it must be done like this-

<span style="float: left; font-size: 65px; font-weight: bold; line-height: 45px; margin: 0px 6px 0px 0px; padding: 0px; position: relative;">T</span>he health benefits of this spice are well known to the society over the centuries. Known for its anti-inflammatory properties since centuries, recent researches&nbsp; revealed that turmeric is a natural wonder, extremely beneficial in the treatment of different health conditions even in cancer and Alzheimer’s disease.

After adding the code please check in preview and it must appear like this in the preview.
Drop Caps Demo
Drop Caps Demo


If you want to change the color of the first letter add ‘color: #000000;’ to the above code. The color code ‘color: #000000;’ means dark black. If you want to display the first letter in a different color, please change this color code. Clickhere to go to the HTML color picker page for color code help

To change the size if the first letter changefont-size: 65px (Figure‘65px’ only) to any size of your choice like 40px, 50px, 60px etc..



Share This
Previous Post
Next Post

Pellentesque vitae lectus in mauris sollicitudin ornare sit amet eget ligula. Donec pharetra, arcu eu consectetur semper, est nulla sodales risus, vel efficitur orci justo quis tellus. Phasellus sit amet est pharetra

0 comments: