Published: Tuesday, July 04, 2017, Updated: Saturday, March 02, 2024

How To Edit Blogger Template XML Tutorial Step-By-Step Guide

How To Edit Blogger Template XML

To change the design of Bloggers (blogspot) look, you need to edit its theme or template for including additional or customized HTML, CSS, JavaScript codes.  Before editing HTML or XML you should be conscious of the backup of your current installed XML Theme or Template. Otherwise, you may lose previous design or codes to reuse, since there have limitation steps to go previous (undo) format by Ctrl + Z or forward/redo by Ctrl + Y

Complete Guide to edit Blogger XML Template

First, we will see how to backup Blogger/Blogspot theme.

Backup Blogger XML

Your current installed theme is the most important and valuable property of your blog or website. The negligence to backup may bring out big harms such as losing valuable data or codes. If you backup Blogger XML to your Computer directory, you can upload anytime when you need to restore your previous theme.

STEP-1: Go to Blogger Dashboard, Choose Theme option and you will see like below.

Backup Blogger XML Theme to Restore

Choose ‘Backup/Restore’ option according to the figure. You will see a pop-up window.

Download Blogger Theme to Restore

STEP-2: Click on Download option from the pop-up window. Then another Pop-up will be landed you to the previous window as below.

Save Theme as XML document to Computer Directory

Check on Save File button and OK.
STEP-3: Next you will be redirected to your Computer directory. Choose your directory to save your Backup Blogger Theme. You can rename this theme.

Download XML Blogger Theme to Computer

 After renaming save the downloaded theme with XML extension.

Install/Upload Blogger XML Theme

To change or restore any Blogger XML Theme, we need to upload the selected theme to install. We can select our previous backup theme or free or premium Blogger Theme as we want.

How to Install Blogger Template:

For installing any Blogger Theme you must follow the below steps.
STEP-1: Go to Blogger Dashboard, Choose Theme option. Choose ‘Backup/Restore’ option according to the figure. You will see a pop-up window. 
STEP-2: Click on ‘Browse’ option to upload Blogger XML File as following the figure.

Browse Blogger Theme to Install

STEP-3: Next you will be redirected to your Computer directory. Find the directory where you have saved or download Blogger Theme to install. After getting select the Blogger XML file and ‘Open'.

Upload XML Theme From Your Computer Directory

If you open properly you will see the name of your Blogger Theme beside ‘Browse’ option.

uploaded theme and upload backup Blogger Theme to install

STEP-4: After opening you are able to upload your selected theme to your Blog or Website. Click on ‘Upload’ option and wait a few time to upload successfully.

Edit Blogger HTML & XML

Editing Blogger or Blogspot Theme or Template is advanced level for a Blogger (Who blogs). Before starting you must have the basic concept of HTML, CSS, JavaScript, Inspect Element from Browser.
If you want to
  1. Add or remove codes,
  2. Minify or beautify,
  3. Design etc.
you have to edit Blogger HTML & XML.
You can edit on Blogger HTML Editor or on your Desktop HTML editor like Dreamweaver, Sublime Text, Notepad++, Gedit etc. Before editing on Desktop HTML editor you have to copy the whole code of your Blogger theme and paste and save as XML file with the name.

But editing on Blogger Editor provides your more advantages. 

  • You can see preview your changes on your Blogger but it wouldn’t available on Desktop Editor because of the XML file.
  • You can jump to widget easily what is impossible at Desktop Editor.
  • After any changes, you can save your theme instantly, what is bored for Desktop Editor.

So in this article, you will learn how to edit Blogger HTML template at Blogger Editor.

Customize or change the design Blog or Website from Browser

STEP-1: Browse your Blog or Website and choose the page you want to customize. I have selected Homepage.

STEP-2: Select the elements (Font, Div, Table, Form, Button etc.) of your Blog and choose Firebug/Inspect Element/Other tools to inspect elements from Right Button Click.

inspect element from browser and customize design blogger live

You will see related HTML and CSS code for selected elements.

HTML and CSS To Customize by Inspect Element Firebug

I have selected font and want to change font size. To change the font size, click on the value of font-size and change as you want.

Edit CSS Live Blogger

You will see the changes live. Similarly, you can change color, background, width etc. You can also add more CSS after it.

STEP-3: After customizing we have to change on Blogger HTML Codes. Otherwise, it won’t work if we reload this page. So we have to copy the customized or changed CSS to our theme. To do that we have to mainly two works:
  1. Find the name of ID/Class of customized CSS from Blogger HTML what we have done on Blog.
  2. Copy the changed CSS and paste to the selected ID/Class on Blogger HTML.

STEP-4: Copy the name of class or id of CSS. To copy click on the class or id as below then copy.

Copy class or ID of customize CSS

STEP-5: Open new tab from your browser and go to Blogger → Theme → Edit HTML .

Edit Blogger Template Edit HTML

And click on codes once to enable edit.

search box in blogger editor

STEP-6: Press Ctrl + F from the keyboard and Ctrl + V. Next hit ENTER. You will find the required CSS to change.

Search for copied class and ID from Blogger HTML

STEP-7: Now go to the previous tab but don’t close the current tab and copy the whole CSS under the name or ID as below.

Copy the customize CSS to paste Blogger HTML

STEP-8: Again go to Blogger tab and select the CSS with your mouse cursor and paste by Ctrl + V on.

Paste the copied CSS to Selected CSS into Blogger

STEP-9: Now save your theme and you can see the preview of changes as below images.

Save Blogger THeme and Preview

If you click on Preview Theme option, you will preview of your Blog here. But be patient to see.

Preview of Live Blogger Theme after Customize

Format Blogger HTML & XML

Formatting codes provide good look with the proper indention and help to understand, navigate codes easily. You can format codes within Blogger XML Theme on Blogger HTML Editor now. To do that just follow the below steps.

Before formate theme

STEP-1: Go to Blogger Dashboard → Theme → Edit HTML
STEP-2: Click on ‘Format Theme’ to format. If you want redo formatting, then ‘Revert Changes’.

After format theme blogger

I hope you have learned how to edit Blogger template.
Now I recommend you to see the basic and advanced changes, custom design for your Blogger template.
I can confidently say now you will make any change on your Blog or website.

Have got this article helpful or not working? Put your comment below.
Elliyas Ahmed
Elliyas Ahmed
Elliyas Ahmed, founder of COMPROMATH, is a Computer Science and Engineering graduate who excels in Blogging, Website Development, and SEO. He offers freelancing services to help clients succeed online. Learn more about Elliyas Ahmed.