Monday, 14 October 2013

So you started your own blog on Google's blogger.com, you've posted your first posts but then do not feel comfortable anymore with the standard (dull?) look of your blog? You have a better more individual design in mind?
Then you've been come to the right place!

Designing a blogger template from scratch

First of all: even if you do not like your current template/design anymore: MAKE A BACKUP!
Here we go:
  1. Log into blogger.com
  2. Click "Template"
  3. Click on "Backup/Restore" on the top right
  4. In the popup click "Download full template"
  5. Save the "template....xml" file on your computer.
XML? Hmmm... Yes: A Google blogger template is just one XML-file containing HTML/CSS and Google specific markup/tags for dynamic content/widgets.
Woo ho ho... Stop! What a techie talk!
Maybe it will be to difficult you think?
Well that is what I am thinking too when writing just this line...

But hey, we will make it, together!
Google has some help on creating a custom template:
This is the new way (in opposite to "classic" templates howto).

First of all we have to understand how a "Layout" works and what it is.
  1. Log into blogger.com
  2. Click "Layout"
Dynamic Layout configuration
You can see the Layout of your template:
  • the header area/section, the sidebar section on the right and the main section on the left.
  • in the sections there are rectangles labelled "About", "Blogposts", "Labels", ... These are "Gadgets" (dynamic content) that have been added to the sections.
  • These gadgets can be arranged via Drag and Drop and can be customized via "Edit..." in option dialogs.

Layout Sections

In our static design HTML-template Google can not detect these areas/sections without some Blogger-specific markers. Only if Layout-sections are defined you can view your template in the Layout-Designer and add the gadgets to your liking.
Google's Blogger Help describes sections like this:
The <body> section of a Layouts template is made up primarily of sections and widgets. Sections mark out areas of your page, such as the sidebar, footer, etc. A widget is an individual page element such as a picture, a blogroll, or anything else you can add from the Page Elements tab. You can include any HTML you like around the sections in your template.
Each section in your template has an opening and a closing tag, looking something like this:
<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
</b:section>

A <b:section> tag can have the following attributes:
  • id - (Required) A unique name, with letters and numbers only.
  • class - (Optional) Common class names are 'navbar,' 'header,' 'main,' 'sidebar,' and 'footer.' If you switch templates later, these names help Blogger determine how best to transfer over your content. However, you can use different names, if you like.
  • maxwidgets - (Optional) The maximum number of widgets to allow in this section. If you don't specify a limit, there won't be one.
  • showaddelement - (Optional) Can be 'yes' or 'no,' with 'yes' as the default. This determines whether the Page Elements tab will show the 'Add a Page Element' link in this section.
  • growth - (Optional) Can be 'horizontal' or 'vertical,' with 'vertical' as the default. This determines whether widgets within this section are arranged side-by-side or stacked.
A section can contain widgets; it can't contain other sections or other code. If you need to insert extra code between or around certain widgets within a section, you'll need to split the section into two or more new sections.
These sections are already in our template (as DIVs with unique ids, that are referenced by CSS):
  • #header
  • #mainNav
  • #main .content
  • #sidebar
  • #footer
As the above tag attributes are defined, we will add these <b:section>-tags inside the divs:
  • #header:
    <b:section id="header-section" class="header-section" maxwidgets="1" showaddelement="no"></b:section>
  • #mainNav:
    <b:section id="mainNav-section" class="mainNav-section" maxwidgets="1" showaddelement="no"></b:section>
  • #main .content:
    <b:section id="content-section" class="content-section" showaddelement="yes"></b:section>
  • #sidebar:
    <b:section id="sidebar-section" class="sidebar-section" showaddelement="yes">
    </b:section>
  • #footer:
    <b:section id="footer-section" class="footer-section" showaddelement="yes" growth="horizontal"></b:section>
Note: we added "-section" to the ids to get not in conflict with the DIV-ids that are used for CSS-styling. Blogger will replace all section-tags with <div> tags, which will have the specified ID. So, you will have the chance to style for example div#header-section in your CSS.

Before we can test our template, do this:
  • rename HTML-file to "template-xyz.xml"
  • add Doctype-definition:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' 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'>

Let's try it! Open the Template code and replace the existing template code with our "template-xyz.xml" code. Click on "Preview template":

Oh... we get an error message:
"Could not load template preview: There should be one and only one skin in the template, and we found: 0"
Seems that we are still some required things missing...
Ok, let's have a look how to define a "skin".

Skin (CSS)

Google Help explains this in Fonts and Colors Tags for Layouts article.
In the <head> section of your code, you'll need to have a pair of <b:skin> </b:skin> tags. The CSS style declarations will go in between those tags, along with the variable names that make your design work with the Fonts and Colors page.
Let us first ignore the "variable" thing and place our CSS-code between <b:skin>-tags:
<head>
  ...
<b:skin>
  <style type="text/css">
html, body {
  margin:0;
  padding:0;
  height:100%;
}
    ...
  </style> 
</b:skin>
</head>

We test the template again in the template preview. Uups, again an error:
Could not load template preview: A skin cannot contain the element: style. Only text and CDATA sections are accepted.
Ok, as it is a XML-document, it can not validate our code, because CSS-code is not valid XML. So we put CDATA around the CSS-code (outside style-tags) and remove the style-tags:
<head>
  ...
<b:skin>
  <![CDATA[
html, body {
  margin:0;
  padding:0;
  height:100%;
}
    ...
  ]]>
</b:skin>
</head>

After fixing this, we successfully can replace the current template code with our new template-skeleton. It really is just a skeleton without any widgets.
But in the "Layout"-Designer our page-layout is shown correctly:
You can see the content-section on the left, the sidebar-section on the right and the footer at the bottom: they all show a "Add a Gadget"-box. The header-section and the mainNav-section are not visible - they differ in having the attribute showaddelement="no" set...

Gadgets and Widgets

Ok, let's have some fun and add obvious gadgets (click "Add a Gadget" in the section you want to add a gadget):
  • content-section: hmmm... When scrolling through the list of gadgets, none seems to be the gadget for showing the latest posts... This popup just lists gadgets available additionally to the standard widgets, that have to be added to the template manually.
The Blogger help "Page Elements Tags for Layouts" lists all available standard widget types:
  • Blog
  • BlogArchive
  • BlogProfile
  • Feed
  • Header
  • HTML
  • LinkList
  • List
  • Logo
  • Navbar
  • NewsBar
  • SingleImage
  • VideoBar
They can be inserted with the XML-tag <b:widget>, e.g.:
<b:widget id=”BlogArchive1” locked=”false” mobile=”yes” title=”Blog Archive” type=”BlogArchive”/>

For our content-section we add:
<div class="content">
  <b:section id="content-section" class="content-section" showaddelement="yes">
    <b:widget id='Blog1' locked='false' mobile='yes' title='Blog' type='Blog'/>
  </b:section>
</div>

In our sidebar-section we add the BlogArchive-widget and from the Gadget-Dialog the "Search Box"-Gadget:
<div id='sidebar'>
  <div class='content'>
    <b:section class='sidebar-section' id='sidebar-section' showaddelement='yes'>
      <b:widget id='CustomSearch1' locked='false' title='Search This Blog' type='CustomSearch'>...</b:widget>
      <b:widget id='BlogArchive1' locked='false' mobile='yes' title='Archive' type='BlogArchive'/>
    </b:section>
  </div>
</div>

And in our header-section we add the Header-widget:
<div id='header'>
  <div class='wrap'>
    <b:section class='header-section' id='header-section' maxwidgets='1' showaddelement='no'>
      <b:widget id='Header1' locked='true' mobile='yes' title='datazuul.com' type='Header'/>
    </b:section>
  </div>
</div>

The Navbar-widget seems to be the right widget for the mainNav-section. But if you add it, you will see that it is not the links to the dedicated Blog-pages you can define, but the navigation bar with search box, login, logout, ... see this:
So let's "park" it in the footer-section.
<div id='footer'>
  <div class='wrap'>
    <div class='content'>
      <b:section class='footer-section' growth='horizontal' id='footer-section' showaddelement='yes'>
        <b:widget id='Navbar1' locked='true' mobile='no' title='Navbar' type='Navbar'/>
      </b:section>
    </div>
  </div>
</div>

The pages-navigation gadget can be added with the Gadget-dialog over the Layout-Designer after editing the template and change the section-attribute from
showaddelement='no'
to
showaddelement='yes'


By default the dialog states "Pages: Already added":
Who did this? No, it is not in the template, yet.
What the source of this statement is: Pages are not activated to be shown. So click in the menu on "Pages" and change "Show pages as" to "Top tabs":
Now you can add the pages navigation to the mainNav-section. It is already inserted into the layout, so drag and drop it to the mainNav-section. Edit the widget and remove the title.
The mainNav-section now contains the PageList widget:
<div id='mainNav'>
  <div class='wrap'>
    <b:section class='mainNav-section' id='mainNav-section' maxwidgets='1' showaddelement='yes'>
      <b:widget id='PageList1' locked='false' title='' type='PageList'>...</b:widget>
    </b:section>
  </div>
</div>

The raw-styled blog now looks like this:

Ok, the content is there... but still a lot to style...

What else?

Further steps should be taken by adding
For adding the title-tag in our HTML-head section it can be generated with some dynamic tags:
<b:if cond='data:blog.pageType == "index"'>
  <title><data:blog.pageTitle/></title>
<b:else/>
  <title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
That's it for now. Our static webdesign has been transformed to a blogger template. There are still things to discover...

P.S.: In this post I write about how to host files blogger (design-)files on Google Sites

22 comments:

  1. These kind of post are always inspiring and I prefer to read quality content so I happy to find many good point here in the post, writing is simply great, thank you for the post.
    website design

    ReplyDelete
  2. nice article ... i found new tuts series on blogger template for me...

    link :- http://techgmind.blogspot.com/2014/02/how-to-create-blogger-template-from.html

    this are very easy for me .. because i dnt have much knowledge about coding

    ReplyDelete
  3. A very nice article, But Sir, can we make our own XML tags for layout and design using CSS in the Blogger template?

    ReplyDelete
    Replies
    1. See Page Elements Tags for Layout:
      https://support.google.com/blogger/answer/46888?hl=en&ref_topic=12449

      You can define own sections (resulting in DIVs) containing widgets.
      You can use defined widget functionality to create widget code: see https://support.google.com/blogger/answer/46995?hl=en&ref_topic=12449
      (Widget Tags for Layouts)

      Delete
  4. Hello my friend, thanks a lot for this wonderful post but I have a question please!! If I use an other CSS code with different "id" how I can use it on template? should I have to change the "id" of the widgets or what?, and how I can add the read more inside the temlate?
    Thanks a lot again and have a good day.

    ReplyDelete
  5. hello friend anyone how i make the magazine blogger template with customization :) please contact me i am waiting your answer

    ReplyDelete
  6. Really nice how u explain it and now i just make my own blog with my own template.
    not everything I read but highly I need this to learn later for finishing my blog.
    dont really much talking just ctrl+D

    ReplyDelete
  7. I am amazed....this is what i was looking for......thankyou....so much

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. Thanks for sharing this well written post. You have shared an informative article with us. From this article users surely get lots of help in designing blogger templates, even there is a resource which they can use, TemplateToaster http://templatetoaster.com/what-is-templatetoaster. With the help of this tool user may design variety of themes (or templates) in a lesser time without having to write a code.

    ReplyDelete
  10. Thanks for sharing these information. Hope so that your ideas will be helpful in my next project. Being not so professionally trained I used after effects templates in my last project that was really helpful for me.

    ReplyDelete
  11. Thanks http://jiyalyrics.blogspot.com

    ReplyDelete
  12. Wow.. it's looks great.. but only one question sir, how can i integrated other css like (Bootstrap, Materialize, W3Css, *etc) on my own template??

    i'll appreciate it if you would be help.. :)

    happy codding.. _:>

    ReplyDelete
    Replies
    1. just make a Link with it, many plugin will make you blog more heavy

      Delete
  13. it will be great if you make this tutorial on video like this: https://www.youtube.com/watch?v=rg-plkkl9hE
    sadly it wrote on Indonesia Language Y_Y
    it will more easy to understand for begginer like me

    ReplyDelete
  14. Start to create a custom blog or a business website is also best on a clean blog template install. Great tutorial and would really help others.

    With custom Blogr themes, now blogspot can stand side by side with other blog platform like Ghost, Hetena, Medium, Tumblr etc.. for example with Accelerated Mobile Pages for Blogger blog BlogrAMP equipped. Thanxs for the share.

    ReplyDelete
  15. Hello Can you help me in creating my site main page ?

    ReplyDelete
  16. I've many blogs related to Funeral Homes Website Design, But there themes are not so attractive. After reading this guide now I'll try to create my own theme from scratch. Thanks for sharing this guide with us.

    ReplyDelete
  17. Hello Admin!
    Such a great and informative post indeed on web designing, I really appreciate it!
    Keep updating stuffs like this.

    Manager:
    Training n Development

    ReplyDelete