Stylize First Letter of your Paragraph with CSS in Blogger

You might have seen this effect applied on many blogs even Amit SIR us this effect on his blog and certainly many other blogs tend to use this effect to make their blog post look like a newspaper article. Well newspaper uses this sought of technique to grab attention and even stylize their text. There is nothing much more use of this but to stylize your text and your paragraph look good.

You can see in the above image how this effect looks like and certainly I have made this effect like on this post so you should be able to see it working live above. See the first letter of this blog post above.

Now getting this effect is quiet easy, well I am posting this for blogger but this will work on wordpress and any other website, you just need to make some code changes according to your site.

How to Make your First Letter of Paragraph in Blogger Bigger and Sexier

To implement this on your blogger blog, you just need to follow the below steps and everything will be fine.

1. Open Blogger > Template > Edit HTML.
2. Press Ctrl + F and search for ]]></b:skin> tag and paste below code above it. If you have removed default CSS bundles from blogger then you need to find </style> tag and paste the below code above it. .post-body p:first-child:first-letter{float:left;padding:20px;font-size:30px;font-weight:bold;text-transform:uppercase;font-family:verdana;background:#0049F7;border-radius:100%;color:#fff;line-height:.6;margin:5px 10px -7px 0;border:10px solid #C6D7FF}
3. There are few things I have highlighted above that you can change to stylize first letter according to your blog’s design.
4. Now save your template and you should be fine with this trick, try refreshing your blog post to see this awesome effect.

Now I implemented this trick and found that it requires you to have your content enclosed in <p> tag which is short for paragraph. By default if you are using Open Live Writer for publishing your posts you should be good as it automatically adds this tag to your paragraphs. But in case of official blogger publisher, I think you need to add <p> tag in your paragraphs.

Rest I faced another issue which makes the first letter bigger for other <p> tags also, but this is done in some posts, so I am not sure why this is happening but I am finding a way to fix it. Till then you can enjoy this effect, have fun. PEACE !