How To Create Blog Template

Are you an agile web log reader and want to share your views, thoughts, experiences that you earned in past years? Is it your dream to have your own weblog to communicate globally? And so, you are not far away – a unmarried step and with this tutorial for beginners acquire how to create Blogger template from scratch with just few piece of cake steps.

Creating blogs is really easy with blogger. Blogger is a well-known web log-publishing service that allows the users to create amazing blogs for gratuitous. However, a little HTML, CSS and Javascript coding knowledge is required. It'due south not that tough. One time you make your mind to learn "How to create Blogger template from scratch", with some bones concepts, y'all are fix to go.

How to Create Blogger Template? Tutorial for Beginners

Having your own unique blogger template is something sumptuous. But the question arises – from where to commencement? The simple reply is, at that place are ii reliable methods for designing a template as follows

There are two means to Create Blogger Template

Create Blogger Template with Manual Method
Create Blogger Template with TemplateToaster

If you have good knowledge of coding, you will go for transmission method to create blogger template. But if y'all are a beginner and don't know how to code – then TemplateToaster is the best to choose to create and customize blogger template. You require no coding with this blogger template creator. It will give you lot an easy drag & drop interface to pattern your template. You lot just select what you lot want, residue of the things information technology volition handle. Permit's delve deeper to see the detailed process that how to design blogger template with both the methods

Follow Steps Create Blogger Template with 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-divers to use with the Blogger by Google. 3 types of namespaces are basically used every bit 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 information of the blog comes.
xmlns:expr – Calculates the expression for attributes.

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

Footstep i: Syntax for Basic Layout

<?xml version="ane.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://world wide web.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>         <head>         <title><data:blog.pageTitle/></title>         </head>         <body>         <!-- Trunk CONTENTS -->         </body>         </html>

Sections

A blogger template is divided into sections. The bones sections are: Header, Content, Footer, Sidebar. You volition utilise the Widget element to define the content in a department. Notation that you can't use HTML within a section. But around a section, it's permissible to use HTML.

The correct format of department will be

<b:section id=' ' course=' ' maxwidgets=' ' showaddelement=' '>         <b:widget……../>         </b:section>         While the below format, will be considered Incorrect:         <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 merely required attribute while others are optional.

id – It is the unique name of section specified in messages and numbers merely.
class – Consists of mutual classes such as 'navbar,' 'main,' "header,' 'footer, and 'sidebar,'. If you change templates after, these will let you to decide whether transfer your content or non. Y'all can too use other class names if you wish.
maxwidgets – It limits the maximum number of widgets that can exist added in a section.
showaddelement – Consists of 'yeah' or 'no' value. 'Yes' is the default. This establishes whether the Page Elements tab displays the 'Add a Page Element' link or not.
growth – Information technology can exist 'horizontal' or 'vertical'. 'vertical' is the default. This determines whether widgets are arranged side-past-side or stacked within a section.

Pace two: Syntax to Add Sections

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

Widgets

A widget is the master part which displays real data for section. Information technology works as a placeholder. Section simply defines the layout elements. Some default widgets are available in blogger. Notwithstanding, you can also create your ain 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 just exist changed by deleting the widget or creating a new widget.
blazon – It indicates the type of widget and can have one of the valid widget types listed below

BlogArchive
Weblog
Feed
Header
HTML
SingleImage
LinkList
List
Logo
BlogProfile
Navbar
VideoBar
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,' 'primary,' or 'item'. 'All' is the default. A widget will display merely on the designated pages.
mobile – It can be 'yes', 'no,' or 'default'. Information technology tells a widget volition display on mobile or not. Just Header, Weblog, Profile, PageList, AdSense, Attribution will be displayed on mobile if it is set to 'default.'

Footstep three: Widget Syntax

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

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

Follow Steps to Create Blogger Template with TemplateToaster

In this method, no coding is involved. Just a simple elevate & drop interface to create Blogger template. More interestingly, it is a consummate solution to the frequently asked questions by readers that how to make responsive Blogger template every bit all the templates designed with TemplateToaster Blogger template creator are responsive by default. Check out Blogger Templates.

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

From here, you will make a CMS pick. As TemplateToaster supports many CMSs, you will see many options. But y'all will select Blogger.

Step1: Choose a Platform

Now, you will get the screen to cull a sample template to customize blogger template from scratch. Select "Start From Scratch" and click "Modify".

Step2: Choose Color scheme and typography

From next screen, y'all tin can choose a colour scheme and font typography for your template. You can change it anytime during designing.

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

Footstep three: Designing the Header

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

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

Select the Groundwork selection. It will help you to set a background color, slope or paradigm. Here, a Background Paradigm is selected. It gives y'all an paradigm gallery just you tin besides scan your own custom image.

Gear up the Height of header as shown below.

Draw a Textarea with the help of Text Areas choice. Write the appropriate text hither.

Step 4: Designing The Menu

Specify the Carte du jour Position with respect to the header.

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

Set the Height of Bill of fare. You can also specify a custom menu pinnacle.

Gear up a Background colour for the bill of fare. You can also set a gradient or image. Even, you can make a custom colour by specifying dissimilar effulgence and opacity with More Color.

Ready the Typography of card items. Hither, you have different options bachelor as Font family, size, colour, alignment etc. every bit shown below

You can besides set a different color on different states of a carte button. Every bit below, with Menu Push Properties option, a background color is specified for Home bill of fare button.

Finally, prepare the alignment of menu items by Menu Button Backdrop → Alignment → Horizontal → Left to Folio.

Step 5: Designing the Sidebar

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

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

Set a background color for information technology. Rest of the piece of work for adding widgets will be done afterward export.

Footstep half dozen: Designing the Content (Main Expanse)

At present for designing the content part, select the Content tab.

If you want to brandish metadata i.e data about the postal service similar championship, posted date, author, category etc., click Metadata → Show Metadata.

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

Step seven: Designing the Footer

Finally, design the footer with Footer tab.

Set the width as Total width.

From Background selection, apply a groundwork color as shown below

Identify 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 pattern.

Now, double-click the copyright text to customize it. It volition open a Format tab. From here, y'all tin can set alignment, bending or typography of text.

Step viii: Export the Template

Once yous are set with your template, export it. For that, select export option from Quick Toolbar. It is the last option in the rightmost place. Y'all can also select Export pick from File menu.

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

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

At present, information technology will redirect you to Google sign-in page. Hither, give your e-mail and click Next.

Enter the countersign and click Adjacent.

Grant the permissions to TemplateToaster by clicking ALLOW.

You lot volition be redirected to Blogger dashboard.

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

Select the template file by clicking Open.

Upload the template file.

At present in the Theme section, y'all tin can run into your ain theme.

Get to Posts from the left pane of the screen every bit shown above.

Navigate to New Post choice to publish a new post.

One time you draft your post in the blogger postal service editor, yous tin Publish it. Similarly, you can add more posts.

Now yous volition click the View Blog option to preview the blog page.

Adding Widgets in Sidebar

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

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

Click Add a Gadget in sidebar-left-one.

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

Now, you will configure featured postal service by calculation unlike Mail snippet. Check the snippets you want as shown above. Click Save.

Now if y'all View Weblog, it will print output with the featured post as shown.

This is your final Blogger Template. It's really heady as you create Blogger theme of your ain. Isn't it?

Which fashion you use to create blogger template ?

Hopefully, this tutorial completely answers the beginners question that – how to create your own blogger template from scratch. You lot can too bank check out Blogger login , Blogspot vs Blogger and Blogger vs WordPress. It suggests two methods to create Blogger template – manual method and automated method. You need to learn some HTML, CSS, Javascript for the one-time. If you desire to customize information technology, you lot have to work hard for strong coding skills. Simply with blogger template creator, it's a cinch. You lot need no coding skills and you can create blogger template with the latest functionality in no time and you can migrate from Blogger to WordPress without losing backlinks .The choice is all yours. No more than struggle to discover a solution that how to brand blogger template. Start designing today !!