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.
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:
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:
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:
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.
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:
- a Skin tag.
- 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 are defined using <b:section> tags in HTML. They must always have a unique id.
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.
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.
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:
- It allows us to refer to the same values across all of our CSS, making it easier to change things across the whole site.
- 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.
Good information
ReplyDeleteYour 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.
ReplyDeleteVery 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