Adding Custom CSS & JS - Blogger Theme Dev Course

Custom CSS and JavaScript are what give your theme a unique design and interactive functionality. It's crucial to add them correctly to avoid XML errors and performance issues.

Adding CSS

All of your theme's CSS should go inside the `<b:skin>` tag, wrapped in a `<![CDATA[...]]>` block to prevent XML parsing errors.

This centralizes your styling and allows you to use Blogger's CSS variables, which can be hooked up to the Theme Designer for easy customization by the user.

Adding JavaScript

You have two main options for adding JavaScript:

Inline: Place your script inside a `<script>` tag, just before the closing `</body>` tag. Like CSS, the script content must be wrapped in a `//<![CDATA[ ... //]]>` block.
External: For larger scripts or libraries (like jQuery or a slider library), it is much better to host the `.js` file externally (e.g., on GitHub or a CDN) and link to it with `<script src="..."></script>`. This improves performance and keeps your main XML file cleaner.

Code Examples

xmlCorrect Way to Add Inline JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
  <script type='text/javascript'>
  //<![CDATA[
    function showAlert() {
      // The '<' character would normally break XML
      if (1 < 2) {
        alert('Hello World!');
      }
    }
    showAlert();
  //]]>
  </script>
</body>
</html>

Adding CSS

Adding JavaScript

Code Examples

Was this lesson helpful?