Edit the HTML of your blog's layout

If you want more control over the formatting of your blog, you can easily access and change its HTML code:

  1. Go to your Blogger dashboard.
  2. Next to the gray Post List icon, click the drop-down menu and select Template.
  3. Click the Edit HTML button under the "Live on blog" view.
Tip: Change your blog's design without bothering with the code! Check out Blogger's Template Designer to create and apply your own design or a cool one you find from another user.

Here are a few tips for editing your code:

Save a copy first. Before you start editing the code, we highly recommend that you download a copy of your template. If your changes don't come out the way you wanted, you'll be able to revert to the original version by simply uploading that downloaded copy.

Understand Blogger's code. Along with regular HTML and CSS, Blogger also uses many custom tags. It's a good idea to familiarize yourself with Blogger's page element tags and font and color tags before you start.

Find the code for page elements. By default, each page element is shown in the code as a one-line placeholder to simplify the code, whose options can be set in the graphical interface on the Layout tab. Click the drop-down arrows on the left next to the one-liner to display the complete code for a page element, and learn about those elements' widget template tags.

Use our tool for CSS changes. For extensive style changes, you can use the Template Designer to add custom cascading style sheets (CSS) to your blog. If you're not too familiar with CSS, check out this CSS introduction.

Was this article helpful?