Log in

Sign in with your email address and password:

No account? Sign up here.
Forgot your password? Reset it here.
Didn't receive account confirmation email? Request a new one.

How To Add CSS Code To Blogger Using Template Designer

Do you want your blog to not look cookie-cutter like many other blogs out there? Do you want to be able to make alterations, changes and adjustments to your site without having to turn to a professional web designer? The good news is you can make changes you want to your blog by yourself; all you need is CSS and a little coding know-how to get started with Blogger Template Designer …

add CSS code to Blogger using Template Designer

CSS in a Nutshell

CSS (Cascading Style Sheet) is a web programming language that lets you make style changes to any element of your website – whether these are text boxes, the copyright note, photos, graphs and charts. CSS can also make changes to the background color and the font sizes of the different text bodies and heads. With CSS you can also adjust margins and how containers are positioned within the page, and even within one another if you want (nested styling).

Adding CSS Code to Blogger Using Template Designer

If you are using a website hosted by Blogger, here is how you can add CSS:

1.) Log in to your Blogger account and choose the blog that you want to customize with CSS.

2.) Go the blog dashboard, choose “Template” then click on “Customize”.

3.) Click on the “Advanced” button.

4.) Now can now add your CSS codes on the right field in the “Add CSS” tab.

5.) Click on “Apply to blog” to save your work.

Note that if you want to edit the CSS styles already added in your template, you will have to make the changes through the template’s HTML editor. Also remember that if you change the template, all the data you have added to the fields, as well as any changes you have made via the Template HTML editor, will be removed.

CSS Tips and Tricks

Now that you have enabled CSS on your Blogger account, what are some things you should know?

Use Short Names for ID’s and Classes 

Use short names when it comes to ID’s and classes for elements and make them descriptive. One or two words should suffice, don’t make them too long. If the names are too short the CSS becomes cryptic, if they are too long the CSS becomes hard to read.

Keep the descriptions lowercase, if later you have to re-enter that name for a command line it will help it will help that you no longer have to reach the Caps Lock or shift button.

Vertical Percentages refer Container Width, Not Height 

To be displayed in the web page, a text body or visual element has to be in a container. When you add values for the size of containers in CSS, remember that

percentage widths are calculated based on the width of the container. Percentages on properties like top and bottom padding and margins are also calculated based on the width of the container and not the height.

Always Correct for Internet Explorer

When writing code, always write the code for standards compliant browsers first, and then correct it for IE at the end. Don’t do it the other way around. Also, you should not correct for IE in the same style sheet used for other browsers. IE has to have its own sheet. The command line should look like:

Don’t think wrong the wrong way, IE is not inferior, just built differently from other browsers (well, depending on how you see things 🙂 ). The code above is a conditional comment and is IE-specific. While other browsers will ignore the commands, to IE it’s like an “if” statement.


Submit a Comment