How to create your own blogger template from scratch full course

How to create your own blogger template from scratch full course

Do you want to start your blogging career for free?

You can do so with Google's Blogger Platform. It is very easy to create blog with blogger. Blogger is a great platform for creating stunning blogs for free. In blogger you can use readymade themes or design your own them if you have some knowledge of HTML, CSS, JavaScript.

OR

Are you using blogger but your blogger theme not fit your needs?

You are unhappy with your theme, and want something more from it but you can't do it.

If you are a professional web developer then it is not a big problem for you to develop free blogger theme for your needs, but...

It is a big problem for those who know nothing or little about web developing. As they will not be able to understand the codes of blogger theme.

This website is designed for them, so that they can also learn more about web developing and blogger theme development.

You can also download free blogger themes here

If you have set your mind to learn "How to create Blogger template from scratch". Then below we are providing you the complete tutorial for creating blogger theme from scratch.

Let's start learning blogger theme development.

In order to develop a blogger template then you must have some knowledge of HTML, CSS, JavaScript. If you don't know about them, then you can learn them from our website's tutorial section.

Also you can get brief intro of all elements of HTML in this tutorial also.

How to Create Blogger Template? Tutorial for Beginners

Create your own blogger template from scratch full course

To create your own stunning unique blogger template we need to know some blogger elements as a blogger template is a combination of these elements and XHTML. In a basic blogger template namespaces (xmlns) are used. These namespaces are predefined by Google for blogger. Three basic namespaces used are:

  • 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 the code in main.xml file.

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>
<b:skin>
<![CDATA[

<!-- CSS -->

]]>>
</b:skin>
</head>
<body>

<!-- BODY CONTENTS -->

<script>
//<![CDATA[

<!-- JavaScript -->

//]]>>
</script>
</body>
</html>

b:skin

It is required to add CSS of theme.

Note: You can add your CSS in <style> tag also as in normal HTML documents.

Sections

A blogger template is divided into various sections and these sections are needed in the proper functioning of the template. The basic sections are: Header, Content, Footer, Sidebar. These sections are used to display various widgets of blogger.

Note: You can't use the HTML within a section, but around the section HTML is allowed

Syntax of section is:

<!--Correct format-->
<b:section id=' ' class=' ' maxwidgets=' ' showaddelement=' '>
<b:widget……../>
</b:section>

<!--Correct format-->
<h1>Page Heading</h1>
<b:section id=' ' class=' ' maxwidgets=' ' showaddelement=' '>
<b:widget……../>
</b:section>
<p>Paragraph</p>

<!--Wrong format-->
<b:section id=' ' class=' ' maxwidgets=' ' showaddelement=' '>
<h1>Page Heading</h1>
<p>Paragraph</p>
</b:section>

Section Attributes

Following are the attributes of section. The id attribute is the only required attribute of section all other 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.
  • Widgets

    A widget is the main component of the blogger template. It acts as a placeholder for the real data. Section is used define the layout for the widget data.

    Blogger provides various pre build widgets. You can use them for free or create your own. Blogger widgets are like the plugins in wordpress.

    Note: Widgets are only used within the sections. You cannot use them outside the section.

    Syntax of widget:

    
    <b:widget id=' ' title=' ' type=' ' locked=' ' />
    

    Widget Attributes

    Like section widget also has some attributes and out of them id and type are required rest are ooptional. These widgets are:

    • 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. BlogProfile
      4. Feed
      5. Header
      6. HTML
      7. LinkList
      8. List
      9. Logo
      10. Navbar
      11. Newsbar
      12. SingleImage
      13. VideoBar
    • 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.'
    You may also like
    More Tutorials Free Web Tools Free Blogger Themes

    Comments