自定义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到各栏。按此方法就可以构建自己想要的模板啦。

Leave a Reply

Your email address will not be published. Required fields are marked *