google-site-verification=XK9IDkjU7jjUURp5A425iStvbYoDk39UO0ryXDjSqWw How add Drop Caps to already published posts in blogger ~ Blog on Computer Tips, Blogging Tips, Mobile Phones, Latest Technology and Topics of Public Interest

How add Drop Caps to already published posts in blogger

How add Drop Caps to already published posts in blogger-If you want to decorate your already published posts in a blogger blog by adding drop caps, you can easily do it by just editing your already published blog posts. In a new blogger blog post you can easily insert the Drop Caps code at the time of uploading it but if you want to insert a Drop Caps code to a blog post which is already published, you have to edit it, though the code is same. Here is the detailed procedure and the CSS code –

Drop Caps in Old Posts

 

How to activate dark theme in whatsapp व्हाट्सएप में डार्क मॉड कैसे एक्टिवेट करें

 

1.    Login to your blogger Dash board.

2.    Go to the list of your blog posts.

3.    Go to the post you want to edit the drop caps CSS code.

4.    Hover under the post title and click edit. The post will open in ‘Compose’ mode of the blogger post editor.

5.    Now click the ‘HTML’ button in the blogger post editor, to open the post in the HTML mode of the blogger post editor.

6.    Now add the following CSS code before the first letter of first paragraph of the post.

 

Digital Eye Strain or Computer Eye Syndrome Computervision Syndrome -Causes-Symptoms-Remedies

 

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

 

Then add the closing </span> tag after the first letter of the first paragraph of the blog post.

 

Note – If you are writing in Arabic, Urdu or any other language which goes right to left, Replace left by ‘right’, change 65px to increase or decrease the size of the first letter.

 

How to know complete hardware software history of an unknowncomputer


Now see the preview. If it is OK update your post.

 

Let us see an example –

 

 

If the following the first paragraph of my blogger blog post and I wand to add the drop caps code to it-

 

There are a number of, say thousands of other stations located at a distance of 2-3 K.M. in the railways whereas Qayamsar railway station is situated at a distance of more than 12km from Fatehpur-Shekhawati

 

बिना नंबर सेव किये Whatsapp कैसे करें How To Send Whatsapp Message Without saving number in phonebook


I will add the code as shown below -

 

<span style="float: left; font-size: 40px; font-weight: bold; line-height: 45px; margin: 0px 6px 0px 0px; padding: 0px; position: relative;">T</span> There are a number of, say thousands of other stations located at a distance of 2-3 K.M. in the railways whereas Qayamsar railway station is situated at a distance of more than 12km from Fatehpur-Shekhawati

 

After adding the drop caps code, If I see preview it should appear like this.

 

8 Top free Email Service providers sorted on merits

 

On viewing the preview, If every thing is OK please update the post.

 

That’s all, you are done.

 

 

 


0 टिप्पणियाँ: