This article is for beginners and has mainly three parts:
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.
Choose ‘Backup/Restore’ option according to the figure. You will see a pop-up window.
STEP-2: Click on Download option from the pop-up window. Then another Pop-up will be landed over the previous window as below.
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.
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.
3. 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.
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‘.
If you open properly you will see the name of your Blogger Theme beside ‘Browse’ option.
4. Edit Blogger HTML & XML
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.
- 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.
You will see related HTML and CSS code for selected elements.
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.
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-9: Now save your theme and you can see the preview of changes as below images.
If you click on Preview Theme option, you will preview of your Blog here. But be patient to see.
4. Format Blogger HTML & XML
STEP-2: Click on ‘Format Theme’ to format. If you want redo formatting, then ‘Revert Changes’.
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.
- Custom Social Share Button
- Scroll to Top Button
- Create auto HTML Sitemap Page
- Professional Separate Contact Page
- Custom 404 Page
- Breadcrumb Navigation
- Like/Dislike Button
- Custom Featured Post
- Add Google Fonts
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.