Almost all of the design concepts presented here can be applied to your existing templates too provided you exactly know what you're doing and how the introduced change will affect the design and layout.Now, quickly create a test blog within your Blogger dashboard to start the template designing process.
Create a Raw and Minimal Template Skeleton
We'll start with creating a raw skeleton of the template. It'll help us in understanding the structure and layout of the template —in an easy way.Use your favorite code editor to create this template. Let's start with the following minimal 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 next line
<!DOCTYPE html> specifies that we're going to use HTML5 code within our XML document. Once again, it helps web browsers process the template code in an efficient manner.The attributes added to the
<html> tag declares the XML namespace for the document. It also has the language attribute for the document. If you're coding your template in a language other than English, change the language code.The blank
<head> tag section is where the web page's metadata will go. It includes various meta tags, CSS styles and scripts. We also have a blank <body> section where the design and layout will be coded.Let's move on to the next step and add the basic and essential metadata to the
<head> 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><b:include> tag adds some of the most important SEO tags within this section. It includes an all-important page description tag too.The next one is quite obvious and easy-to-understand. The
<title> tag adds the page title to the head section. All these tags are important for search engines and crawlers.The
<meta> tag having the attribute name='viewport' is added to activate the responsive design mode so that the layout renders—nicely—on smaller devices too.The
<b:skin> tag includes all the CSS code to create both the layout and design of the blog. At present, it is empty and will be populated with the relevant CSS rules—at a later stage.Now, let's move on to the
<body> section and see all the important elements within it.The <body> section encapsulates all the elements—visible—to the site visitors within the web browser. You're free to add your preferred layout within this section.
<header> section. It's different from the head section that contains the document's metadata.<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><header> section includes the blog's title and description. One can also replace them with a custom logo. You may notice a <b:section> tag. That's how we create different types of sections within a Blogger template.Within this section, we've created a
<b:widget> having an attribute type='Header' which includes all the functionality of a typical Blogger template header.Next one is the primary blog posts section where all the 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>type='Blog' attribute to the <b:widget> tag. It's a predefined attribute that automatically adds all the required functionality for this specific section.It automatically generates the required content for the homepage, archive page, search page, and of course for the single post page.
Additional widgets can be added to this section because we've added the
showaddelement='yes' attribute to the <b:section> tag. Bloggers often use this feature to add custom content either at the top or bottom of the post.The next important section is the sidebar that'll appear on the right side of the primary content.
<aside>
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
</b:section>
</aside><aside> tag for the sidebar. Though it is not mandatory to use it and can be easily replaced with a regular <div> tag, I'd highly recommend using it for this section.You may notice that the sidebar section doesn't contain any widget. So, basically, we've created an empty sidebar which can be populated with the desired widgets through the dashboard interface.
And, last but not least is our footer section. Here's the code snippet.
<footer>
<div>
Copyright © 2019 <strong><data:blog.title/></strong>
</div>
</footer><footer> tag for this one. The blog name is written—dynamically—after the copyright statement.One can create a multi-column and widget-enabled footer section too. The complexity or flexibility of the layout entirely depends on your needs and on your technical skills.
So, here's how the entire template 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><div> tag. It's a wrapper for the entire blog structure.You may note that I've encapsulated both the posts content section and the sidebar inside 3
<div> tags. Each of these tags have been assigned some CSS classes and ids.You may also note that a CSS class
.column has been added to both the posts and sidebar section. All these new additions are used to properly create our blog's core layout structure with the help of custom CSS rules.Before we move ahead to style our layout through CSS rules, let's take a look at the mockup to get a fair idea about it. It'll be a classic two-column layout generally used for the blogs.
All the custom CSS rules will be written between the <b:skin> tags as shown below. I've given a general overview (see below) about the order in which these CSS rules will appear.<b:skin>
<![CDATA[
/*
1. CSS Reset
2. Core Layout Structure
3. Template Design
4. Utility Classes
5. Media Queries
*/
]]>
</b:skin>/* 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're free to extend and redistribute this template. Blogger template designing is not that hard and one can get started with it with the basic knowledge of HTML and CSS. Hope you found this tutorial—useful.