写在之前，十一长假结束后本Blog的更新频率将降低，实际上这几天也的确很累，强烈建议本Blog的读者订阅本Blog的全文输出Rss：
http://feeds.feedburner.com/eool（推荐）http://feed.feedsky.com/ifly（延迟时间较长）
希望可以交到更多的朋友，欢迎交换链接
继上一篇我们细节性的分析了Blogger beta的结构之后，这次我们会从总体上概括Blogger beta模板的组成（via Hoctro），并最终可以做出自己的模板，或者将其它的模板转换到Blogger beta上来。相信这将是非常令人激动的时刻。一个最好的展现自己个性的机会（你喜欢鱼昨晚上修改过的模板吗？）。
引用文章请尽量注明出处 ^-^
将代码完全折叠起来，我们可以从总体上（上面的图片中）看到Blogger beta的模板结构，以及它们之间的包含关系。请注意“xxxxx-wrapper”标记。
这张图片（点击查看完整图片）是我们把代码的下一级展开之后所看到的，这一级的代码大体展示出模板的组成。上一张图片我们看到了几个“xxxxx-wrapper”标记，现在你又会发现在每个“xxxxx-wrapper”标记之后都会出现“b:section”标记，“b:section”标记内是“b:widget”标记。如果我们再继续向下展开代码，里面的内容将是各个Widget标记的实际Html执行代码，本篇文章主要研究Blogger beta的主要构成，从总体上把握Blogger beta的组成，因此不再向下深究。
从上面两张图片中我们可以看出Blogger的主要组成有四个区域：页首、文章区域、侧边栏、页脚。
下面我们将详细讨论这四个区域：
1.页首
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='brand new blog (Header)' type='Header'/>
</b:section>
</div>
这一部分在Blog中起的作用就是显示Blog标题和描述。我们可以看到每一个“Section”会包含一个“Class（类）”，所以整个模板中含有四个Class（类），分别显示Header、Main、Sidebar、Footer（从而，我们可以通过修改针对不同区域的CSS来控制模板）。另外，Section也有它的"id"——“Header”。maxwidgets='1' showaddelement='no'这两个参数分别说明了“此区域最多的Widget个数”和“是否显示Add a Page Element选项”
在b:section中只包含了一个Widget，可以看到它的ID是“Header1”，Locked="true"这个参数规定它在Layout设置中是不可移动的。 title='brand new blog (Header)'指定它在Layout编辑中显示的名称 type='Header'会告诉Blogger这是一个Header类型。
2.Main Section
这个区域是Blog的最主要部分，用来显示Blog文章，同时这也是最复杂的部分，如果我们把代码展开就会发现，这部分的代码占了所有Html的80％。
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
这里只要注意 id="main" 以及它的一个widget (id=blog1) 就行了，其它的参数同上一部分类似。
3.侧边栏区域
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='Feed1' locked='false' title='Hoctro"s Place' type='Feed'/>
<b:widget id='HTML1' locked='false' title='html code' type='HTML'/>
<b:widget id='Text1' locked='false' title='a text' type='Text'/>
<b:widget id='Image1' locked='false' title='pic' type='Image'/>
<b:widget id='LinkList1' locked='false' title='link list' type='LinkList'/>
<b:widget id='TextList1' locked='false' title='list' type='TextList'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
相信现在你已经可以很容易的分辨出Section标记，以及它包含的所有Widget（这里包含了所有Blogger里可以添加的Widget）。相信已不用再详细说明，要注意那些“ID”，比如你想要两个“标签”模板在你的Blog上，那么你可以复制相应的Widget，但要确保它们的ID是“独一无二”的，比如“Label1”、“Label2”。
4.页脚部分
这部分是最简单的，因为大多数时候我们不会在这里放太多东西。
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
*自定义部分
或许接下来我们才进入真正自定义模板的主题，我们上面刚才看到的代码并不是一无是处的，把它放在Blogger中的时候它就会起作用。只要我们再加上相应的CSS，我们的Blog就会以任何我们想要的形式展现出来（要懂一点CSS）。
在任何一个已存在的模板中，我们已经完全可以把它转换到Blogger beta中来了。无须复制/粘贴长长的代码，我们只要把上面提到的四个Section复制过去即可。下面是一个示例：
<?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>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
*/
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- 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>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='brand new blog (Header)' type='Header'/>
</b:section>
</div>
<div id='content-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='Feed1' locked='false' title='Hoctro"s Place' type='Feed'/>
<b:widget id='HTML1' locked='false' title='html code' type='HTML'/>
<b:widget id='Text1' locked='false' title='a text' type='Text'/>
<b:widget id='Image1' locked='false' title='pic' type='Image'/>
<b:widget id='LinkList1' locked='false' title='link list' type='LinkList'/>
<b:widget id='TextList1' locked='false' title='list' type='TextList'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div></div> <!-- end outer-wrapper -->
</body>
</html>
在上面的代码中我们并没有把每个Widget的详细Html复制过去，但是保存之后你会发现所有的Widget已经被Blogger执行了。接下来只要写入控制各个区域的CSS，并修改相应的“ID”即可。
如果你做了漂亮的模板，欢迎来Show一下。
6 条评论:
真不错啊，不过对我来说做个模版还是很难
;) 看看我的 http://poisondlo.blogspot.com
还在调试中
对了鱼兄你的发表评论界面是怎么改的？
Hi,鱼，
我不会写css，也不会改ID,我提供个我的模版图片的地址，你可不可以帮我写出来？谢谢，拜托你了
http://s105.photobucket.com/albums/m211/sara0206
Sara
fromsara@hotmail.com
你的文章真的很有用！！我也设计了自己的模板
另外我还无意中发现找到了在blogger中任何地方都能添加widget的方法
想请教关于html标签的问题。我看你的引用里可以使用html 或者head的标签，但是我的却不可以，还有比如script也不行，要怎么样才能使用？我的意思是显示不是运行。
请问LZ，您用的是什么编辑器呢？有展开节点的？
发表评论