How To Get To Template In Google Blogger

Are y'all an active blog reader and want to share your views, thoughts, experiences that you earned in past years? Is it your dream to take your ain blog to communicate globally? Then, you are not far abroad – a single step and with this tutorial for beginners learn how to create Blogger template from scratch with just few easy steps.

Creating blogs is really easy with blogger. Blogger is a well-known blog-publishing service that allows the users to create astonishing blogs for free. All the same, a little HTML, CSS and Javascript coding knowledge is required. It's not that tough. Once you make your mind to learn "How to create Blogger template from scratch", with some basic concepts, y'all are ready to become.

How to Create Blogger Template? Tutorial for Beginners

Having your own unique blogger template is something sumptuous. But the question arises – from where to starting time? The unproblematic answer is, at that place are two reliable methods for designing a template as follows

There are 2 ways to Create Blogger Template

Create Blogger Template with Manual Method
Create Blogger Template with TemplateToaster

If yous take adept knowledge of coding, you volition get for manual method to create blogger template. But if yous are a beginner and don't know how to code – then TemplateToaster is the all-time to choose to create and customize blogger template. Y'all require no coding with this blogger template creator. It will give y'all an easy elevate & drop interface to design your template. You simply 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

Follow Steps Create Blogger Template with transmission method

A Blogger template consists of XHTML and blogger elements. To pattern 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.

Step 1: Syntax for Basic Layout

<?xml version="ane.0" encoding="UTF-viii" ?>         <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ane.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:weblog.pageTitle/></championship>         </head>         <body>         <!-- BODY CONTENTS -->         </trunk>         </html>

Sections

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

The correct format of section will be

<b:department id=' ' course=' ' maxwidgets=' ' showaddelement=' '>         <b:widget……../>         </b:department>         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 post-obit attributes in a section. id is the only required attribute while others are optional.

id – It is the unique name of department specified in messages and numbers only.
form – Consists of common classes such equally 'navbar,' 'main,' "header,' 'footer, and 'sidebar,'. If you change templates later, these will allow yous to decide whether transfer your content or not. Y'all can likewise employ other class names if you wish.
maxwidgets – It limits the maximum number of widgets that tin be added in a section.
showaddelement – Consists of 'aye' or 'no' value. 'Yes' is the default. This establishes whether the Page Elements tab displays the 'Add a Folio Element' link or not.
growth – It can exist 'horizontal' or 'vertical'. 'vertical' is the default. This determines whether widgets are arranged side-by-side or stacked inside a section.

Pace ii: Syntax to Add Sections

<b:department id='header' form='header' maxwidgets="1" showaddelement="no">         <!-- Section contents -->         </b:department>         <b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="aye">         </b:section>         <b:section id='main' class='main' maxwidgets="1" showaddelement="no">         <!-- Department contents -->         </b:section>         <b:section id='footer' class='footer' showaddelement="no">         <!-- Department 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. Even so, 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 accept letters and numbers merely. Each widget ID is unique. A widget's ID tin merely be changed by deleting the widget or creating a new widget.
type – Information technology indicates the blazon of widget and can take one of the valid widget types listed below

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

locked – It can have a 'yeah' 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 tin can be 'all,' 'annal,' 'primary,' or 'particular'. 'All' is the default. A widget will display only on the designated pages.
mobile – It can exist 'yep', 'no,' or 'default'. It tells a widget will display on mobile or not. Simply Header, Blog, Profile, PageList, AdSense, Attribution will exist displayed on mobile if information technology is set to 'default.'

Footstep 3: Widget Syntax

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

<b:department id="sidebar" class="sidebar" maxwidgets="" showaddelement="yep">         <b:widget id='CustomSearch1' title='Search' blazon='CustomSearch' locked='false'/>         <b:widget id='FollowByEmail1' championship='Follow Past Electronic mail' type='FollowByEmail' locked='false' />         <b:widget id='PopularPosts1' locked='false' title='Popular On Relatemein' type='PopularPosts'/>         <b:widget id='Label1' type='Label' locked='fake' />         </b:section>

Follow Steps to Create Blogger Template 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 brand responsive Blogger template as all the templates designed with TemplateToaster Blogger template creator are responsive by default. Check out Blogger Templates.

TemplateToaster is the virtually user-friendly method to create Blogger template. But download it by visiting the official site. Its trial version is free. Follow the like shooting fish in a barrel steps to install. The first screen you see after installation volition look like

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

Step1: Cull a Platform

Now, you will become the screen to cull a sample template to customize blogger template from scratch. Select "Kickoff From Scratch" and click "Alter".

Step2: Choose Color scheme and typography

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

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

Step 3: Designing the Header

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

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

Select the Background option. It will assist you to set a background color, gradient or image. Here, a Background Image is selected. It gives you lot an epitome gallery only you tin can besides browse your own custom image.

Set the Pinnacle of header as shown beneath.

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

Step 4: Designing The Bill of fare

Specify the Carte Position with respect to the header.

Hither, the Menu is placed Within Header by selecting Within Header option.

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

Set a Background color for the bill of fare. You can likewise prepare a gradient or image. Even, you can brand a custom color by specifying different brightness and opacity with More Color.

Set the Typography of menu items. Here, yous accept dissimilar options available as Font family unit, size, color, alignment etc. as shown below

You lot can also prepare a unlike colour on unlike states of a card button. Equally below, with Card Button Properties option, a groundwork color is specified for Home carte push button.

Finally, set the alignment of menu items by Bill of fare Button Backdrop → Alignment → Horizontal → Left to Page.

Step 5: Designing the Sidebar

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

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

Gear up a background color for it. Balance of the work for adding widgets volition be washed afterward export.

Footstep 6: Designing the Content (Main Surface area)

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

If y'all desire to display metadata i.e information about the mail service like title, posted date, author, category etc., click Metadata → Evidence Metadata.

You can set the number of columns in the content surface area. For that, motion to Columns option and select the suitable pick. A two-cavalcade brandish is selected beneath.

Step seven: Designing the Footer

Finally, design the footer with Footer tab.

Fix the width as Full width.

From Background pick, use a groundwork colour every bit shown below

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

Now, double-click the copyright text to customize information technology. It will open up a Format tab. From here, y'all can set alignment, angle or typography of text.

Step 8: Consign the Template

In one case you lot are ready with your template, consign it. For that, select export option from Quick Toolbar. It is the last option in the rightmost identify. You tin also select Export choice from File bill of fare.

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

At present, a Google accounts dialog will open. Hither, cull an existing business relationship from the drop-down menu or add a new account proper noun and click Salve.

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

Enter the password and click Side by side.

Grant the permissions to TemplateToaster by clicking ALLOW.

You will be redirected to Blogger dashboard.

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

Select the template file by clicking Open.

Upload the template file.

Now in the Theme section, yous can run across your ain theme.

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

Navigate to New Mail pick to publish a new post.

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

Now yous will click the View Blog option to preview the blog folio.

Adding Widgets in Sidebar

Equally you accept added the posts, the only task remained is of calculation widgets to the Sidebar.

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

Click Add a Gadget in sidebar-left-i.

It will open a gadget list, y'all will add a Featured post from here.

Now, you volition configure featured mail by adding different Mail snippet. Bank check the snippets you desire every bit shown above. Click Save.

Now if you lot View Blog, information technology volition print output with the featured post as shown.

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

Which way yous employ to create blogger template ?

Hopefully, this tutorial completely answers the beginners question that – how to create your ain blogger template from scratch. You can also check out Blogger login , Blogspot vs Blogger and Blogger vs WordPress. It suggests two methods to create Blogger template – transmission method and automated method. You lot need to learn some HTML, CSS, Javascript for the old. If you want to customize it, yous have to work hard for stiff coding skills. But with blogger template creator, it's a cinch. Yous need no coding skills and yous tin create blogger template with the latest functionality in no time and you can drift from Blogger to WordPress without losing backlinks .The choice is all yours. No more than struggle to observe a solution that how to make blogger template. Outset designing today !!