How To Create Simple But Responsive Blogger Template 2022 Guide

Blogger Template Since this is the most searched query over the internet by those of the many bloggers who have signed up for a free Blogger account, you might be interested in learning how to create your own Blogger template instead of utilizing one of the numerous free themes available online. This post will show you how to make your own template.
Having your own custom blogger template is a luxurious experience. But then there’s the matter of where to begin. The short answer is that there are two reliable approaches for creating a template:

2 Methods for creating a Blogger template From scratch

  • Manual Coding or Customizing Readymade Blogger Template
  • TemplateToaster

If you are familiar with coding, you will use the manual way to develop a blogger template. However, if you are a newbie and do not know how to code, TemplateToaster is the greatest option for creating and customizing blogger templates. This blogger template maker does not require any code. It will provide you with a simple drag-and-drop interface to construct your template. You simply choose what you want, and it will handle the rest. Let us go further to discover the complete technique for designing a blogger template using both ways.

easily make blogger template

How to Create a Blogger Template From scratch

We’ll begin by constructing the template’s raw skeleton. It will make it simple for us to comprehend the template’s structure and layout.

To make this template, use your preferred coding editor. Let’s start with the simplest structure possible.

<?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 template’s first line defines it to be an XML document. It’s required so that web browsers can correctly scan and process the template code.

The next line says that we’ll be using HTML5 code in our XML document. It aids web browsers in efficiently processing the template code once again.

The XML namespace for the document is declared by the attributes appended to the tag. It also holds the document’s language property. Change the language code if you’re coding your template in a language other than English.

The metadata for the web page will be stored in the blank tag section. It contains a number of meta tags, CSS styles, and scripts.

<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 in this section includes some of the most crucial SEO tags. It also includes a crucial page description tag.

The following one is self-evident and straightforward.

The page title is added to the head section by using the <title> element. All of these tags are useful to search engines and crawlers.

The meta> tag with the property name=’viewport’ is used to enable responsive design mode, which allows the layout to appear beautifully on smaller devices as well.

The <b:skin> element contains all of the CSS code used to create the blog’s layout and look. It is currently empty and will be filled with necessary CSS rules at a later time.

Let’s now look at the <body> section and all of the crucial features contained inside it.

Let’s begin with the <header>. It differs from the head section, which includes the metadata for the document.

<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 title and description of the blog are included in the header section. A custom logo can also be used to replace them. A b:section> tag may be shown. That’s how different sorts of sections in a Blogger design are made.

We’ve constructed a b:widget> with the type=’Header’ property in this area, which has all of the functionality of a regular Blogger template header.

Creating blog posts section

<b:section class='main' id='main' showaddelement='yes'>
  <b:widget id='Blog1' locked='true' title='Blog Posts Section' type='Blog' />
</b:section>

The type=’Blog’ property has been added to the b:widget> tag, as you can see. It’s a preset characteristic that provides all of the essential functionality for this area automatically.

It creates the material for the homepage, archive page, search page, and, of course, the single post page automatically.

Because the showaddelement=’yes‘ property has been added to the b:section> tag, more widgets can be added to this section. This function is frequently used by bloggers to add custom content to the top or bottom of their posts.

Creating sidebar For Primary Content

<!-- wp:code -->
<pre class="wp-block-code"><code></code></pre>
<!-- /wp:code -->

For the sidebar, we utilized the HTML5 <aside> element. It is not required to use it, and it may simply be substituted with a conventional div> tag, but I would strongly recommend it for this area.

You’ll note that there are no widgets in the sidebar section. So, in a nutshell, we’ve constructed an empty sidebar that can be filled with widgets using the dashboard interface.

Creating footer section

<footer>
  <div>
    Copyright © 2022 <strong><data:blog.title/></strong>
  </div>
</footer>

It’s just a basic copyright notification in the footer. This one makes use of the HTML5 <footer> element. After the copyright disclaimer, the blog name is dynamically written.

A multi-column and widget-enabled footer section may also be created. The layout’s intricacy or flexibility is totally dependent on your desires and technical abilities.

Widget Attributes to Use for Building Blogger Template

  • id 
  • type 
  • BlogArchive
  • Blog
  • Feed
  • Header
  • HTML
  • SingleImage
  • LinkList
  • List
  • Logo
  • BlogProfile
  • Navbar
  • VideoBar
  • NewsBar

Additional Things To Consider

You may be tempted to add content to your Blogger template as you learn how to design one. However, keep in mind that a template is not a place for static material (such as the title of your blog). That information is all contained inside the page components that you configure in your Blogger account. All of those settings are automatically put in through scripting when you download a free Blogger template to use as your starting point, so resist the desire to enter static text or blog material straight into the template.

Keep in mind that the template is solely for styling your blog, not adding content! There are a few instances when you’ll be requested to put code directly into your design, such as for Google Adsense, but for the most part, you’ll add widgets and gadgets to your blog using the Blogger graphical interface after your base template is up and running.

Even if you’ve never written a word of code before, anybody can learn how to edit an existing template, and by doing so, you’ll ultimately discover what the CSS and XML codes represent and how they effect your blog’s appearance.

How to Create a Custom Blogger Template From Ready Made Template

To make your own Blogger template, you’ll need to know the fundamentals of CSS (Cascading Style Sheets). Because the Blogger template is based on CSS formatting, the only way to place text, images, and other parts of your template appropriately is to learn and apply proper CSS formatting.

Instead of beginning from scratch, the simplest approach to construct your own template is to choose one of the numerous free templates available on the Internet and then customize it to make it your own. You’ll want to change the following elements of the Blogger template:

  • Body background image “body”
  • Center background image “#center”
  • Header image “#header”
  • Footer image “#footer”
  • Outer wrapper “#outer-wrapper”
  • Main “#main”
  • Sidebar “#sidebar”

It will be simple to construct your own template in no time by locating each of these pieces inside an existing template and altering them to suit your needs.

Create Blogger Template with TemplateToaster

Create Blogger Template with TemplateToaster

There is no code in this procedure. To develop a Blogger template, all you need is a simple drag-and-drop interface. More importantly, it provides a comprehensive answer to readers’ commonly asked concerns about how to create a responsive Blogger template, as all templates created with TemplateToaster Blogger template builder are responsive by default. Blogger Templates is a good place to start.

The most convenient way to make a Blogger template is with TemplateToaster. Simply go to the official website and download it. It has a free trial version.

 Follow the easy steps to create blogger template with TemplateToaster

  • Download TempleToaster
  • Choose your CMS
  • Choose Color theme And Font
  • Design Header
  • Design Menu
  • Design Area
  • Design Footer

Now the designing is complete, simply export your template.

How To Import Custom Blogger Template

Follow these simple steps to set your design on Blogger.

  • Login to Blogger
  • Theme → Backup/Restore
  • Upload your Template

Now you have Created your design and uploaded on your blog

Thanks for reading!

Leave a Comment

%d bloggers like this: