Project: Converting Static HTML

A step-by-step guide to converting a basic static HTML/CSS template into a dynamic Blogger theme.

This project will solidify your understanding of the fundamentals. We will take a simple, static one-page HTML template and convert it into a fully functional Blogger theme.

Step 1: The Static Template

First, we start with our basic HTML and CSS. This is what we want our blog to look like, but with static, hard-coded content.

Step 2: The Conversion Process

  1. Wrap the entire file in the necessary Blogger XML boilerplate (`<html>`, `<head>`, `<body>`, etc.).
  2. Move all CSS into a `<b:skin><![CDATA[...]]></b:skin>` block.
  3. Replace the static title with `<title><data:blog.pageTitle/></title>`.
  4. Identify the main content area and the sidebar. Replace these with `<b:section>` tags.
  5. Inside the sections, add the required default widgets like `<b:widget id="Blog1" type="Blog"/>`.
  6. Go into the `Blog1` widget and replace the static post content with a `<b:loop>` that uses `data:post.title`, `data:post.body`, etc.

Was this lesson helpful?

Have feedback, found an issue, or have a suggestion? Let us know!

Send Feedback