5 Secrets of Blogger (Service) You Don't Know

Recent Posts

How To Edit Blogger Template XML

To change the design of Bloggers (blogspot) look, needs to edit its theme or template for including additional or customized HTML, CSS, JavaScript codes.  Before editing HTML or XML you should be conscious about the backup of your current installed XML Theme or Template. Otherwise you may lose previous design or codes to reuse, since there has limitation steps to go previous (undo) format by Ctrl + Z or forward/redo by Ctrl + Y
Edit Blogger Template
This article is for beginners and has mainly three parts:

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

1. 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 over 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.

2. 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 enable to upload your selected theme to your Blog or Website. Click on ‘Upload’ option and wait a few time to upload successfully.

3. 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 Dreamwaver, 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 name.

But editing on Blogger Editor provides your more advantages. 

Example:
  • You can see preview your changes on your Blogger but it wouldn’t available on Desktop Editor because of 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 be learned 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 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

4. Format Blogger HTML & XML

Formatting codes provides good look with proper indention and helps 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.