Blogger: Adding Css custom codes to blogger blog template

Add css codes

After setting up your blogger site. The next step you might want to embark on is editing or adding CSS to your website template. This is only if you wish to. 

In the scenario where you are new to blogger. You might just choose one of the free themes during sign up, but because they appear plain and dull, you may consider adding some life to it and make it more presentable to your taste.

Cascading style sheets (CSS) if edited well can change the outlook of your website. It includes styling the entire site's appearance. It can affect particular elements on your website such as; post, titles, menu bar, sidebar, footer etc .

Css gives everyone the opportunity to make their web page unique and different from others of their niche.

There are several ways of inserting your css code in blogger. I would go through all of them below, then you can choose any one that is easier to implement.

1) Adding css in blogger template designer

Step 1: First and foremost, login to your blogger account or if you don't have one, you can easily signup (make sure you have a gmail account first).

Step 2: After you have logged in, follow this next step closely.

From your blogger dashboard, go to the theme tab on the menu. After the template page opens, click on "customise button".

Css customise

Step 3: Click on Advanced button. After which, you can make selection based on the fonts and colors you prefer. If you are looking to add the css code, click on "Add css" from the menu.

Theme for blogger blog

Step 4: Then you can add the Css code in the space provided under "Add custom css", to override existing css in your blog.
              Css option

2) By Editing blogger template html.

Another way of adding  Css is by Editing it right from the blogger template html. Before anyone attempts this, they must have basic knowledge about html codes.  To be on the safe side, it is always advisable to backup the original html file before editing.

Theme selection
Click on 'ctrl F'  on your computer to search  for '</b:skin>',  then add your Css code above or before it to change any appearance on your blog. 

For example

/* my blogger truth CSS Codes sample for body tag */
body {
font-family:"Times New Roman",Serif;
border:solid 2px red;

3) Adding Css through blogger gadget

Step 1: visit your blog Dashboard .

Step 2: Go to the Layout tab and then click on the "Add a Gadget"  link provided on the widget areas of your blog.

Step 3: Select HTML/JavaScript and then add your CSS codes 

Gadget options


Method 1 & 3 would not cause much damage to the blog appearance if done properly. Although, it is still important to learn basic html editing so you would be able to build your blogger to your taste. 

After adding your CSS custom codes click on preview at the top left of your blogger page to see if the styling worked well. 

CSS code methods

Post a comment


  1. Nice post
    Will be helpful in editing my blog @

    1. Thanks Dan. It's good to know you found it useful. Hope to see more of you.