This article is for people who already have knowledge in HTML and CSS, but are new to Blogger templates.
How do Blogger templates work?
Bloger templates are XML files which include everything about the
layout. Listings, static pages, blog posts, search pages, content block,
you name it, it’s there. Even the CSS and JavaScript is in there.
On the other hand, you can also
use Google Drive for storing CSS and Javascript files.
Although you put all your HTML into the XML template as you would in any other HTML page, it is still an XML definition, so
XML syntax rules apply.
The anatomy of a Blogger template
If you
download a Blogger template
and look at its code, you’ll see that, although you have the XML header
in the very beginning, the root element is the HTML tag. Inside you’ll
find the usual suspects: head and body. A very familiar way to start,
the differences start after that.
Head Section
In the head section you’ll find the Blogger skin elements
(<b:skin><b:template-skin>), among other things. Inside the
skin elements you’ll find the CSS for the template.
You can delete the <b:template-skin> section and leave the <b:skin> empty if you’re going to use your own styles.
<b:skin>
<![CDATA[ /* CSS styles */ ]]>
</b:skin>
If you’re not using an external CSS file, then insert your CSS into the skin section.
As we mentioned before, this is an XML file, so CSS will not parse correctly. That’s why we use the CDATA wrapper.
Body Section
Here you’ll find the main elements:
section,
widget, includable and all the HTML structure.
<b:section class='main' id='main' preferred='yes' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='nextprev'>
...
</b:includable>
<b:includable id='main' var='top'>
...
</b:includable>
<b:includable id='status-message'>
...
</b:includable>
<b:includable id='post' var='post'>
...
</b:includable>
</b:widget>
</b:section>
The body can have HTML, CSS or JavaScript code and one or more sections.
A section can only have widgets and a widget has to have one or more includable elements, and only includables.
In the includable is where you can add any HTML, CSS or JavaScript code.
If you look in the Layout section of you Blogger administration pages
you can see the structure of the page with different sections and
widgets. These are the same you find in the XML template. If you change
the XML to edit, remove or add new sections and widgets it will reflect
on this page.
Widgets
Widgets need to have at least one includable with id=”main”. This is
where the bulk of the action happens. You can have other includables in a
widget, but you need to explicitly call them for their code to be
executed:
<b:if cond='data:blog.pageType == "index"'>
<b:include name='nextprev'/>
</b:if>
You can look at includables as ways to divide the code in logical chunks (sort of like functions).
Inside includables you can use any code you want. Bellow you can see
an example of a widget of type HTML. But you can also customize the code
of other widget types, as long as the code is in the template you can
change it.
<b:widget id='HTML1' locked='false' title='Follow Us' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "index"'>
<div id="follow" class="block">
<h2 class="title"><data:title/></h2>
<ul>
<li class="rss">
<a href="#">RSS</a>
</li>
<li class="facebook">
<a href="#">Facebook</a>
</li>
<li class="gplus">
<a href="#">Google+</a>
</li>
</ul>
</div>
</b:if>
</b:includable>
</b:widget>
One useful thing to know about widgets is that their id needs to be
its type (above is HTML), followed by a number. This number needs to
make this id unique in the template.
Targeting pages. Conditions and loops
You can have conditional bits of code inside the body tag or inside
an includable element. This way you can target different page types
(listings, blog posts or static pages).
This is how you target a listing page:
<b:if cond='data:blog.pageType == "index"'>
<!-- do something on a listing page -->
<b:else/>
<!-- do something else on all other pages -->
</b:if>
Available values in data:blog.pageType property:
- archive
- index
- static_page
You can even be more specific and target specific pages by URL, like so:
<b:if cond='data:blog.url == "http://www.broculos.net/p/tags.html"'>
<!-- Stuff for the tags page -->
</b:if>
Or use Blogger’s data to target the homepage, for example:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Stuff for the homepage -->
</b:if>
You can loop through lists of data, like so:
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
Blogger data
You can pickup data from Blogger using the <b:data> element.
Use it to get tags, titles, dates, URLs. This tag is context specific,
so if you’re handling a blog post you’ll get different data than if
you’re handling an HTML widget. See an extensive
list of layout data tags here.
An example of showing all the labels from a post:
<b:if cond='data:post.labels'>
<ul class="tags">
<b:loop values='data:post.labels' var='label'>
<li>
<a expr:href='data:label.url + "?max-results=5"' rel='tag'><data:label.name/></a>
</li>
</b:loop>
</ul>
</b:if>
