Create Blogger Template From Scratch: Step By Step Tutorial
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 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 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 learn “How to create Blogger template from scratch”, with some basic concepts, you are ready 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 start? The simple answer is, there are two reliable methods for designing a template as followsThere are two ways 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 manual method to create blogger template. But if you 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 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 methodsFollow 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-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 arsip of Blogger.
Step 1: 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'> <headdangt; <title><data:blog.pageTitle/></titledangt; </headdangt; <bodydangt; <!-- BODY CONTENTS --> </bodydangt; </html>
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=’ ‘ group=' ' maxwidgets=' ' showaddelement=' '> <b:widget……../> </b:sectiondangt; While the below format, will be considered Wrong: <b:section id=' ' class=' ' maxwidgets=' ' showaddelement=' '> <h1dangt;Content heading</h> <div>Contentdanlt;/div> </b:sectiondangt;
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 group 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.
Step 2: Syntax to Add Sections
<b:section id='header' class='header' maxwidgets="1" showaddelement="no"> <!-- Section contents --> </b:section> <b:section id="sidebar" group="sidebar" maxwidgets="" showaddelement="yes"> </b:sectiondangt; <b:section id='main' class='main' maxwidgets="1" showaddelement="no"> <!-- Section contents --> </b:section> <b:section id='footer' group='footer' showaddelement="no"> <!-- Section contents --> </b:section>
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 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
- 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.’
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>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 make responsive Blogger template as 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 free. Follow the easy steps to install. The first screen you see after installation will look like
From here, you will make a CMS selection. As TemplateToaster supports many CMSs, you will see many options. But you will select Blogger.Step1: Choose a Platform
Now, you will get the screen to choose 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, you can choose a color scheme and font typography for your template. You can change it anytime during designing.
This is the Main Interface of the perangkat lunak. 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.
Step tiga: Designing the Header
Select the Header tab from the Top hidangan of the main screen.
Now, set the width by selecting Width option. Here, a Full Width header is placed.
0 Komentar
Post a Comment