Last updated on November 15th, 2019 at 08:53 pm
Sometimes you want to add a little custom CSS code to your Blogger.com blog to tweak your blog styles.
Or you’ve found a cool online tutorial to help you style your blog and you need to add some CSS code to your site. But you’re not sure how to add the code and you’re scared of messing up your blog theme.
Well, one thing I love about Blogger.com is how easy it is to add custom CSS to your blog without even touching the theme code!
You can easily add custom CSS code to your Blogger blog using the Add CSS field in the Template Designer Advanced section.
About the Blogger Add CSS Feature
Whoever decided to add the Add CSS field to the Blogger Template Designer was one clever duck.
Not only is this features super handy for when you want to add custom CSS to your blog without having to touch the theme code and mess things up, the way the code is added to your site is perfect.
The Add CSS code is added at the bottom of your blog’s style sheet. This is perfect because CSS is loaded line-by-line in order and if you have duplicate CSS rules, the final rule in the sheet is given priority.
This means when you add custom CSS using the Add CSS box in Blogger, this code will trump your default theme styles. You may occasionally need to thrown an !important modifier onto your styles if the default rule is more specific than your custom CSS, but usually you can get away without it.
Keep in mind that you still need to use properly coded and formatted CSS code. A few bloggers have stumbled into trouble when they leave off the final } in their CSS or the code isn’t properly closed. Always check your theme preview in the lower part of the screen before committing to saving the code.
How to Add Custom CSS to Blogger
I love a video tutorial to show you exactly what to do when you’re DIY’ing your blog. So, check out the video below. It’s quick, easy and super painless.
You can also see written steps below with screenshots.
The Video Tutorial
The Written Directions
- Login to your Blogger Dashboard.
- Go to the Theme page.
- Click on the Customize button.
- The Template Designer (aka Customizer) will open.
- Click on the Advanced options link.
- Scroll down until you find the Add CSS link and click on it.
- Paste your custom CSS code into the code box.
- Check out your changes in the preview box below.
- Click Apply to blog to commit your CSS changes.
Sum It Up
There, you have it, a simple and quick way to add your custom CSS to Blogger using the Add CSS feature in the Template Designer.
If you’re a blogger who likes to DIY your Blogger.com blog, you’ll find this feature super handy and so much better than risking messing up your theme by directly editing the theme code.