How to add a custom template in blogger Google? How can I customize the Blogspot interface to look better?
Today, we will learn how to code a custom Blogger template. Our emphasis and focus will be on core template design concepts rather than going into a fancy design. This way you will be able to create different types of templates with unique designs.
How to add a custom template in blogger Google 2022
If you’re already familiar with basic HTML and CSS, you can take your design to the next level – pretty easily. I don’t need to say that you have to try out these sample design exercises on a separate demo blog. You can then export and import it on the live blog.
If you are creating such a template for the first time, avoid choosing a complicated layout and start with a simpler layout to get the hang of the basics. Get started and learn how to design a custom Blogger template – in a few simple steps – fast and clean.
Now, let’s quickly create a test blog in your Blogger dashboard to start the template design process.
Create a rough and minimal sample skeleton
We’ll start with creating a rough canvas of the template. It will help us understand the structure and layout of the template — easily.
Use your favorite code editor to create this template. Let’s start with the following minimalist structure.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang='en-US' 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' xmlns:og='http://ogp.me/ns#'>
<head>
</head>
<body>
</body>
</html>The first line of the form declares it to be an XML document. Web browsers must be able to parse and accurately process the sample code.
The next line specifies that we will use HTML5 Code in our XML document. Again, it helps the web browser process the sample code efficiently.
Attributes are added to the tag declaring the XML Namespace for the document. It also has a language property for the document. If you are coding your template in a language other than English, change the language code.
The empty tag is where the web metadata will go. It includes various meta tags, CSS styles, and scripts. We also have an empty section where the design and layout will be coded.
Let’s move on to the next step and add basic and essential metadata to the section.
<head>
<b:include data='blog' name='all-head-content' />
<title><data:blog.pageTitle/></title>
<meta content='width=device-width, initial-scale=1' name='viewport' />
<b:skin>
<![CDATA[
/* Custom CSS rules goes here... */
]]>
</b:skin>
</head>The first tag adds some of the most important SEO tags in this section. It also includes an important page description tag.
What follows is pretty clear and easy to understand. The tags add the page title to the header. All of these tags are important to search engines and crawlers.</p> <p>The <meta> tags with the name=’viewport’ attribute are added to enable responsive design so that the layout shows — nicely — on smaller devices.</p> <p>The <b:skin> tags include all the CSS code to create both the layout and design of the blog. For now, it’s empty and will be populated with the relevant CSS rules — at a later stage.</p> <p>Now let’s switch to <body> and see all the important elements inside it.</p> <p>The <body> section encapsulates all elements—visible—to website visitors in a web browser. You are free to add your preferred layout in this section.</p> <p>Let’s start with the <header> section. It is different from the header containing the document’s metadata.</p>
<header>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
</b:section>
</header>The section includes the title and description of the blog. One can also replace them with a custom logo. You may have noticed a label. That’s how we create different section types in the Blogger template.
In this section, we’ve created a type=’Header’ attribute that includes all the functionality of a typical Blogger template header.
Next is the main blog posts section where all written articles appear on the page. Here’s how to create this section.
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts Section' type='Blog' />
</b:section>You may note that we added the type=’Blog’ attribute to the label. It’s a predefined attribute that automatically adds all the functionality needed for this particular section.
It automatically generates the necessary content for the home page, archive page, search page, and of course for the single article page.
Additional widgets can be added to this section because we added the showaddelement=’yes’ attribute to the label. Bloggers often use this feature to add custom content at the top or bottom of a post.
The next important part is the sidebar that will appear to the right of the main content.
<aside>
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
</b:section>
</aside>We used HTML5 for the sidebar. While it’s not required and can be easily replaced, I highly recommend it for this section.
You may have noticed that the sidebar section does not contain any widgets. So we created an empty sidebar that can hold the desired widgets through the dashboard interface.
And, last but not least is our footer. This is the code snippet.
<footer>
<div>
Copyright © 2019 <strong><data:blog.title/></strong>
</div>
</footer>It’s a simple footer that includes a copyright statement. Note the use of the HTML5 tag for this one. The blog name was written—dynamic—After the copyright statement.
One can also create a footer with multiple columns and widgets. The complexity or flexibility of the layout completely depends on your needs and your technical skills.
So here’s what the full sample code looks like — at this stage.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang='en-US' 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' xmlns:og='http://ogp.me/ns#'>
<head>
<b:include data='blog' name='all-head-content' />
<title>
<data:blog.pageTitle/>
</title>
<meta content='width=device-width, initial-scale=1' name='viewport' />
<b:skin>
<![CDATA[
/* Custom CSS code goes here... */
]]>
</b:skin>
</head>
<body>
<div id="blog-wrapper">
<header>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
</b:section>
</header>
<div id="content-wrapper">
<div class="content-table">
<div class="content-row">
<b:section class='main column' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts Section' type='Blog' />
</b:section>
<aside class="column">
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
</b:section>
</aside>
<div>
</div>
</div>
<footer>
<div>
Copyright © 2019 <strong><data:blog.title/></strong>
</div>
</footer>
</div>
</body>
</html>First of all, I enclosed the body content in the label. It is a wrapper for the entire blog structure.
You may notice that I’ve encapsulated both the post body and the sidebar in 3 tags. Each of these tags has been assigned a number of CSS classes and ids.
You may also notice that a CSS class .column has been added to both the post and the sidebar section. All these new additions are used to properly create the core layout structure of our blog with the help of custom CSS rules.
Before we continue styling our layout through CSS rules, let’s go over the model to get a decent idea of it. It will be a classic two-column layout commonly used for blogs.
All custom CSS rules will be written between the tag as shown below. I’ve given a general overview (see below) of the order in which these CSS rules should appear.
<b:skin>
<![CDATA[
/*
1. CSS Reset
2. Core Layout Structure
3. Template Design
4. Utility Classes
5. Media Queries
*/
]]>
</b:skin>Instead of covering the entire CSS code—which is rather lengthy—I included the CSS rules for the core layout structure. Watch!
/* Template's Core Layout */
#blog-wrapper {
width: 1024px;
margin: 0 auto;
}
#content-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.content-table {
display: table;
border-collapse: separate;
}
.content-row {
display: table-row;
}
#main {
padding: 25px 25px 25px 20px;
width: auto;
height: 100%;
display: table-cell;
}
aside {
width: 32%;
height: 100%;
border-left: 1px solid #ddd;
padding: 25px;
display: table-cell;
}
footer {
width: 100%;
clear: both;
border-top: 1px solid #ddd;
padding: 20px;
}You can closely examine all the CSS rules in the sample file available as a download at the end of this tutorial. And, here is a partial screenshot of the sample.
How to add a custom template in blogger Google 2022
