Thursday, February 23, 2017

Blogger CSS-How to add Drop Caps to your old published blogger posts

ad300
Advertisement
Blogger CSS-How to edit your old published blogger posts to add Drop Caps-If you want to implement drop caps in your already published blog posts, you can easily do so 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 insert a Drop Caps code to a blog post which is already posted, you have to edit it, though the code is same. Here is the detailed procedure and the CSS code –
Drop Caps in Old Posts
Drop Caps in Old Posts


  1. Login to your blogger Dash board.
  2. Go to the list of your blog posts.
  3. Go to the post you want to insert 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.

<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 other language which goes right to left, Replace left by ‘right’, change 65px to increase or decrease the size of the first letter.

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

Let us see an example –


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

There are thousands of other stations located at a distance of 2-3 K.M. in the railways whereas Kayamsar railway station is 12 K.M from Fatehpur-Shekhawati

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>here are thousands of other stations located at a distance of 2-3 K.M. in the railways whereas Kayamsar railway station is 12 K.M from Fatehpur-Shekhawati
and 10 K.M.

when I see preview after adding the drop caps code, it should appear in the preview like this.

Clogger CSS
Clogger CSS

If every thing is OK please update the post and you are done.






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: