设计制作自己Blogger的模板

我们可以看出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'>

<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>

<div class='clear'> </div>
</div> 
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div></div> 
</body>
</html>

在上面的代码中我们并没有把每个Widget的详细Html复制过去，但是保存之后你会发现所有的Widget已经被Blogger执行了。接下来只要写入控制各个区域的CSS，并修改相应的“ID”即可。

如果你做了漂亮的模板，欢迎来Show一下。

blogspot博客优化、Google blogger博客赚钱推荐

2012年9月28日星期五

设计制作自己Blogger的模板

1 条评论: