Many people who use Blogger as their blogging platform of choice often find themselves not only looking for free blogger layouts, but also for the free blogger template codes they can use to customize Blogger layouts to their own unique style and taste.
How Free Blogger Template Codes Work
Whether you've downloaded a free blogger template off the Internet or you've had a professional programmer design one for you, it's always in your best interest to understand the underlying code so that you can tweak the template here and there to suit your specific needs.
What Are Blogger Template Codes?
Upon first glance, a Blogger template looks confusing and intimidating. The template is an XHTML file, which means that it's dynamically created based on the variables that you (or your designer) embedded into the file. When you view the file, while you may expect to see your blog title or other specific details about your blog, you won't. This is because all of those details are stored in variables and your XML template just pulls that information from the fields you filled out when you configured your blog. This is why you can change the title (and many other details) of your site without the need to edit the template file each time.
Template codes are the individual words that act as "commands" within the XML file that tell it how to format your blog or where to place certain elements like the title, posts and comments. Understanding free Blogger template codes may not allow you to build an entire template from scratch, but at least you'll understand enough so you can make minor changes here and there.
The Blogger NameSpaces
The reason so many people can create free Blogger templates that work on Google's popular blogging platform is because Blogger's templates adhere to the standard XHTML specifications. These specs define the elements and variables that everyone should use within the template. Those elements and variables are stored within specific locations at Google, and they are similar in function to "libraries" in C++, in that they allow you to use certain variables to format your blog or provide it with unique functionality. You can find these namespaces at the top of your template (to view your template, click "layout" and then "edit HTML"). They look like this:
| | 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' |
The two most important namespaces are "b" and "data." The first contains the template codes to format your blog, and the second contains the codes you need to insert your blog data into the template.
Understanding Sections and Formatting
The general structure of how your blog appears is defined by the section tag. The section you define allows you to tell the template where to place the header, footer, navbar and sidebar. You can find the section tags in your template by searching through the XML file for "b:section" and looking for one of those section types.
Next, within each section you'll see widgets defined as "b:widget" which is where the actual data and code for your blog will be placed. There are additional "b" codes that allow programmers to add additional programming and functionality to the template, but for the scope of this article the section and widget tags are all you really need to modify the appearance and some of the functionality of your blog.
Blogger Template Code Listing
The most important namespace is "data," which allows you to place information from your blog into the formatted template. Programmers do this by using the code "data:blog" which you can find within your XHTML file. This code is followed by a period and then the global element that you want to embed, such as the blog title (blog.title) or the url (blog.homepageUrl). The code listings for the global elements you can embed are shown here.
- data:blog.title
- data.blog.pageType
- data.blog.pageTitle
- data.blog.url
- data.blog.homepageUrl
- data.blog.languageDirection
- data.blog.encoding
- data.blog.feedLinks
In addition to the global elements above, if a widget is defined by the "b" code described in the previous section, then you can use data elements specific to those widgets. Widgets add typical functionality to a blog and include:
- Blog posts
- Your blog's logo
- User profile information
- Feed information
- Lists
- Links
- Your blog's archives
- The current page header
- Pictures
Within those sections you'll find defined elements that you can alter such as locations of files, the title of that section and much more.
Learning How to Edit Blogger Templates
The fastest way to learn how to customize a blog template is to roll up your sleeves and give it a shot. Just be careful not to edit your template directly in the Blogger "edit HTML" box. Instead, copy and paste the code into a text editor and make your changes there. When you're finished, save it as an ".xml" file and then upload the file by clicking "Upload," but before you do, make sure you click "Save Template" to save your original template in case anything goes wrong.
By taking these precautions, you can experiment with using Blogger template codes to customize your blog layout without worrying about ruining your blog.
