Assuming you have a Blogger Blog with all the basic settings done and also have added a wonderful looking template, either from the default templates of Blogger or downloaded a custom template and used it for your blog, in this chapter I am going to teach you how to edit the template you are using on the site.
Choosing the apt template for your blog is one of the most important and also tricky tasks to do. You might not like the default templates given in Blogger, so you will definitely search for custom templates. You may like the layout of few templates but not the colors used on them and vice versa. Why scratch your head so much? I say just choose the template with good layout and also SEO optimized. Editing the colors and few minor modifications on the template is much easier! This will again prove how simple working on Blogger can be.
I have chosen ATB Blogger Template to explain you in detail on how to edit a blogger template. You can get this Template here!
ATB BLOGGER TEMPLATE
Before editing the HTML or CSS code, I recommend you to download a backup file. So that if something goes wrong, you can upload the xml file and restore the previous template.
Understanding the Editor
Jump to Widget
Using this you can jump to any widget you have installed on your blog. Just Open Jump to Widget” Dropdown and select the widget you want to edit. This makes the work easy, as you don’t have to search the entire code to find a small widget.
Expandable Code Segments
Blogger Editor comes up with this expandable code segments which makes the editor look cleaner and less clumsy.
Preview Template
You can preview the template in the same window by using this option. Using this you can make sure whether you are doing the right kind of editing or not.
Format Template
As you can see the code first time, it can be a nightmare to edit a Template like that. A click of Format Template will indent your code in the most human readable form as seen in the image below.
Note: For heavily modified template this might cause some problems, so Preview before saving any changes.
Steps to Edit a Default or Custom Template on Blogger:
Step 1: Open Blogger
Open Blogger.com and login to your account. Choose the blog which you are working on and open the Dashboard.
Step 2: Edit HTML
Once you are on the Dashboard, you need to navigate to “Template” and click on it. You will find two options, “Customize” and “Edit HTML”. Click on “Edit HTML”
Step 3: Check where you want to edit
All the browsers come with a feature called “Inspect Element” which will tell you various features of the element you have chosen, like HTML code, CSS code etc.
If you want to know the address, colour, padding, font etc of any element, you just need to right click on it and select Inspect Element. In the small window at the bottom of the browser, you can find the ahrefs, styles, network, sources and other information. You will use any of these, and edit the template in which ever way you want to.
Step 4: Changing the Colour; Editing CSS
Editing CSS is very easy if you are able to understand it. Basic coding, which includes the type of function, padding, font, colour, background etc, can be changed once you are able to identify the location of what you are going to change and where it is going to effect the template.
As mentioned in the above step, Inspect element plays a major role in doing this. All you need to do is simply get the cursor on the element you want to edit and click on inspect element.
On the bottom right window you will be able to see the colours, backgrounds, padding, margins, font styles, hover colours etc. Change the respective features of the element you have selected and check if it goes good on your template.
If you like the way you have changed the template, goto Edit HTML window and press “Ctrl+F”. Paste the element style or anything related to the element you have selected and press ENTER till you find the exact location of it.
Once you find it, make the changes you want to and Save the template. Refresh your blog and check whether the changes are implemented or not.
Note: If you go wrong while editing HTML codes, upload the backup file which you have downloaded previously or just use Ctrl+Z to undo the changes.
Step 4: Changing the Navigation Menu
In the previous step, you have learned how to edit the CSS code in Blogger. Now assume that all the editing is done and your template is looking awesome. But you need to change the links on the Navigation Bar both on Header and Footer.
For instance, let us change the “SEO” tab on the Navigation Menu to “Blogging”. Go to the Edit HTML window and press Ctrl+F. In the box, search for SEO and press ENTER till you find the exact location of the word in the Nav Menu.
You will find a code like
<a href=”https://www.alltechbuzz.net/search/label/GOOGLE%2FSEO”>
SEO
</a>
Just replace “https://www.alltechbuzz.net/search/label/GOOGLE%2FSEO” with whatever link you want to navigate to. And also replace “SEO” with “Blogging”. That’s it!
Save the template and refresh your blog. Check if the Navigation Menu has changed and if it links to the right web address.
