Ways to add styles or CSS in Blogger

Here an outstanding procedure for adding CSS styles in the blogger template will be explored.

What is CSS? CSS styles enable your blog appearance beautiful and elegant. We can modify and change design of the blog elements with CSS.

How to put such code in blog?

This answer will be given in detail in following tutorial. We will elaborate with pictures each and every step.

Generally we can add by two common ways. ‘Professional’s way and beginner’s way’

If you are familiar with coding then go with ‘Professional’s way.

If you are new to blogger, then follow ‘Beginner’s way’.

We have presented ways so that you can easily modify CSS in old and new blogger interface. If you have any problem, comment in comment box below.

REMEMBER: Make a backup of your template first and make it your habit whenever you modify your template code.

Learn here ‘How to make backup of blogger template and howto restore it if coding went wrong.

1.     Beginner’s way to add CSS

This is very simple and easy to follow procedure. What you have to do is, copy your CSS style code whatever it is and paste in the given space provided by blogger itself. Your job is done.

Follow steps given below.

1)      Click blogger.com/home

2)     Click your blog to which you would like to add CSS

3)     Click Template in left hand side of your blog panel. It is second last and before the setting

4)     Here click on Customize button in orange colour. When you click new window will appear.

5)     Now select Advance button in left hand side of panel and then go for Add CSS in sub-menu, it will be present at the last.

ADD CSS Style

6)     When you click Add CSS you will be given empty area in right hand side of the panel menu.

Add custom Css

7)     Paste your CSS style code here.

8)    Click save and enjoy.

In beginner’s way of adding CSS, we cannot edit or modify already present CSS code. We can only add our desired CSS code.

Also there is no need to add rule or code like <style type="text/css"></style>.

Professional’s way of adding CSS code above </style> in template;

It is very interesting method for professional’s but new bloggers may find it little difficult. But once you start playing with your codes, I bet you will enjoy it.

Follow steps below;

1)       Click blogger.com/home

2)      Click your blog to which you would like to add CSS

3)      Click Template in left hand side of your blog panel. It is second last and before the setting

Css

4)      Now click Edit HTML

Css

5)      Click Format template

6)      Then using search feature i.e. press (Ctrl+F). You will be given small space to search.

Css

7)      Write </head> in it and press ENTER.

8)      Add following code before </head>

<style type="text/css">

YOUR CODE
</style>

9)  Replace YOUR CODE with your own CSS code.

10)Click save

I hope you have easily added CSS to your blog. If you have any problem, comment below.

If you find this tutorial helpful then link to us or Support us. How you can link to us or Support us?

Tweet