Banana Stew: Deconstructing Blogger Beta HTML Template Editing

Thursday, August 31, 2006

Deconstructing Blogger Beta HTML Template Editing

I've been trying out Blogger Beta with a test blog at http://fttxnews.blogspot.com. Today, Blogger turned on the ability to edit the raw templates. It's a new and wonderful world of strange tags and interesting operators.

For my own benefit, and perhaps the benifit of a few others, here's a deconstruction of my new Beta template.

[Update 09/01 around 2:30pm] This page has been (1) slashdotted and (2) innundated with comments that it is too hard to read. I have posted a large font version at http://www.wilkinsons.com/Bananna/BetaCodeLargeType.htm for those who are having trouble reading this. You'll have to return here to post, though. Also, please link to this post directly, not to the large font version. That one might be moving around a bit.

Latest update: 9/5/2006

This post is very, very long, so I've hidden it behind a cloak of invisibility (may not work on all browsers). Click here to reveal the gory details.

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html 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'> <head>	The usual html header stuff.
<title><data:blog.pageTitle/></title>	Here's something interesting. New code for the blog title within the standard <title> tags. <data:blog.pageTitle/> inserts the name of the Blog from your template settings.
<b:include data='blog' name='all-head-content'/>	And here's a line that appears to enter any blog template head information. I don't know that there is any right now. Maybe it's a placeholder.
<b:skin><![CDATA[ /* * Blogger Template Style * * Sand Dollar * by Jason Sutter * Updated by Blogger Team */	The <b:skin> tag encloses the template. There's a </b:skin> at the bottom of the template part of the header. ~~I'm not sure what the <![CDATA[ is doing. Perhaps enclosing the skin data?~~ According to an anonymous commenter: On <![CDATA[: That's simply making it so that they don't have to replace every instance of < with the < entity, since there are <Variable> XML-style declarations within the block. CDATA just tells XML not to parse the data within the block until it reaches the closing ]]>, when it resumes normal XML processing. You can <![CDATA[]]> anywhere outside a tag in an XML document. Note that the template has been "Updated by Blogger Team".
/* Variable definitions ==================== <Variable name="textcolor" description="Text Color" type="color" default="#000" value="#000"> <Variable name="bgcolor" description="Page Background Color" type="color" default="#f6f6f6" value="#d2dbff"> <Variable name="pagetitlecolor" description="Blog Title Color" type="color" default="#F5DEB3" value="#cccccc"> <Variable name="pagetitlebgcolor" description="Blog Title Background Color" type="color" default="#DE7008" value="#006699"> <Variable name="descriptionColor" description="Blog Description Color" type="color" default="#9E5205" / value="#e6e6e6"> <Variable name="descbgcolor" description="Description Background Color" type="color" default="#F5E39e" value="#9eb0f5"> <Variable name="titlecolor" description="Post Title Color" type="color" default="#9E5205" value="#006699"> <Variable name="datecolor" description="Date Header Color" type="color" default="#777777" value="#993300"> <Variable name="footercolor" description="Post Footer Color" type="color" default="#444444" value="#444444"> <Variable name="linkcolor" description="Link Color" type="color" default="#DE7008" value="#DE7008"> <Variable name="footerlinkcolor" description="Post Footer Link Color" type="color" default="#968a0a" value="#3a9900"> <Variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#DE7008" value="#DE7008"> <Variable name="sidebarcolor" description="Sidebar Title Color" type="color" default="#B8A80D" value="#993300"> <Variable name="sidebarlinkcolor" description="Sidebar Link Color" type="color" default="#999999" value="#009949"> <Variable name="bordercolor" description="Border Color" type="color" default="#e0ad12" value="#006699"> <Variable name="bodyfont" description="Text Font" type="font" default="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-Serif" value="normal normal 99% 'Trebuchet MS',Trebuchet,Verdana,Sans-Serif"> <Variable name="headerfont" description="Sidebar Title Font" type="font" default="normal bold 150% Verdana,Sans-serif" value="italic bold 121% Verdana,Sans-serif"> <Variable name="dateHeaderFont" description="Date Header Font" type="font" default="normal bold 105% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal bold 86% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif"> <Variable name="pagetitlefont" description="Blog Title Font" type="font" default="normal bold 300% Verdana,Sans-Serif" value="normal bold 270% Verdana,Sans-Serif"> <Variable name="titlefont" description="Post Title Font" type="font" default="normal bold 160% Verdana,Sans-Serif" value="normal bold 117% Verdana,Sans-Serif"> */	Some of the layout styles are defined here as "variables". Note that they are commented out (/* */), which I assume means that they are only used by Blogger Layouts, not in the actual html coding. Essentially, this is a place to store all of those font and color choices you can make in the Layouts. Some of the template choices don't seem to have all of these options. I picked one with a lot of flexibility, and I get to set a lot of color and font options. Color of post text Page background color Title text color Title background color Heading description btextcolor Heading description background color Post title text color Post date header text color Post footer text color Post links text color Post footer links text color Post visited links text color Sidebar title text color Sidebar links text color The color of any borders The font of all of the text in the body The font of all of the text in the sidebar The font of the date headers The font of the blog title The font of post titles That's a lot of flexibility.
body { margin:0px; padding:0px; background:$bgcolor; color:$textcolor; font-size: small; } #outer-wrapper { font:$bodyfont; } a { color:$linkcolor; } ... Lots o' deletions ... /** Tweaks for layout editor preview */ body#layout #outer-wrapper { margin-top: 0; } body#layout #main, body#layout #sidebar { margin-top: 10px; padding-top: 0; }	I deleted a lot of the styles here, as there's nothing all that special about them. However, it is interesting to see the "variables" defined above showing up here in the styles. For example, the body wrapper is defined with a background of "$bgcolor" and a text color of "$textcolor", both of which are defined above. Then, at the bottom are some "Tweaks for layout editor preview." Setting some padding and margins, but I couldn't tell you why or what for.
]]></b:skin> </head>	Here's the closer for the <![CDATA[, <b:skin>, and <head>.
<body> <div id='outer-wrapper'><div id='wrap2'>	Now we start the body, the stuff that actually shows up in a browser. The wrappers are standard stuff that appears in the old templates (and many other styled web pages).
<!-- skip links for text browsers --> <span id='skiplinks' style='display:none;'> <a href='#main'>skip to main </a> \| <a href='#sidebar'>skip to sidebar</a> </span>	~~It's nice that the folks at Blogger are worried about text browsers, but how many text browsers are still out there and do I really care if they read my blog?~~ Text browsers are valuable and necessary tools for the internet and Blogger are Mensa-level geniuses to include this code snippet in their template. (Please stop the harassment now.)
<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='FTTX News (Header)' type='Header'> <b:includable id='main'> <div class='titlewrapper'>	Here's the first expanded widget - the header widget, encased in a standard set of <div> tags. The <b:> tags are new, and appear to be a way to indicate information to Blogger (see more below). This one includes the ID entered in the layout (Header1) and the title (FTTX News) plus some Blogger-specific information about it being locked and of the type "Header". Items listed as "includable" are called later with "include". That's a very nice idea, and one that took me a while to figure out. Includable items that I found defined were: Main = The title and description, then later the main blog content, then later the sidebar content. And this one never gets called with a "include" statement. Some confusion here will hopefully be sorted out later. Comments = The detailed comments postQuickEdit = The icon and code for quick editing from the main page backlinkDeleteIcon = exactly what it says feedLinksBody backlink feedlinks nextprev commentDeleteIcon post flat menu interval toggle posts Interestingly, I can't find a way to move the "Header" layout widget to anywhere else on the layout page. For example, I wanted to put the header over the main content, but not over the sidebar. No dice. Moving it in the template results in a "invalid template" error.
<h1 class='title'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <data:title/> <b:else/> <a expr:href='data:blog.homepageUrl'><data:title/></a> </b:if> </h1> </div>	Very interesting. An embedded "if-then" statement in the template. Another advantage of the <b:> tags. The "data:" construct appears to be the new way to reference what used to be Blogger tags. There are no definitions available yet from Blogger, but I'm guessing the definition of these data objects blog.url = the currnet URL for the blog page blog.homepageUrl = the URL of the homepage of the blog In this case, if the current URL equals the homepageURL (i.e., you're on the main page), then the title doesn't have an embedded link. If you're on another page (e.g. an archive page), then the title becomes a link back to the main page. Pretty slick.
<div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div> </b:includable> </b:widget> </b:section> </div>	And here's where the Blog description get printed out, safely within its own wrapper. Here's another data field description: The blog description (duh!) The wrapper, of course, uses the variable and styles above as defined in the Layout editor by calling the "descriptionwrapper" class defined in the header.
<div id='content-wrapper'>	This is a big division, with all of the content including the main and sidebar. Other than that, nothing special.
<div id='main-wrapper'>	And the wrapper for the main content (not sidebar). Again, nothing special or new.
<b:section class='main' id='main' showaddelement='no'>	This however, is Blogger specific. It defines the main section that shows up in the Layout editor. It also says that it's not possible to add any elements to this section, something that you can experience for yourself in the Layout editor. The main section is for posts only. Personally, I don't use the main part for anything other than posts, so maybe this limitation isn't too bad.
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>	Another widget expanded - the posts. If you note in the Layout editor, this widget has some components that you can add (they show up below). This line appears to indicate the start of the individual page content, but it's not entirely clear what all is going on here. It looks like this one line puts in all of your post content, including the footer, labels, etc.. That's a lot of work in such a small number of characters. It remains to be seen if that will be a problem.
<b:includable id='comments' var='post'> <div id='comments'> <a name='comments'/> <h4> <b:if cond='data:post.numComments == 1'> 1 Comment: <b:else/> <data:post.numComments/> Comments: </b:if> </h4>	The first includable sub-widget is the comments. This widget only prints when you go to a specific entry and are looking at the comments - it's not on the main page of the blog. That's the magic of the include/includable constuct. Again, a nice if-then statement so that if there is only one comment, the blog prints "1 Comment". If there are more than one comments, it prints "# Comments" where # is the number of comments. Another data object here: post.numComments = the number of comments on a specific post
<dl id='comments-block'> <b:loop values='data:post.comments' var='comment'>	Here are the comments themselves. And another nice construct in the <b> tag - a loop. This one appears to loop through the post comments.
<dt class='comment-author' expr:id='"comment-" + data:comment.id'> <a expr:name='"comment-" + data:comment.id'/>	~~I'm not personally familiar with~~ ~~<dl>, <dt>, and <dd>, but I'm guessing that those are standard html tags.~~ dl and dt are used for making lists of terms and their definitions (as pointed out by a rather superior slashdot commenter). Here's another interesting Blogger code construct, "expr:". "Expr:" appears to be a way to generate content for other use, something that used to be done with Blogger tags. In this case, "expr:name='"comment-" + data:comment.id" generates the name field in the <dt> tag (and later in an <a> tag) that is equal to the text "comment-[really obscure number representing this specific comment]".
<b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> said... </dt>	Again with the nice "if-then" constuct. This one makes the comment author into a link if they have a profile URL. Otherwise, it just prints their name. Note that the "nofollow" is automatically included so that blog spammers get no love from the Googlebot.
<dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/></p> </b:if> </dd>	Here's the text of the comment(s), and another "if-then". If the comment has been deleted, then encase the comment in a span of class "deleted-comment". In my stylesheet, that's italics and gray. I imagine this is for temporary deletions or confirmations of deletions. Surely the deleted comments don't just hang around.
<dd class='comment-footer'> <span class='comment-timestamp'> <a expr:href='"#comment-" + data:comment.id' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span>	And here's the comment footer. The "expr:" operator is used to generate a permanent link to this comment and assign it to the timestamp. Another <b:> tag is used to tell Blogger to put up the delete icon if the reader is the author (or so I imagine).
</dd> </b:loop> </dl>	Here endeth the comments coding. Some data objects in this section are: post.comments = some way to know if a comment exists (used in the loop statement) comment.id = the long and obscure integer assigned to a comment by Blogger comment.authorUrl = the URL of the commenter's profile comment.author = the name (or nickname) of the commerter comment.isDeleted = is the comment deleted (duh!) comment.body = the text of the comment comment.timestamp = what do you think?
<p class='comment-footer'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Post a Comment</a> </p>	This prints a little "Post a comment" link at the bottom of the individual post pages. Notice how flexible the "expr" operator is here. It generates a link within a <a> tag poining to a URL and defining a click action. Nice. More data objects: post.addCommentURL = the URL where someone can enter a comment on a specific post post.addCommentOnclick = the "onclick" action for entering a comment on a specific post
<div id='backlinks-container'> <b:include data='post' name='backlinks'/> </div>	Here's where the backlinks counter gets generated. Pretty simple - nothing like the comments.
</div> </b:includable>	And that's the end of the includable sub-widget for comments.
<b:includable id='postQuickEdit' var='post'> <b:if cond='data:post.editUrl'> <span expr:class='"item-control " + data:post.adminClass'> <a expr:href='data:post.editUrl' title='Edit Post'> <span class='quick-edit-icon'> </span> </a> </span> </b:if> </b:includable>	This little includable sub-widget adds the "Quick Edit" icon to a post if the reader is the author. If there is a post editing URL, then generate a span containing the quick edit icon. New data objects here are: post.adminClass = not really sure what this tells Blogger, but it's used in a span definition post.editUrl = the URL to edit a specific post
<b:includable id='main' var='top'>	Another incluable "main". The includable "main" is going to need some more defining by folks smarter than I am.
<!-- posts --> <div id='blog-posts'> <b:loop values='data:posts' var='post'> <b:if cond='data:post.dateHeader'> <h2 class='date-header'><data:post.dateHeader/></h2> </b:if> <b:include data='post' name='post'/> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.allowComments'> <b:include data='post' name='comments'/> </b:if> </b:if> </b:loop> </div>	This is the post section, where the actual posts on the main page are printed out. Or so I believe. There's a loop that goes through the posts, and if-then that prints out the date header it exists, and an if-then that prints out the comments section if comments are allowed. New data objects are: post.dateHeader = the date header, apparently only attached to the last post on a specific day blog.pageType = not really sure, but it's probably a way to determine if you're on the main page or an item page post.allowComments = pretty obvious, isn't it? The line" <b:include data='post' name='post'/>" apparently instructs Blogger to print out the post text. So I suppose there is some flexibility here for hacking. I'm guessing that the "<b:if cond='data:blog.pageType == "item"'>" if-then statement is used to include the comment constucts from above if this in an individual item page.
<!-- navigation --> <b:include name='nextprev'/>	This calls the incluable code for next and previous links. Oddly, that incluable hasn't been defined above. So I suppose the order of the includable/include can be flexible.
<!-- feed links --> <b:include name='feedLinks'/> </b:includable>	This one call the incluable code for feed links. The includable close is for the "main" includable - or at least this particular "main" includable.
<b:includable id='backlinkDeleteIcon' var='backlink'> <span expr:class='"item-control " + data:backlink.adminClass'> <a expr:href='data:backlink.deleteUrl' title='Delete Backlink'> <span class='delete-comment-icon'> </span> </a> </span> </b:includable>	Here the incluable for the back link delete icon is defined. And yet another data object backlink.deleteUrl The data object appears to be nicely object-oriented with the "backlink" object having sub-objects like "deleteURL".
<b:includable id='feedLinksBody' var='links'> <div class='feed-links'> Subscribe to: <b:loop values='data:links' var='f'> <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a> </b:loop> </div> </b:includable>	Here is the code snippet for the feed links body includable. This one loops through all of the called links types (var='links') and prints out a hyperlinked pointer to the link URLs. The hyperlink (<a href ...>) includes a URL and type, both of which are constucted on the fly with expr: operators. The target is set to '_blank' so that the links open in a new window. Always a nice touch.
<b:includable id='backlinks' var='post'> <b:if cond='data:post.numBacklinks != 0'> <a name='links'/><h4><data:post.backlinksLabel/></h4> <dl id='comments-block'> <b:loop values='data:post.backlinks' var='backlink'> <div class='collapsed-backlink backlink-control'> <dt class='comment-title'> <span class='backlink-toggle-zippy'> </span> <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a> <b:include data='backlink' name='backlinkDeleteIcon'/> </dt> <dd class='comment-body collapseable'> <data:backlink.snippet/> </dd> <dd class='comment-footer collapseable'> <span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span> <span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span> </dd> </div> </b:loop> </dl> <p class='comment-footer'> <a class='comment-link' expr:href='data:post.createLinkUrl' id='b-backlink' target='_blank'><data:post.createLinkLabel/></a> </p> </b:if> </b:includable>	This is the includable for the backlinks. The first if-then statement checks if there are any backlinks (post.numbacklinks != 0). The != must mean "not equal to", because this section only makes sense if there actually are backlinks. This section prints a label ('links'), followed by a label (defined in the layout options), followed by the backlinks themselves formatted as a definition list. Some data objects in this section are: post.numBacklinks = the number of backlinks on a post post.BacklinksLabel = the label for backlinks defined in the options menus in Blogger post.backlinks = the backlinks themselves backlink.url = the url for the backlink backlink.title = the title of the backlink backlink.snippet = the small snippet of text that shows below a backlink backlink.author = the person who wrote the backlink article backlink.timestamp = what it says post.createLinkUrl = the url used to create a link to this post post.createLinkLabel = the label for the create-a-link link
<b:includable id='feedLinks'> <b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links --> <b:if cond='data:feedLinks'> <div id='blog-feeds'> <b:include data='feedLinks' name='feedLinksBody'/> </div> </b:if> <b:else/> <!--Post feed links --> <div id='post-feeds'> <b:loop values='data:posts' var='post'> <b:if cond='data:post.allowComments'> <b:if cond='data:post.feedLinks'> <b:include data='post.feedLinks' name='feedLinksBody'/> </b:if> </b:if> </b:loop> </div> </b:if> </b:includable>	This is the includable for feed links. The main if-then-else statement checks to see if the current page is an item page or not. Again, "!=" must be "not equal to". If the current page is not an item page, then print the Blog feed links. If the current page is an item page, then print the post feed links. For non-item pages, another if-then checks that there actually are some feed links. If they exist, then the feeds are printed out inside a set of <div> tags by calling the feedLinksBody includable, which I assume is somewhere below. The passed data to the includable is feedLinks, as opposed to post.feedLinks, which is used below on the post-specific links. For the item pages, an if-then checks to see if comments are allowed. Apparently, feeds aren't displayed if comments aren't enabled. I'm not sure why that particular restriction exists. If comments are enabled, then a second if-then checks that feed links exist. If so, then the post-specific links are printed out inside a set of <div> tags by calling the feedLinksBody includable with post.feedLinks as passed data.
<b:includable id='nextprev'> <div id='blog-pager'> <b:if cond='data:newerPageUrl'> <a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'><data:newerPageTitle/></a> </b:if> <b:if cond='data:olderPageUrl'> <a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'><data:olderPageTitle/></a> </b:if> <b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'>Home</a> </b:if> </div> <div class='clear'/> </b:includable>	I'm running low on steam for today, so the rest of these are a bit terse. I'll try to fill them in later. The includable for next and previous post links.
<b:includable id='commentDeleteIcon' var='comment'> <span expr:class='"item-control " + data:comment.adminClass'> <a expr:href='data:comment.deleteUrl' title='Delete Comment'> <span class='delete-comment-icon'> </span> </a> </span> </b:includable>	The includable for the comment delete icon.
<b:includable id='post' var='post'> <div class='post'> <a expr:name='data:post.id'/> <b:if cond='data:post.title'> <h3 class='post-title'> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h3> </b:if> <div class='post-header-line-1'/> <div class='post-body'> <p><data:post.body/></p> <div style='clear: both;'/> <!-- clear for photos floats --> </div> <div class='post-footer'> <p class='post-footer-line post-footer-line-1'><span class='post-author'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <data:post.author/> </b:if> </span> <span class='post-timestamp'> <b:if cond='data:top.showTimestamp'> <data:top.timestampLabel/> <b:if cond='data:post.url'> <a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a> </b:if> </b:if> </span> <span class='post-labels'> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if> </span> <span class='post-comment-link'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a> </b:if> </b:if> </span> <span class='post-icons'> <!-- email post links --> <b:if cond='data:post.emailPostUrl'> <span class='item-action'> <a expr:href='data:post.emailPostUrl' title='Email Post'> <span class='email-post-icon'> </span> </a> </span> </b:if> <!-- quickedit pencil --> <b:include data='post' name='postQuickEdit'/> </span> </p> <p class='post-footer-line post-footer-line-2'/> <p class='post-footer-line post-footer-line-3'/> </div> </div> </b:includable>	The includable for the post itself. This one is the master and calls many of the little ones above.
</b:widget> </b:section> </div>	And we have finally reached the end of the main post widget. Phew!
<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='Image1' locked='false' title='' type='Image'> <b:includable id='main'> <b:if cond='data:title != ""'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/> <br/> <b:if cond='data:caption != ""'> <span class='caption'><data:caption/></span> </b:if> </div> <b:include name='quickedit'/> </b:includable> </b:widget> <b:widget id='Label1' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url'><data:label.name/></a> </b:if> (<data:label.count/>) </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget> <b:widget id='HTML1' 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:widget id='Feed1' locked='false' title='Latest Comments' type='Feed'> <b:includable id='main'> <input id='displayMode' type='hidden' value='true'/> <input expr:value='data:feedUrl' id='feedUrl' type='hidden'/> <input expr:value='data:numItemsShow' id='numItemsShow' type='hidden'/> <input expr:value='data:showItemDate' id='showItemDate' type='hidden'/> <input expr:value='data:showItemAuthor' id='showItemAuthor' type='hidden'/> <input expr:value='data:locale' id='locale' type='hidden'/> <input expr:value='data:timeZone' id='timeZone' type='hidden'/> <input expr:value='data:feedReaderJsonBaseUrl' id='feedReaderJsonBaseUrl' type='hidden'/> <input expr:value='data:feedWidgetRefreshIntervalSec' id='feedWidgetRefreshIntervalSec' type='hidden'/> <h2><data:title/></h2> <div class='widget-content'> <ul id='feedItemListDisplay'> <b:loop values='data:feedData.items' var='i'> <li> <span class='item-title'> <a expr:href='data:i.alternate.href'> <data:i.title/> </a> </span> <b:if cond='data:showItemDate'> <b:if cond='data:i.str_published != ""'> <span class='item-date'> - <data:i.str_published/> </span> </b:if> </b:if> <b:if cond='data:showItemAuthor'> <b:if cond='data:i.author != ""'> <span class='item-author'> - <data:i.author/> </span> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget> <b:widget id='Text1' locked='false' title='Administrative Notes' type='Text'> <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:widget id='TextList1' locked='false' title='Sources' type='TextList'> <b:includable id='main'> <h2><data:title/></h2> <div class='widget-content'> <ul> <div id='link'> <b:loop values='data:items' var='item'> <li><data:item/></li> </b:loop> </div> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget> <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <div id='ArchiveList'> <b:if cond='data:style == "HIERARCHY"'> <b:include data='data' name='interval'/> </b:if> <b:if cond='data:style == "FLAT"'> <b:include data='data' name='flat'/> </b:if> <b:if cond='data:style == "MENU"'> <b:include data='data' name='menu'/> </b:if> </div> <b:include name='quickedit'/> </div> </b:includable> <b:includable id='flat' var='data'> <ul> <b:loop values='data:data' var='i'> <li class='archivedate'> <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>) </li> </b:loop> </ul> </b:includable> <b:includable id='menu' var='data'> <select id='ArchiveMenu'> <b:loop values='data:data' var='i'> <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option> </b:loop> </select> </b:includable> <b:includable id='interval' var='intervalData'> <b:loop values='data:intervalData' var='i'> <ul> <li expr:class='"archivedate " + data:i.expclass'> <b:include data='i' name='toggle'/> <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a> (<span class='post-count'><data:i.post-count/></span>) <b:if cond='data:i.data'> <b:include data='i.data' name='interval'/> </b:if> <b:if cond='data:i.posts'> <b:include data='i.posts' name='posts'/> </b:if> </li> </ul> </b:loop> </b:includable> <b:includable id='toggle' var='interval'> <b:if cond='data:interval.toggleId'> <b:if cond='data:interval.expclass == "expanded"'> <a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'> <span class='zippy toggle-open'>? </span> </a> <b:else/> <a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'> <span class='zippy'>? </span> </a> </b:if> </b:if> </b:includable> <b:includable id='posts' var='posts'> <ul class='posts'> <b:loop values='data:posts' var='i'> <li><a expr:href='data:i.url'><data:i.title/></a></li> </b:loop> </ul> </b:includable> </b:widget> <b:widget id='HTML2' 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>	All of this code is for the sidebar, and I don't have tome to look through it today. I'll try to get to it later.
<!-- spacer for skins that want sidebar and main to be the same height--> <div class='clear'> </div> </div> <!-- end content-wrapper --> </div></div> <!-- end outer-wrapper --> </body> </html>	And, thus endeth the template. Pretty heady stuff that will take some studying.

Labels: administration, Blogger

35 Comments:

Awesome dissection Scott! Will help us all going forward.

By Ramani, at 3:20 PM
On <![CDATA[: That's simply making it so that they don't have to replace every instance of < with the < entity, since there are <Variable> XML-style declarations within the block. CDATA just tells XML not to parse the data within the block until it reaches the closing ]]>, when it resumes normal XML processing.

You can <![CDATA[]]> anywhere outside a tag in an XML document.

By Anonymous, at 12:01 PM
search engine robots are text only browsers predominantly...so making it text only readable for their sake is pretty key?

By Anonymous, at 12:05 PM
Skip links is an accessablility feature. It helps text browsers (including some browsers on mobile devices like cellphones) but more importantly it helps people browsing the site via screen reader. You may not care about these people, but for the blogger team, it's a simple change that will improve access to millions of pages.

By Anonymous, at 12:50 PM
I really wanted to read this, but I can't because your font size is way too small. Increasing text size in FF just mushes your too narrow page design into incomprehensibility.

By Anonymous, at 12:58 PM
Good dissection. I still haven't had the time to look into things, so this is a great starting point for me as I write about these things for the far less technical audience.

By JM, at 1:07 PM
The WC3 provides instruction on how to wrap javascript functions to avoid misinterpretation by the XML processor. Review section: 4.8 Script and Style elements http://www.w3.org/TR/xhtml1/#diffs

The solution is simple, it only requires the script be wrapped within a cdata marked section.

< script..
![cdata[
... unescaped script content ...
]]>
../script >

By Anonymous, at 1:21 PM
I'm posting to inform you that terrorists have hacked your blog and deliberately messed up the whole layout in an apparent attempt to discredit you.

By Anonymous, at 1:44 PM
Whoa. I head out to lunch and the comments explode. Well, explode in a realtive sense, as I ususally get approximately zero. And everyone with the same vaguely Greek-sounding name. Who knew that "Anonymous" was so popular with parents.

Quickly
* Font size: Sorry, there's just not enough room to print all of this in a larger size. I may migrate it somewhere else in a week or so, and hopefully you'll be able to read it there. Other options include copying and pasting the text or browsing through the actual code.
* Text only browsers: I give! I'll update the comment and bow to the now obvious wonders of the text-only browser.
* The various schoolings on coding: Thank you very much. I stopped coding with HTML before style sheets came into vogue, so some of the subtleties of XML are lost on me. I'll update the page with your insights as I get a chance.
* Terrorists: I would rather fight them here in the blogs of cyberspace than in our streets and schools. Or something like that.

By Scott, at 2:01 PM
This is way too hard to read

By Anonymous, at 2:01 PM
OK! OK!

Here's a large font version for those with small monitors.

Please don't link to it directly, as it may move around a bit.

Scott

By Scott, at 2:50 PM
that terrorist joke was hilarious... another was something i recived by mail:

"is there a human readable version of it?"

:P

By Avatar, at 3:57 PM
The site would be a lot better if it wasnt hardcoded into a 6 inch column in the center of the screen with just as much realestage on each side going unused. What size is it? 6 point text?!

By Anonymous, at 6:10 PM
Yes, yes. I get it. Layout stinks. Poor coding skills. Yadda, yadda.

Thanks for stopping by.

By Scott, at 7:11 PM
Dude, even that 'large font' page had really small fonts that burned my eyes trying to read it.

Please use bigger fonts there, and here in this blog as well...

It's also pretty hard to read this small font on my brail text only browser.
-Artimus

By Anonymous, at 10:11 PM
One use of text-only browsers not mentioned above -- a lot of blind users surf the net with text only browsers -- the text is read aloud to them or translated into dots on a braille terminal. The Web standards are amazingly flexible to provide all sorts of access, and its wonderful that Blogger has taken the time to preserve that accessibility.

By Anonymous, at 2:36 AM
How did you do the Latest Comments on your test blog?

By Anonymous, at 11:36 AM
Do you have any idea what language the <b:if> <b:widget> is in? Doesnt look like javascript or html

--------------
http://www.blogcrowds.com/

By Charlemagne Stavanger, at 11:54 AM
Re: The latest comments field on the test blog.

Blogger Beta lets you include a feed widget. Blogger Beta also automatically creates a feed out of your posts, all comments, and per-post comments.

All you do is put the URL for your comments feed into a Beta widget, and voila. A pretty nice little feature.

This post on Freshblog has more details.

By Scott, at 5:17 PM
Thanks so much for taking the time to write about this. I already use Blogger and have my own customized templates and I've been worried about how much/little I will be able to edit the css/html in the new version.

FYI: Two small typos (1) intereting (2) harrasment

By Lauren, at 11:48 AM
Since you seem to understand this code, any suggestions on where I can find info on how to fix my Blogger template. I can't get Technorati to update my blog; I tried validating it, and got a ton of errors. I managed to fix the ones I put in myself ;<) and I don't think the errors generated by the 2,996 Project graphic in my sidebar will be great enough to choke Technorati, but there are over 50 errors due to the original Blogger template, and I can't figure out how to fix a single one.

So it would be a nice service to your readers to include a link for help on this, if you know where that can be found.

BTW, since I see you can be bought; I'm trying a bribe. I put a link to your blog in my sidebar. Ok, ok, I was going to do that anyway...

By The Wandering Author, at 11:04 PM
Happy Wanderer,

Alas, you give me more cedit than is due. I have not ever used Technorati's services and I am but a mere hacker (in the original sense of the word, not in the Black Hat sense of the word).

I poked around your Blog (very nice tribute, by the way), and it looks like a standard Blogger template. I have heard, however, that Google isn't always all that nice about following the rules. My guess is that your problems are ones that aren't easily solved, and are related to Google/Blogger's disdain for standards.

However, I suggest posting something on the Blogger Help Google Group. Perhpas someone crafier than I (again in the original sense of the word) could provide more assistance.

By Scott, at 1:47 PM
You've done respectful great work!I'll try to step on to the deconstruction work!
I use Chinese,and I find what you posted valueable,so I want to translate some of your work,would that be OK?

By forest, at 11:15 AM
Dear (name consisting of characters that I cannot reproduce),

Thank you for the comments and compliments. Please feel free to translate into Chinese. I can speak a bit of Japanese, but Chinese is beyond my skills.

I would appreciate a link back once the text is translated, but it's not required.

By Scott, at 11:36 AM
I have a simple question, but I don't know how to do it...

I am wondering how to change my labels. Most of my label's are Upper Case with the first letter. A couple of them somehow ended up lower case. Is there any way to change my existing labels?

Thanks for your helpful look at the new blogger beta!

By Jon, at 4:21 PM
Jon,

Actually, I noticed the same thing happening recently.

First, Blogger Beta automatically made all of my new labels lower case - and thought that the lower case versions were different labels from the upper case versions. I eventually made them all lower case (and removed the duplicates) by re-publishing each post individually.

Now, Blogger Beta is randomly deciding which labels are upper case and which ones are lower case.

And recently, Blogger Beta is randomly reverting to older versions of my template. Fortunately, I've backed up a few old copies so I could restore them. I'd bet most other bloggers haven't.

So, the long answer is that I'd leave the labels as they are for now. Blogger's obviously doing some work under the hood that's affecting the label case. I'd wait for things to settle before going through and trying to re-label everything with the right case.

The short answer is I have no idea how to fix your problem.

I prefer the long answer.

By Scott, at 9:38 PM
For a more complete deconstruction that show what certain new codes and constructs do and explains some syntax, see Johan Sundstrom's post

By Singpolyma, at 10:40 AM
Wow. I just wandered in looking for a way to do that collapsable archive thing.

Anyone know if the beta features going to be avaiable to people with ordinary blogs, or am I going to have to start over?

By BrideOfPorkins, at 10:05 PM
No worries. Just about everything that you can do with your current blog you'll be able to do with the Beta system. And some things you'll be able to do better and easier.

And you could always just stay with the classic template. There's certainly no reason to start over.

By Anonymous, at 3:02 PM
so my question is how do yu add external code? I have tried to add the code for blog (red)

http://www.wordofblog.net/CAMPAIGN-ProjectRed.php

and it gives me errors everytime. Any ideas?

By Anonymous, at 1:02 AM
Muzik,

I've added external code for (e.g.) Google ads and it works. If you can't get a widget to work, I'd suggest going into html template editing and putting in the code directly.

Give more information on the type of errors and I may be able to give a more detailed response.

Good luck,
Scott

By Scott, at 1:03 PM
In my dubious adventures in tweaking blogger codes, i discovered an answer to your statement:
"Then, at the bottom are some "Tweaks for layout editor preview." Setting some padding and margins, but I couldn't tell you why or what for."

These are the settings that control how your layout looks when you're viewing Page Elements...unfortunately, there's not a lot of detail about this, and if you modify your template in any way, such as adding another sidebar, the layout gets all goofed up and you can spend hours tweaking these settings, and still not be able to view your page elements properly. I've complained to Blogger several times, but as yet, no clear explanation of how to manipulate these items, or what they all do, exactly. It's a process of hit and miss.

Thanks for your page.
Jae Baeli
http://usedbythemuse.blogspot.com

By Jae Baeli, at 2:37 PM
i want a little help.
i want to highlight(means css tweaks here) the comments posted by the author or the owner of the blog. my question is how to find whether the commentor is the owner or not. I use the xml blogger template.

By tarun, at 7:56 AM
Awesome! Very useful. Thanks so much.

By :: Suzanne ::, at 3:16 AM
what a idea... thank you for good info.
Earn Free $1000 Money Online | free easy online jobs

By Rose, at 1:49 PM