create blogger template

Are you an active blog reader and want to share your views, thoughts, experiences that you earned in past years? Is it your dream to have your own blog to communicate globally? Then, you are not far away – a single step and you can create your own noble Blogger template !!

Creating blogs is really easy with blogger. Blogger is a well-known blog-publishing service that allows the users to create amazing blogs for free. However, a little HTML, CSS and Javascript coding knowledge is required. It’s not that tough. Once you make your mind to create Blogger template from scratch, with some basic concepts, you are ready to go.

How to Create a Blogger Template?

Having your own unique blogger template is something sumptuous. But the question arises – from where to start? The simple answer is, there are two reliable methods for designing a template as follows

  • Manual Method
  • Automated Method (with TemplateToaster)

If you have good knowledge of coding, you will go for manual method. But if you are a beginner and don’t know how to code – then TemplateToaster is the best to choose. You require no coding with this blogger template creator. It will give you an easy drag & drop interface to design your template. You just select what you want, rest of the things it will handle. Let’s delve deeper to see the detailed procedure that how to design blogger template with both the methods

 

Manual Method

A Blogger template consists of XHTML and blogger elements. To design a basic layout of the template, you will use namespaces. A namespace (xmlns) is pre-defined to use with the Blogger by Google. 3 types of namespaces are basically used as follows

  • xmlns:b – ‘b’ specifies that this namespace is used to access the blogger elements.
  • xmlns:data – It is used to specify that from where the data of the blog comes.
  • xmlns:expr – Calculates the expression for attributes.

You will write all the code in main.xml file of Blogger.

Syntax for Basic Layout

<?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>
<!-- BODY CONTENTS -->
</body>
</html>

Sections

A blogger template is divided into sections. The basic sections are: Header, Content, Footer, Sidebar. You will use the Widget element to define the content in a section. Note that you can’t use HTML within a section. But around a section, it’s permissible to use HTML.

The correct format of section will be

<b:section id=’ ‘ class=' ' maxwidgets=' ' showaddelement=' '>
<b:widget……../>
</b:section>
While the below format, will be considered Wrong:
<b:section id=' ' class=' ' maxwidgets=' ' showaddelement=' '>
<h1>Content heading</h>
<div>Content</div>
</b:section>

Section Attributes

You need to specify following attributes in a section. id is the only required attribute while others are optional.

  • id – It is the unique name of section specified in letters and numbers only.
  • class – Consists of common classes such as ‘navbar,’  ‘main,’ ”header,’  ‘footer, and ‘sidebar,’. If you change templates later, these will let you to decide whether transfer your content or not. You can also use other class names if you wish.
  • maxwidgets – It limits the maximum number of widgets that can be added in a section.
  • showaddelement – Consists of ‘yes’ or ‘no’ value. ‘Yes’ is the default. This establishes whether the Page Elements tab displays the ‘Add a Page Element’ link or not.
  • growth – It can be ‘horizontal’ or ‘vertical’. ‘vertical’ is the default. This determines whether widgets are arranged side-by-side or stacked within a section.

Syntax to Add Sections

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
<!-- Section contents -->
</b:section>
<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">
</b:section>
<b:section id='main' class='main' maxwidgets="1" showaddelement="no">
<!-- Section contents -->
</b:section>
<b:section id='footer' class='footer' showaddelement="no">
<!-- Section contents -->
</b:section>

Widgets

A widget is the main part which displays real data for section. It works as a placeholder. Section only defines the layout elements. Some default widgets are available in blogger. However, you can also create your own custom widget.

Widget Attributes

Widget can have many attributes. Out of which, only id and type are required and others are optional.

  • id – It can have letters and numbers only. Each widget ID is unique. A widget’s ID can only be changed by deleting the widget or creating a new widget.
  • type – It indicates the type of widget and can have one of the valid widget types listed below
  1. BlogArchive
  2. Blog
  3. Feed
  4. Header
  5. HTML
  6. SingleImage
  7. LinkList
  8. List
  9. Logo
  10. BlogProfile
  11. Navbar
  12. VideoBar
  13. NewsBar
  • locked – It can have a ‘yes’ or ‘no’ value. The default value is ‘no’. You cannot move or delete a locked widget from the Page Elements tab.
  • title – Displays the title of the widget. If not specified, a default title such as ‘List1’ is used.
  • pageType – It can be ‘all,’ ‘archive,’ ‘main,’ or ‘item’. ‘All’ is the default. A widget will display only on the designated pages.
  • mobile – It can be ‘yes’, ‘no,’ or ‘default’. It tells a widget will display on mobile or not. Only Header, Blog, Profile, PageList, AdSense, Attribution will be displayed on mobile if it is set to ‘default.’

Widget Syntax

Widgets are included within a section. The syntax to add a widget in a section will be somewhat like this

<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">
<b:widget id='CustomSearch1' title='Search' type='CustomSearch' locked='false'/>
<b:widget id='FollowByEmail1' title='Follow By Email' type='FollowByEmail' locked='false' />
<b:widget id='PopularPosts1' locked='false' title='Popular On Relatemein' type='PopularPosts'/>
<b:widget id='Label1' type='Label' locked='false' />
</b:section>

 

Automated Method: Designing with TemplateToaster

In this method, no coding is involved. Just a simple drag & drop interface to create Blogger template. More interestingly, it is a complete solution to the frequently asked questions by readers that how to make responsive Blogger template as all the templates designed with TemplateToaster are responsive by default.

TemplateToaster is the most convenient method to create Blogger template. Just download it by visiting the official site. Its trial version is free. Follow the easy steps to install. The first screen you see after installation will look like

create blogger template

From here, you will make a CMS selection. As TemplateToaster supports many CMSs, you will see many options. But you will select Blogger.

Now, you will get the screen to choose a sample template to customize or create blogger template from scratch. Select “Start From Scratch” and click “Modify”.

create blogger template

From next screen, you can choose a color scheme and font typography for your template. You can change it anytime during designing.

create blogger template

This is the Main Interface of the software. From here, you can design your template as per need. It has many self-depicting tabs like Header, Menu, Footer, Content, Slideshow, Sidebar etc. It facilitates you hundreds of latest option to design a unique template.

create blogger template

Designing the Header

Select the Header tab from the Top menu of the main screen.

Now, set the width by selecting Width option. Here, a Full Width header is placed.

create blogger template

Select the Background option. It will help you to set a background color, gradient or image. Here, a Background Image is selected. It gives you an image gallery but you can also browse your own custom image.

create blogger template

Set the Height of header as shown below.

create blogger template

Draw a Textarea with the help of Text Areas option. Write the appropriate text here.

create blogger template

Designing The Menu

Specify the Menu Position with respect to the header.

Here, the Menu is placed Inside Header by selecting Inside Header option.

create blogger template

Set the Height of Menu. You can also specify a custom menu height.

create blogger template

Set a Background color for the menu. You can also set a gradient or image. Even, you can make a custom color by specifying different brightness and opacity with More Color.

create blogger template

Set the Typography of menu items. Here, you have different options available as Font family, size, color, alignment etc. as shown below

create blogger template

You can also set a different color on different states of a menu button. As below, with Menu Button Properties option, a background color is specified for Home menu button.

create blogger template

Finally, set the alignment of menu items by Menu Button Properties → Alignment → Horizontal → Left to Page.

create blogger template

Designing the Sidebar

TemplateToaster gives you many options to apply left, right or both sidebars.

Here, a left sidebar for search is placed from sidebar tab.

create blogger template

Set a background color for it. Rest of the work for adding widgets will be done after export.

create blogger template

Designing the Content (Main Area)

Now for designing the content part, select the Content tab.

If you want to display metadata i.e information about the post like title, posted date, author, category etc., click Metadata → Show Metadata.

create blogger template

You can set the number of columns in the content area. For that, move to Columns option and select the suitable option. A two-column display is selected below.

create blogger template

Designing the Footer

Finally, design the footer with Footer tab.

Set the width as Full width.

create blogger template

From Background option, apply a background color as shown below

create blogger template

Place the social media icons from Social Icons option and link them to appropriate sites. You can select any icon from icon gallery that fits your design.

create blogger template

Now, double-click the copyright text to customize it. It will open a Format tab. From here, you can set alignment, angle or typography of text.

create blogger template

Export the Template

Once you are ready with your template, export it. For that, select export option from Quick Toolbar. It is the last option in the rightmost place. You can also select Export option from File menu.

Once you click export, you will see an Export Blogger Theme dialog box. Write the folder name and path. Click Export button.

create blogger template

Now, a Google accounts dialog will open. Here, choose an existing account from the drop-down menu or add a new account name and click Save.

create blogger template

Now, it will redirect you to Google sign-in page. Here, give your email and click Next.

create blogger template

Enter the password and click Next.

create blogger template

Grant the permissions to TemplateToaster by clicking ALLOW.

create blogger template

You will be redirected to Blogger dashboard.

create blogger template

Now from left pane of the screen, go to Theme → Backup/Restore. Upload your exported template file here by browsing.

create blogger template

Select the template file by clicking Open.

create blogger template

Upload the template file.

create blogger template

Now in the Theme section, you can see your own theme.

create blogger template

Go to Posts from the left pane of the screen as shown above.

create blogger template

Navigate to New Post option to publish a new post.

create blogger template

Once you draft your post in the blogger post editor, you can Publish it. Similarly, you can add more posts.

create blogger template

Now you will click the View Blog option to preview the blog page.

create blogger template

Adding Widgets in Sidebar

As you have added the posts, the only task remained is of adding widgets to the Sidebar.

For that from left pane select Layout. It will open a layout window.

create blogger template

Click Add a Gadget in sidebar-left-1.

create blogger template

It will open a gadget list, you will add a Featured post from here.

create blogger template

Now, you will configure featured post by adding different Post snippet. Check the snippets you want as shown above. Click Save.

create blogger template

Now if you View Blog, it will print output with the featured post as shown.

create blogger template

This is your final Blogger Template. It’s really exciting as you create Blogger template of your own. Isn’t it?

create blogger template

To Bind Up

Hopefully, this tutorial completely answers the beginners question that – how to create your own blogger template from scratch. It suggests two methods to create Blogger template – manual method and automated method. You need to learn some HTML, CSS, Javascript for the former. If you want to customize it, you have to work hard for strong coding skills. But with blogger template creator, it’s a cinch. You need no coding skills and you can create blogger template with the latest functionality in no time. The choice is all yours. No more struggle to find a solution that how to make blogger template. Start designing today !!