wayne on November 11, 2008
There will come a time for those that really get into using Blogger that they'll want to modify and manipulate their blogger template to do things a little differently than the standard templates provide by default. Perhaps you want to switch your standard Blogger theme to a custom theme that was built by someone else. Maybe you want to create your own template, or perhaps make some simple changes. In this lesson I'll cover the interface that allows you to do just that.
Being that one could write a book on templates and still not cover all there is to speak about, I'll try my best to discuss the interface and delve slightly into some of the code, but mainly this will cover the interface and how to use it.
Note to new visitors! If you would like to know more about this series or view all available lessons, just follow the appropriate link.
Backup and Restore Template
The first item found on this page is perhaps...no, IS the most important of all the controls in the entire administration area. The controls under the Backup / Restore Template header will save your butt, but only if you decide to use them. So before doing any type of work on your template, you should make sure that you can recover from disaster the best you can.
I first want to point out that we can all define disaster as different things. For instance, you might define it as anything that causes you to lose time. You may consider it disastrous to have a single pixel line where there shouldn't be one, while your friends may simply overlook it. Regardless of how you feel, Make sure you have a backup of your template!
How might you do this? Start off by downloading the template by clicking the Download Full Template link. This will allow you to save the contents of your template to your local disk. If, during your adventures in coding and template modification, you make an error or cause the New York city skyline to go dark, you can simply upload the template you just saved back into action by using the control immediately following the Download link. New Yorkers everywhere will thank you.
Edit Template
The edit template section might look a little intimidating to some, but if you have a backup of your template, you can do whatever you want and still get back to normal with ease. Besides, any changes you make are not put in place until you click the Save Template button found at the bottom of the page.
The first thing to note is that Blogger hides most of the template code from you by default. The checkbox labeled 'Expand Widget Templates' will un-hide these sections so that you can see all of the template code.
For instance, the code shown below is the section of code that defines the footer area of the Views On Life template. If you look closely, you'll see that the <b:widget /> line is a self-closing tag that when you choose to expand the widget templates, grows to several more lines, and is no longer a self-closing tag, but instead has a starting <b:widget> and a closing </b:widget> tag set.
<div id='Div1'>
<b:section class='footer' id='footer'>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
</b:section>
</div>
When we expand the text by clicking the Expand checkbox, suddenly all these widget items become several lines of code that will look similar to this:
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='HTML4' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>
As you can see, there is much more code behind these widget items.
Another good thing to do when toying with your template code is to find a way to lay it out so that it makes sense to you. You'll see the above 'footer-wrapper' <div> is the rightmost item, and everything between the starting and closing tag is indented about 4 spaces. If you look at the next line, it also contains information in between its starting and closing tags, so those too are indented 4 spaces. This allows you to read the code much easier, and it also is a common practice among programmers to help improve the readability of the code.
You won't be able to format the lines of code in the Blogger interface though, at least, not without a lot of hair pulling. Instead, if you used a simple text editor like Notepad, it would make things much easier. Simply paste your template code in, make your changes, format certain areas to help you understand it, copy and paste back into the template area in Blogger when you're done and test your changes.
Now, the trick is to understand what each line is doing, and what it means. A person that can teach themselves, and determine where to get information can achieve that goal easily over time. But it DOES take time and plenty of patience, a healthy passion for puzzles is probably a good trait too.
Let's say you decide that you want to make some changes within a particular widget and realize that your changes don't really look good, or worse, cause the blog to crash. You can clear all your widget template items to their default state by clicking the revert widget templates to default link.
Some time ago, blogger switched the way they define templates. They refer to the old template design as their Classic Template, while the new one is simply called a Template. I don't suppose anyone who has the updated templates would want to go backward to the classic template so I won't go into the effects of doing this.
Conclusion
This page contains the most valuable bit of information I could ever provide to you. Make sure you have a backup of your template before you go and mess with it. By not doing so, you are only allowing yourself to have headaches and issues later. Don't allow yourself that, be a nice person and make a backup right now, while you are thinking about it and put it somewhere safe. Someplace you'll remember.
And by all means, if you are so inclined, you should play around with the code in your template. Maybe not directly in your 'live' blog, but perhaps in another that only you have access to or won't affect your stream of visitors, or one that you don't care about failing, such as a test or staging blog. I call these sandbox blogs, and they are quite handy when you want to try something new.
Further Reading
Here is a list of further reading you can do as it relates to understand more about the template code. I will be finalizing more posts around templates, but I suspect there are those that just cannot wait.
Bare Bones Guide to HTML - Great place to learn more about HTML
Page Elements Tag for Layouts - Learn more about the specialized tags that Blogger uses
Widget Tags for Layouts - Learn more about the tags used for widgets
Layouts Data Tags - Learn more about the data tags that Blogger uses
Fonts and Colors Tags for Layouts - Fonts and Color tags
Entrecard DropSurf