Skip to main content

Blogger Templates for Noobs - Part 1 - Template Structure

I've been curious about blogger templates since I started using the site a half decade ago, but I never took the time to learn how to build them.

Recently I've been making changes to this site and I've been picking up a few things about blogger templates, so I'll be sharing things on this site as I learn them.

Setting Up

I'll assume that you have a blog already, so the first step is to visit the dashboard of your blog and click on the "Template" tab on the left-hand side.



Then, click the "Edit HTML" button to get started.




You'll be greeted with an intimidating screen filled with a bunch of scary looking HTML, don't worry, we're going to be starting from scratch, so just go ahead and delete everything so that you are left with this:


Alright. Here we have a nice blank canvas to work with. This guide assumes that you know at least a tiny bit of HTML and CSS, if you have no clue what those things are, don't panic. They are very simple, you can take a look at a site like w3schools to learn more.

Down to Business

The first thing we are going to do is fill in some of the basic necessities for writing HTML, that means we'll be needing:

 <html>  
   
 <head>  
 </head>  
   
 <body> 
    <h1> Hello World! </h1>
 </body>  
   
 </html>  

Once you have those, we can start doing some blogger template magic. Now, if you try to save your template right now you'll notice that it complains. This is because you need to have a two things on your template at the very minimum:

  1. a Skin tag.
  2. a Section tag.
But wait, what are sections? and what is a skin?


Template Structure

Before you can build a Blogger Template, you need to know how they are structured. Blogger templates are made up of sections and widgets.

Sections

These are layout containers, boxes that you arrange on the page which don't necessarily do anything except decide the shape of your template.
Sections are defined using <b:section> tags in HTML. They must always have a unique id.

Widgets

These are the fun bits, they are little bits of behavior, bits of content, that do useful things. These are the things you already know about if you have ever edited the "Layout" settings of your blog, some of the most commonly seen examples are:
  • Header Widget, which can show the title of your blog and an image.
  • Pages Widget, which can show links or tabs to different pages on your blog.
  • Popular Posts Widget, which shows the most popular posts from your blog.

Also, its important to know that the blog itself is a widget, not the whole page, but the bit where your posts show up in the main body of the page. You can also define your own widgets, but that's a little more complicated and best left to an intermediate tutorial. For now, all you need to know is that Widgets go inside Sections.
Widgets are defined using <b:widget> tags in HTML. They must always have a unique id, and a type, which defines what the widget does, this is chosen from a list of ~13 widget types such as "Blog", "Navbar", Newsbar" etc.

You will most often be adding widgets using Bloggers Layout Tool, so for now you wont have to worry about specifying widgets manually.

These two make up the majority of the visible components you'll be dealing with on your page. But in order to customize the way they look, we need to use a skin.

Skins

A Skin is bloggers way of adding CSS styles to your template. Instead of defining style tags in your HTML or linking to a style sheet, you will instead provide a snippet of code between two <b:skin> tags inside the <head>. It might look a little something like this:

 <b:skin><![CDATA[
  body {  
   font: normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif;  
   color: #260F0C;  
   margin: 0;  
   padding: 0;  
  }
  ]]></b:skin>  

This may look like ordinary CSS, and in this example you would be absolutely right, but skin tags actually allow you to do a lot more. Take a look at this more complicated example:

 <b:skin><![CDATA[
 /* Variable definitions  
   ====================  
   <Group description="Page Text" selector="body">  
    <Variable name="body.font" description="Font" type="font"  
      default="normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>  
    <Variable name="body.text.color" description="Text Color" type="color" default="#260F0C" value="#260F0C"/>  
   </Group>
 */  
   
  body {  
   font: $(body.font);  
   color: $(body.text.color);  
   margin: 0;  
   padding: 0;  
  }
  ]]></b:skin>  

Here we've defined two skin variables: body.font and body.text.color, and referred to them in our CSS rules by using the $ operator.

This allows us to do two things:

  1. It allows us to refer to the same values across all of our CSS, making it easier to change things across the whole site.
  2. It allows us to expose style values in the Template Designer, more on that in a future post.
All of this is a lot to digest, so don't worry about memorizing it all at once. For now, lets get back to building our template.

Back to Business

We'll wrap up this post by adding an empty skin and an empty section to our Template, just to get it to save.

 <html>  
   
 <head>  
  <b:skin>  
  </b:skin>  
 </head>  
   
 <body>  
  <h1> Hello World! </h1>  
  <b:section id="main_body">   
  </b:section>  
 </body>  
   
 </html>  

Go ahead and save your template, you can visit your site to see what it looks like. Right now it's a little plain but, be patient, we're just getting started. See you in the next tutorial.

Popular posts from this blog

Wacom vs N-Trig - A Modern Comparison

WARNING: This post is long. I wrote this because I could not find an unbiased comparison of the modern N-Trig and Wacom technologies online. It was written in response to the artistic outcry regarding the Surface Pro 3. If you are an artist, I believe it is worth reading.

UPDATED as of 20th June 2014 to reflect N-Trig software advancements.
UPDATED as of 23rd June 2014 to reflect new direct Digitizer comparison information.


Those of you who may visit this site regularly will know that I am a game developer, but what you might not know is that I also do a lot of sketching. (Maybe one day I will post the stuff online)

Since I am a geek, I do almost all of my sketching digitally, which means I am always looking out for new developments in digitizer technology. This brings me to this post in particular:

Following the announcement of the Surface Pro 3, many artists were shocked and disappointed by the news that the SP3 would be using N-Trig technology rather than Wacom technology like the SP…

[Pre-Alpha Peek] The Adventures of Clark Doud - Where Is Dark Cloud 3?

I Got Tired of Waiting for Dark Cloud 3So, I think most of the Fans of the Dark Cloud series are tired of waiting for a third installment (That is to say: Seriously where the hell is it?). So in the mean time I've decided to throw all my love for the series into making a Fan-game, because (You guessed it)They Should Have Made A Sequel.

So this audacious blend of (almost) copyright infringement and big talk isn't about taking on the gigantic task of filling the shoes of Dark Cloud 3, this is about giving myself something to play with until they make a sequel (...hopefully). Without further ado lets get into the meaty bit, what I've got so far:

Unity: How Adapters can help you write fewer MonoBehaviours

TL;DR: You don't need to duplicate a bunch of code to do the same things to a Image and a SpriteRenderer, or RectTransform and Transform, etc. You can use a simple pattern called the Adapter Pattern. If you've never used it before, this post explains how.

The Problem: Image vs SpriteRenderer Lets say you want to make a sprite fade out, maybe its a dead monster or a collectible, but in either case you want it to gracefully depart from the screen rather than blink out of existence. Kinda like this eyeball monster from Beastly:


So that's pretty easy right, one way of doing it is with a MonoBehaviour that modifies the sprites alpha value via SpriteRenderer.color. Your class might look something like this:
public class AlphaFaderSprite : MonoBehaviour { public SpriteRenderer spr; public float fade_percentage; void Update() { spr.color = new Color(spr.color.r, spr.color.g, spr.color.b, fade_percentage); } } Now, anyone who's used Unity for more than an …