There will come a time when you find yourself staring at your template code on the Layout – Edit HTML page. Perhaps what you see there confuses you, or maybe you know what your doing but have hit a snag. Either way, you cannot save your template when you have errors. So what can you do? Learn a little HTML for starters.
Please note, it’s probably best to read this in a nice quiet area where you can focus on the content. You may not know it, but this is borderline programming here. I don’t want to scare anyone away, but you really need to pay attention to posts like these if you are to get the full benefit of the content. You can’t skim text and learn programming at the same time. I’ve tried, it doesn’t work. hahaha
If you thought you could operate your blog without knowing any HTML, well, you’re right, you can. If you want to enhance and modify your template yourself though, you will be best served learning some of the basics of HTML and the nuances of Blogger.
For instance, when you first view the Layout – Edit HTML page, you’ll probably see something similar to this:
* Name: TicTac (Blueberry)
* Author: Dan Cederholm
* URL: www.simplebits.com
* Date: 1 March 2004
* Updated by: Blogger Team
*/
What is all this jibber-jabber you might ask? What you see there are the first few lines of my template for the Views on Life blog. For the most part, you can ignore the first few lines in the above snippet. I want you to take a look at the or self-closing).
What does that mean? Well, a bit of HTML markup (as it’s called) always has a starting tag and a closing tag. What you find in between these two tags is the meat of the statement. Let’s break down the
First thing we need to understand is that all HTML tags require a beginning and and ending. This allows browsers to interpret and know where something starts, and where it ends, and most importantly, what it is. The
That’s all there is to it! You end with the exact same tag, except that you add a forward slash to it. This is your beginning and ending tags for the title HTML statement. This is also how MOST of the HTML tags you’ll use are going to be put together. With a beginning and ending formatted exactly like this.
I say most tags are like this, but there are exceptions. For instance, the tag, which displays an image on your page, is self-closing. Self-closing? What in the world am I talking about? Again, here’s an example.
Notice that I don’t have a ending tag on that statement. Instead, I can end the tag by adding a slash before the starting tag ends. The reason we don’t have an ending tag for the
tag is because the
, when properly formed (syntactically correct), will contain all it needs to know to do its job, which is to display an image.
Conversely, the
For Blogger templates, you’ll notice that we have a tag in between our beginning and ending
This is perfectly valid as well, and the text found in between the beginning and ending
If you take another look at the HTML snippet I supplied at the beginning of this post, you might notice that there is a
statement without an ending tag. Well, there is an ending tag, but it is located after all the Cascading Style Sheet (CSS) information and the text would be too much to display.I bring this up because, like the
I will be continuing this discussion in the comments area below for those of you that may have a question or two for me. There is no way to teach about the templates without knowing a little bit of HTML to begin with. So while I’m still building the remaining lessons on Blogger, I’ll also be throwing out related material to help build up your knowledge even more.
Related Articles
HTML Examples on W3Schools.com
Learn Basic HTML – For Beginners Web Sites
You might also enjoy these related posts
- The Differences Between HTML and Blogger Template Code Do you understand the difference between HTML and Blogger template code? When you take a look at a Blogger template, are you able to read it? I mean, do you...
- BlogSpot Blog – The Smallest Blogger Template I always enjoy seeing what is possible on other systems and web sites. I’m not a hacker by any means, nor would I EVER call myself that (unless I had...
- Modifying Your Blogger Header The Blogger Way A common thing you’ll find when you start blogging is that you’ll want to make changes to your template. If you use the Blogger blog system, it can be easy...
- Blogger.com Help – Lesson 20 – Pick New Template Layout Using the Blogger interface to pick a new template layout couldn’t be any more simple. This page is by far the easiest to understand, and perhaps one you might never...
- BlogSpot Blog – The Skin Tag Explained One feature you’ll find in a BlogSpot blog is the ability to use variables for defining the fonts and colors used on your blog. Using variables within the skin tag...

I’ve never been to fond of blogger, and have always told everyone I know to host a blog themselves, but this guide will definitely help a lot of people struggling to customize their blogger themes/templates/blogs.
Cheers
Hi Jim, thanks for taking time to let me know! I’ll be writing a lot more on templates in the coming months. I think I’ve found a method of working through an entire template and making some sense of it for many people. Maybe. haha
Thanks for this. Blogger has some odd tags that I’ve been wondering about. Not too hard though. I just found a three-column layout and pasted the html into the layout. I’d like to get a little more in-depth later though and this will be helpful.
Tiffany (I sooo want to call you Tiff or Tiffy),
Adding a third column, while trivial in concept, may not be so trivial due to how your template is defined. What you essentially want to do is add another
(notice the opening and closing tags?).
But you cannot just add another div and expect it to work. There is some CSS involved, and you need to make sure the other components accept the new div and still format properly.
What I would recommend that you and others who want to really dig into their templates is to create another blog on blogger, and then copy your ‘live’ template into the new blog. Make all the changes you want on your new blog and see how things look. You can hack your way to excellence this way and learn what in the world is going on in the template at the same time.
If you do go this route, be sure to set aside some time for hair-pulling and sleepless nights (for those obsessive-compulsives among us), I’m one.
When you do this, all your content and sidebar widgets will not be there, so might want to put a few things in there as placeholders, just to give it that ‘almost a copy of my blog’ kind of look. After all, all you really want to do is add another div.
Where is that website that allows you to do what you said?
Um Wayne. Is there a simple way (like pasting) a code into the html to create a third column? Or do you still have to freaking take shit out of your code, change it, add new stuff? I get so mad when I find an awesome template but it’s not “well written”. And keeping your widgets is a bitch. I don’t know how you do all this stuff. I found a website where all you do is paste the html as a widget in your sidebar to change your template. No losing widgets or anything. Sweet!
Hey there BakerWatson! I think you’ll find the answer to those questions in some of the upcoming articles in the Lesson series. In fact, the remaining articles in the series will be great for what you want to know and much more perhaps.
Thanks for letting me know where you are at with your blog. I’ll be sure to include the info you want.
As for modifying where things appear, yes, you would have to modify the HTML directly. The colors and fonts can be changed via the administration panels, but if you want something in a different location, it’s about modifying the HTML.
Wayne,
This is good. I’ve been meaning to get around to this, especially on the ‘title’ info as you just happened to use as an illustration. I can follow just a smattering of HTML, but nothing complex. Usually I find myself going to look at something similar to what I want and then I try to replicate it with the specifics of what I need. Of course this is mostly very basic type stuff only.
As you know I use a standard template from Blogger. In general I don’t want to make many changes on the whole as I’m pretty satisfied with it. I would like to learn, however, how to change the appearance of the text in the title and description in the header. I suspect I will continue to use a photo as the main component, but at times I might want to change the photo. I would like to be able to change the font and placement of the title and description at times to have it ‘fit’ the particular photo I might want to use. I can see how to change the color, but (correct me if I am wrong) I presume to change the font type and size or the exact placement I will have to edit the HTML.
I’m in no real hurry to make such changes, but I can see I would like to have the ability down the road.
Baker