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.

Comments

  1. Your above email structures are very decent. You can use the same template again and again for multiple campaigns with different content. Just make a habit to use postcards email template builder.

    ReplyDelete
  2. Very well written article. It was awesome article to read. I am impressed by the details that you have shared in this post and It reveals how nicely you understand this subject. I would like to thanks for sharing this article here. SEO Packages in Singapore.

    ReplyDelete

Post a Comment

Popular posts from this blog

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 Unit

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 techn

Design Bites: Minecraft - Feed The Beast

The "Design Bites" series is about learning or appreciating just one design element of one game. It's about applying an analytical eye, even if it doesn't touch on everything. What's Minecraft - Feed The Beast? Minecraft is a Sandbox developed and released by Mojang in 2011 (Kinda, it was in beta for a long time). The player roams a procedurally generated world building things and collecting resources with a variety of tools. Feed The Beast (FTB) is a collection of Mods for Minecraft, which add new items, creatures, resources and other features to the game. There are many different Feed The Beast modpacks, each with their own goals and focuses. This article is specifically about "Feed The Beast: Infinity Evolved". I would encourage anyone curious about FTB to head on over to the Feed The Beast website or Forums and check it out! What's Awesome? Deep inside all humans is the burning desire to build a nuclear reactor. No? Just me? Alr