自定义blogger模板

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

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

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

<div id="out-wrapper">
 <div id="wrap2">
     <div id="head-wrapper">
     <div id="content-wrapper">
         <div id="crosscol-wrapper">
         <div id="main-wrapper">
         <div id="sidebar-wrapper">
     <div id="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. 修改模板如下：

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

这样就可以得到一个三栏的模板了，然后可以添加widgets到各栏。按此方法就可以构建自己想要的模板啦。