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.
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
Add or remove codes,
Minify or beautify,
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.
Example:
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 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 Bloggeriiiiiiiytfgy trftufryt uf6ytfgyiu tfhihguy jbiuhtuyg ytftyygyui yryutyu gytutiuy.
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:
Find the name of ID/Class of customized CSS from Blogger HTML what we have done on Blog.
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.
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
