3 Ways to Add CSS Codes to Blogger Template

Cascading Style Sheets (CSS) are very important codes in any websites which were used to beautifying webpages. By applying proper CSS you could give your site an unique look. In this post you will learn how to add CSS to your blogger blog in 3 different ways.

1. Add CSS Using Template Editor:

Adding CSS with template editor is the most convenient and safer way to add the CSS codes. Follow the steps below to add codes with template editor:

a. Login to you blogger dashboard www.blogger.com

b. Select template in the left navigation menu.

c. Click on button ‘Customize‘ below Live on blog.

d. Now you can see Blog Template Designer. Here select Advanced in the left vertical menu bar.

e. Beside Advanced you can see many options, Select Add CSS which is at the bottom of the options.

f. You can see a white box where you could place your CSS codes to override existing styles.

g. Click on Apply to Blog. Done!!

2. Add CSS Using “Add a Gadget”:

This is also an easy method to add CSS to Blogger template. Follow the steps below to add CSS using Add a Gadget:

a. Login to blogger dashboard.

b. Click on Layout in the left navigation menu of blogger dashboard.

c. Click on add a Gadget.

d. Select HTML/JavaScript from the list.

d. Now in the new widow inside content (leave the title blank) you can add you piece of codes in between following codes:

<style type=’text/css’>
…..Your code here…..
</style>

e. Click on Save and you are done.

3. Add CSS Using HTML Template Editor:

I never recommend this step if you are not very aware of coding. Okay, if you can do follow the steps below:

a. Follow the two steps of Template Editor. (Login>>template).

b. Click on Edit HTML below Live on Blog, but wait before doing so you should always backup your template by clicking Backup/Restore button beside the setting gear button. By doing so you could always restore your original working template if something went wrong with blog template.

c. Okay, so you are finally in the HTML Editor of blogger. Click anywhere in the template code and click ctrl+f button to search some codes.

d. Search ]]></b:skin> in the template codes using search box.

e. Now before ]]></b:skin> you can add your codes and click on preview template, if everything is fine click on Save Template and you are done.