How To Edit Blogger Template XML And CSS

Most of the bloggers are using the WordPress platform for blogging because wordpress is easy to use. WordPress provides enough plugins and their integration within a minute. Plus, WordPress has a great community to help you solve any WordPress problems. One of the major benefits of using WordPress is the easily editable code. Its structure is good for SEO.

But when we talk about Blogger as a blogging platform, a lot of pro bloggers refuse to use Blogspot as a blogging platform. There are some reasons for refusing such as lack of plugins, article ranking, low SEO impact, and code editing process.

But on this website, you will get a complete guide on blogger so that you can easily improve your user interface and SEO too. You can follow our complete guide section on Blogger. We are constantly improving this blogger guide section and trying to include new articles.

In this article, we will discuss how to edit Blogger's XML and CSS. Because every beginner on a blogger platform needs to edit their blog XML and CSS to modify blogger templates. We provide a basic idea of where you can edit XML and CSS. So let's get started

01. Go To Blogger Dashboard

As you know, every step of Blogspot starts from Blogger Dashboard so going to Dashboard is the first step. then click on the layout button.

02. Blogger Layout

Blogger Layout gives you the option to add CSS in Blogger. Apart from this, you can also add html and script to blogger through layout. We have written a separate article on this topic "How to insert HTML, CSS, and JavaScript to Blogger" You can read that article.

03. Click On Blogger Theme

In the previous step, we taught you how to add CSS via layout. This was one of the ways we use to add css to blogger. Now looking ahead. So click on the theme button, as you can in the picture.

04. Click On Customise And Choose Edit HTML Option

When you click on dropdown, you will see 5-6 options, so choose "edit html" option. There is also a backup option on this dropdown. You can check how to take blogger backup.

05. Blogger Template Edit And Element Navigation

After clicking "Edit HTML" the complete code of our blog will appear on our screen. Now we can edit the code of our blog. But if we want to directly access the code of an element, then we can use 'Element Navigation' of Blogger. as you can see in the image

The image you are seeing is a screen shot of our blog. In this you can see that a link has been given to access all the elements of the blog. You can click on any option as per your requirement.

06. Blogger XML Layout

Now it's time to learn about major elements of our blog like header, footer, main content, sidebar, etc. You can edit those major elements like this. If you wanna add extra elements you can add just using XML tag.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.google.com/2005/gml/b" xmlns:data="http://www.google.com/2005/gml/data" xmlns:expr="http://www.google.com/2005/gml/expr">
  <head>
    <title>
      <data:blog.pageTitle />
    </title>
  </head>
  <body>
    <b:section id="header" class="header" maxwidgets="1" showaddelement="no">header section code.</b:section>
    <b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">sidebar content.</b:section>
    <b:section id="main" class="main" maxwidgets="1" showaddelement="no">main page content.</b:section>
    <b:section id="footer" class="footer" showaddelement="no">footer content.</b:section>
  </body>
</html>

You can design a simple Blogger template using these four basic elements. All you have to do is learn 'xml' a bit. Such as conditional statements, XML tag attributes, etc. And a little bit of css to align elements. After knowing this, you can create the blogger template given below.

07. Add Css In Blogger

In the previous steps, we discussed a method to include 'CSS' in Blogger. But in blogger template code, you can also add css in a specific place. As you can see in the image.

For this, you have to first press both the "ctrl + f" buttons simultaneously. After clicking the buttons together you will see the search bar. Then in the search bar you have to search ']]></b:skin>' as you can see in the image. You can add 'css' just before ']]></b:skin>'.

08. Save Template

After all the changes, you will have to save your blog template. As you can save the changes of your blog by clicking on the option given in the image.

RELATED POST:

1. How To Create Post On Blogger

2. How To Start Free Blog On Blogger

Comments

Men's ankle length socks30 March 2023 at 05:47
Thank you !! how can i optimize the blogs ? how can i like to google analytics?
Anonymous14 November 2023 at 00:22
I appreciate your help; this is the article I needed. May I ask what software you use for your fantastic and quick website? I too intend to build a straightforward website for my company, however I require advice on a name and hosting. Asphostportal is said to have an excellent reputation for it. Are there any other options available, or can you recommend them?

Archive