自定义blogger模板

   十二月 02, 2011       MGT@blogger

---

From Evernote:

自定义blogger模板 Clipped from: http://www.truevue.org/node/217

这两天在研究了blogger 的模板，一开始怎么也看不懂，一堆代码，毫无头绪。后来把一个最简单的模板下来研究，是XML格式的，用IE打开，看了里面的结构，比较容易看懂，结构如下:

<divid="out-wrapper">  <divid="wrap2">      <divid="head-wrapper">      <divid="content-wrapper">          <divid="crosscol-wrapper">          <divid="main-wrapper">          <divid="sidebar-wrapper">      <divid="footer-wrapper"> 

基本结构搞清了，就可以修改你的模板了，我一直想做一个三栏的模板，下面我们就可以试一下啦.

具体方法：

1. 拷贝 CSS 定义中的 sidebar-wrapper 为 sidebar-wrapper1与sidebar-wrapper2：

#sidebar-wrapper{width

: 

400px

;    

float

: 

right

;    word-wrap: break-word;    

overflow

: 

hidden

;  

}#sidebar-wrapper1{width

: 

200px

;    

float

: 

left

;    word-wrap: break-word;    

overflow

: 

hidden

;  

}#sidebar-wrapper2{width

: 

200px

;    

float

: 

right

;    word-wrap: break-word;    

overflow

: 

hidden

;  

}

这样就有三种class的定义, 注意上面的width变化，float值的变化。 2. 修改 outer-wrapper,main-wrap,与foot-wrapper的width，改为1000左右。 3. 修改模板如下：

<divid="out-wrapper">  <divid="wrap2">      <divid="head-wrapper">      <divid="content-wrapper">          <divid="crosscol-wrapper">          <divid="main-wrapper">          <divid="sidebar-wrapper">               <divid="sidebar-wrapper1">                   <b:sectionclass="sidebar"id="sidebar"preferred="yes">                              <divid="sidebar-wrapper2">                   <b:sectionclass="sidebar"id="sidebar"preferred="yes">                     <divid="footer-wrapper">