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 …
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.