Create Blogger Template from Scratch - Part I

Creating Blogger Templates or as many call it Blogspot themes is one of things that a beginner can get started with much ease. Infact you'll be able to make a very nice and clean blog template by the time you finish reading this article. In addition to that, I also mentioned how you can make responsive blogspot templates using CSS frameworks and UI frameworks such as Bootstrap and Semantic UI.

If you have been in the atmosphere of google blogger, you're already familiar with the term "Blogger Template" but I'll be giving a formal definition to it anyway. Moreover, I'll show you how you can leverage the power of blogger and built robust Wordpress like blogs in blogger, ofcourse you won't have that super flexibility and support but yeah, to an extent (when it comes to design) you can.

Blogger Template

In the simplest form it's a XML file. Blogger allows its users to use various customized blogger templates which are available for free and some are paid from third-party sources. Blogger also introduced the Dynamic View in 2011 which I personally don't use and like much, but you can give it a try customizing it after you complete reading this article.

So what's inside the xml file?

These XML files contain HTML, CSS, Javascript, Blogger semantics and some XML tags. In the community, some even call these HTML blogger templates because the markup is done using HTML and not XML.

Now if you want to make your own blogger template It will help a lot if you have a little bit of background in web development but it's not a must have because I have covered everything to get you started.

Prerequisites for creating blogger theme

HTML

This is the heart and soul of your template, Whatever you see in the screen is a result of placing the text or multimedia inside the appropriate HTML tag. If you are a total newcomer to web design read this book HTML & CSS: Design and Build Websites by Jon Duckett to get a good understanding of HTML or any other good source. If you have some earlier experience you can skip it

CSS

If you know some CSS and you know how to select the desired HTML tag using selectors, you're good to go. If not then you might want to practice some, you don't have to know a whole lot of CSS, just knowing how to use CSS selectors and how to change properties is enough. Also make sure that you have a good understanding of display and position properties. (Not required to get started but will help a lot when you start building themes for your clients)

XML

You will not be writing any XML in your template (unless it's a rare case) , there are a few lines of XML at the top and the whole template has to follow XML rules. For that a quick read of w3school's XML article is enough.

If you know JavaScript, it's great! but it's not a requirement for learning to write Blogger Templates. This article is about learning to create a blogger template not about designing a great one, If you are good at web design, you'll be easily able to design stunning blogger templates.

Now if you feel confident about the above three (even a little bit), you are quite ready to create your first awesome blogger template. So let's get started!

Blogger Semantics

If you have tweaked any blogger template earlier, you might remember seeing things like,

<b:if cond='data:blog.pageType == "item"'></b:if>

Now these are what I like to call the Blogger Semantics. If you ever used any Javascript template framework, these work almost the same like them.
Along with the semantics, blogger offers you some layout tags specific to blogger, such as the b:section which we'll be talking about in a while. Anything prefixed by b: is a blogger layout tag or widget tag and anything prefixed by data: will be a blogger layout data tag.
For more Information you should definitely consider reading Google's official documentation.

Blogger Template Layout

The following shows the difference between pure HTML layout and Blogger Template Layout

<!DOCTYPE html>

<html>

  <head>

    <title></title>

  <head>


  <body>

  </body>

</html>

V/S

<?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'>

<head>

<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[ /* CSS here */ ]]></b:skin>

</head> 

<body>

<!-- Blog elements here --> 

</body>

</html>

Now, If you read the w3 XML article that I mentioned above, you'll be familiar with the XML tags. This is the base upon which we'll grow our custom blog template. Now If you try to run this, blogger will throw some kind of error. That's because we did not use the b:section tag yet, so let's do that quickly. Also the difference between the pure HTML and blogger template is just the addition of two-three more lines of XML to the top, and the <b:skin> is one of the many blogger semantics which holds the main custom CSS styles. Hold on if you don't get what's up with CDATA, will get to that soon.

Before I show you where the blogger layout tags fit in, here's a quick introduction to the layout tags. The <body> section of the template consists of these layout tags(shown in hierarchy).

- HTML tags - div and span, grids etc
- b:section - these are areas of the page, such as a sidebar, footer.
- b:widget - It is a page element. eg.popular posts, main blog area
- b:includable
- b:include
- HTML tags

So the basic idea is that inside the body you can have HTML tags as usual and the b:section tag. You can't have a b:widget without having a parent b:section. Similarly you can't have your HTML tags directly inside a widget they must be inside a b:includable.

Don't let the fancy words confuse you, here's a better explanation. If you ever have had any kind of programming experience you must have come across the concept of functions. In which you have a main function and in the same level you have other functions. When you run the program, the the main function executes and excludes the other functions if the other functions are not called inside the main function. The relationship of b:includable(main) to b:include(calling of other function) is the same as the program analogy I just talked about. There must be one b:includable with id=main in every widget.

To get a better understanding, let's see the final base upon which we'll be building our templates.

Show Final Base Template Code

<?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'> 

<head>

<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[ /*CSS STYLES */ ]]></b:skin>

</head> 

<body>

<div id='container'>


 <!-- Header --> 

 <b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
    <b:widget id='Header1' locked='true' title='Blog title' type='Header' />

 </b:section>



 <div id='blog-posts'>

 <!-- Blog posts area -->

 <b:section class='main' id='main' maxwidgets='' showaddelements='yes'>

    <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog' />

 </b:section> 

 </div>



 <div id='sidebar-container'>

 <!-- Right sidebar -->

 <b:section class='sidebar' id='sidebar' maxwidgets='' showaddelements='yes'>

   <!-- Widgets can be added from layout page -->

 </b:section> 

 </div>




 <div id='footer-container'>

 <!-- Footer -->

 <b:section class='footer' id='footer' maxwidgets='' showaddelements='yes'>

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

 </b:section>

 </div> 



</div>

</body> 
</html>

Now if you try to run this in the blogger editor, it should get saved without any errors. And if you view your blog now, an extremely ugly web page should be in-front of you. Before I go on explaining about how to add styles and how format data well in blogger you should have some ideas about the attributes used in the b:section and b:widget tags.

Analyzing b:section and b:widget

b:section

<b:section class='main' id='main' maxwidgets='' showaddelements='yes'>

The id attribute is mandatory in every section. If you look up to the layout tab in your blogger dashboard, you'll be seeing the id of the section used as the name identifier for that section block in the layout wireframe. Now the showaddelements attribute is for if you'll allow more widgets to be added from the layout tab, others are self explanatory.

b:widget

<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog' />

There maybe more than one widget in a section, also there maybe more than one SAME widget in the same section. Widget are equivalent to the so called "gadgets" in the layout tab of the blogger dashboard. The most important part of b:widget is the type attribute. I have given links in the end for good sources for type attribute because the official documentation is not very friendly in that part.
The id can be anything as long as its unique. If I have two Blog type widgets of same type in the same template, I would like to like the id(s) to be like Blog1 and Blog2.
These are some widget types, you might want to try them out for a better understanding of what they do. Header,Blog,Profile,Feed.
Checkout this awesome list of widget types here.

Now that you have a basic understanding of the basic layout of a blogger template, I want you to go over to the official documentation and read some about b:if ,expr and b:loop, but before you do that here's a short note on Blogger layout data tags. Link to documentation.

Blogger Layout Data Tags

They will all be formatted as <data:name/> or <data:name1.name2/>, where name is the name of the particular piece of data you want to use. In the name1.name2 example, name2 is a particular item within a set of data called name1, e.g. data:photo.url .

For more Information, read the data tags documentation.

If you have come back from your quick rides through google documentations, we're in a good state to finally start creating our first blogger template. Here's a quick refresher to quickly sum-up things.

Using data tags to show and implement things in specific type of pages only

If you read the the documentation from google that I linked in the previous paragraph, you might should have noticed something called Globally available data and then there are widget specific data tags.

Data tags contain values, you can either use them to show something( eg. <data:post.body/> will show the body of the post, belongs to widget with Blog type.) or you can use them as attribute like this:

<b:if cond='data:blog.pageType == "index"'>

Now the data:blog.pageType has a value which can be of these types (there might be more, but these are the most useful ones) :

index
item
static_page
archive
error_page

so the the part inside the b:if will only executes when the cond part is true. Use the correct set of double and single quotes as shown in example always. Inside the b:if tag, you can have almost anything, it may be a style tag that needs to get excuted when certain conditions are met in the template or it may even be a script tag and of course HTML tags.

While designing a blogger template keep in mind that you need to use the expr: if it contains an attribute not belonging to blogger and needs to some kind of value in it, for example.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <!-- Show the Hero Slider -->
<b:else/> 
    <!-- Do Not Show hero slider, Instead show Subscribe box -->
</b:if>

Is similar to this

<b:if cond='data:blog.url == "http://www.blogredesigned.com" '>
    <!-- Show the Hero Slider -->
<b:else/> 
    <!-- Do Not Show hero slider, Instead show Subscribe box -->
</b:if>;

The first one is more dynamic than the second one, this gives a greater amount of flexibility.
And to use expr:, let's say we have a image to be displayed and that image should be the first Image in the blog post. The way we accomplish it is something like this:

<img expr:src='data:post.firstImageUrl' expr:alt='data:post.title'/>

We're setting the src and alt attribute dynamically without have to the the link and text. Pretty sleek huh? When you need reference to using data tags in blogger, rather than the official documentation, I suggest you refer to this awesome list of data tags.

A side note: homepage.url is not equal to the url of index page pageType, index pages contain next page results(when you click show previous posts), whereas homepage.url is the main landing page url only.

As promised in the beginning of the article that I'll be showing you how to make fully responsive blogger blogs using CSS frameworks, I just wrote another article about Making a responsive and adsense ready template for blogger and you might just also want to read the guide on wire-framing and UI design by co-author Avinash. In this article I made a basic clean and neat blog comfortable for beginners.

Let's create the simple blogger template.

If you take a look at blogger's default templates (for eg. Simple by Josh Peterson), you'll notice that they are using something called the faux columns and in the CSS part, they are using Variable definitions which give you more flexibility like you can change the whole color scheme at once. After the variables are set up, when you want to use the value of a variable, enter $variable_name in the b:skin css. For more information on setting up CSS variables checkout documentation.

But in our example blog template, we're going to get a little more realistic and use a very simple and lightweight CSS framework which will help us create grids and columns with ease.
The only drawback that I find with using some kind of external css framework is that in the Layout section of the dashboard, things do not showup correctly.

If anyone got any solution for using a css framework and making sections and page elements show up correctly in Layout Tab, please do comment about it. I have tried various ways but none of them happen to work, but yeah using faux columns does solve it.

<!--SOME IMAGINARY GRID SYSTEM EXAMPLE -->

<div class="row">
    <div class="column-1-3">Column one Text</div>
    <div class="column-1-3">Column two Text</div>
    <div class="column-1-3">Column three Text</div>
</div>

The above code will show up correctly in the main site, but will not show up correctly in the Layout tab.
Now that you know how we can use the grid systems to our advantage, let's sum-up everything we learnt till now and use that to create our blogger template.

We'll be using the the skeleton css framework which is extremely lightweight and simple to understand. I am not using something like bootstrap or any other full fledged UI framework for I want to keep this article beginner friendly.

How to use Bootstrap, Semantic UI and other CSS and UI frameworks to create blogger template?

As UI frameworks are geting more and more popular, it's perfectly sane to use one with your next blogger template. Blogger does not allow it's users to host css and js files, there's a workaround to it using Google Drive but for our example template we'll be using a CDN (Content Delivery Network).
These css frameworks are just css files that you can link like any other stylesheet.
Headover to CDNjs and copy the link to the minified css file for skeleton css framework.
For any other framework, you can do the same and you can include that file in your blogger template like this:

<link href='https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css' rel='stylesheet' type='text/css'/>

Use this inside the head tag before the b:skin. Yes you can use it anywhere in the template by just putting it inside the <style> tags. But to avoid css style clashes it's best to declare it before the b:skin.

Create Blogger Template using CSS framework.

The first thing you need to do is pop up the Blogger HTML editor for your test blog. Now remove any code currently present there. Paste this(below) piece of base template code there, This is similar to the final base template that I showed you earlier but with only one empty section. Below are some blogger template FAQs and the code.

Base Template Code

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html 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'>
  <head>
    <b:if cond='data:blog.metaDescription != &quot;&quot;'>
      <meta expr:content='data:blog.metaDescription' name='description'/>
    </b:if>
    <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><![endif]-->
    <meta content='width=device-width, initial-scale=1.0' name='viewport'/>

    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title> 
    <b:else/>
    <title><data:blog.pageName/> | <data:blog.title/></title>
    </b:if>

     <b:skin><![CDATA[ /* CSS STYLES */]]></b:skin>
  </head>

  <body>
  
 <p>Hello I am the Blank Template from Blogredesigned.com</p>
    <b:section class='header' id='header' maxwidgets='' showaddelement='yes'/>
      
 <script>//<![CDATA[
   //]]>
    </script>

  </body>
</html>

What is CDATA in Blogger?

CDATA is used to escape characters in Blogger such as inside the b:skin and script tag.

Well I think the post is getting long, so I am going to part this guide to create blogger template here.

Till now I hope you have a good understanding of how blogger templates work. How blogger handles the blogger semantics and how you can apply logic to get different results in different pages. Read the continuation of this article here were I explain how you can customize the base blogger template and make your own custom blogger template. Also read How to make responsive blogger templates here.

One more thing worth mentioning is as soon as you save and reload a blogger template after writing a section with a widget in it. Blogger will automatically generate all the b:includables to be present inside the widget. So kind of blogger!

Conclusion

I hope I am able to drive the concepts of how blogger templates work and how you can leverage it to your profit. We created a simple custom blogger starter template which can be used to start any blog template project. Please feel free to comment your questions and suggestions below, I'll be answering them as soon as possible and also read the second part of this article where I complete the process of making a blogger template with a css framework.

Reference Links :

Documentation for Blogger by Google - link

A good article on Blogger Page Types - link from msady's site.

blogredesigned