<

在无数次心力交瘁之后，终于把博客新版面整体修改好了。只有右侧导航条没有弄完。这次过程中。基本把BLOGBUS的代码弄得比较清楚了。为了不让广大博友跟我一样研究巴士代码到心力交瘁，所以放出该教程。。。

我的博客是基于变形金刚修改的，所以放出变形金刚这个模板的修改方法。其余模板大都差不多。首先第一步。进入BUS的模板设置。

点击传统久模板

进入之后。自己点击新增自定义模板。设置好 点击修改

先导入模板 变形金刚。

然后就开始修改了。

先说明：

HEADER 我们可以不用管。里面都是BUS官方的一些代码。一般都是一些打开网页时的功能设置。

不懂的不修改。我没有动一点。

INDEX 就是你的博客内容页。稍后详细介绍。这是很重要的一个。

INDEX.LOGCONTENT 就是你博客首页的日志页部分内容。里面一般是不需要修改的。最好是不修改，如果修改容易造成不对称与杂乱无章的情况。要修改，就可以修改<阅读全文><评论>这些标签。比如大家可以观察，我把<评论>改成了<在我左边>。还有编辑，引用。我直接删除了。

log 日志页。就是你在详细阅读某日志时，里面的属性。其实也不必修改什么。

comment 就是你博客读者在准备评论你的日志时显示的那部分。与LOG 页同理。也是与LOG页相联系的。

comment.form就是你日志页的评论发表框。对代码不熟悉的也不必修改了。硬是要修改，就修改内容和INDEX.LOGCONTENT类似的内容吧。

CSS 这部分和INDEX页是修改模板最重要的两个部分。INDEX是内容,CSS就是你博客模板的样式。你首先需要把你博客内容先想好了，之后再开始CSS的修改。修改时，第一步从CSS开始下手。

我先把变形金刚的代码复制过来。

首先总体解释一下：STYLE TYPE=TEXTCSS 这是CSS语言的开头，懂英文的都知道STYLE 是风格的意思，呵呵。废话不说。

大家看到 BODY 后面一个{} 其实这就是一个对BODY 的样式定义 后面有许多类似的 道理与这个相同。

好现在开始分项解释。

style type=textcss
!--
 
 Style Transformers_2
 Version 1.0a, build20070629 这是这个模板版本的解释。如果想尽量个性化 你自己在这里随便改成什么吧。
 Author iZ 这是这个变形金刚模板的创造者，你可以改成你自己的名字。
 Author URL httpiz-efpp.blogbus.com 这是作者的网站
 Author eMail zouzheng@blogbus.com  afdzz@hotmail.com 作者的邮箱

 Optimal Configuation Best view in at least 1024768 dpi, Ture color, Javascript Enabled.
 (c) Copyright 2002-2007 Blogbus Web Team. All Rights Reserved. 这些都是关于一些版权的说明，然后是第一句的意思是 最佳浏览分辨率为1024*768像素。如果大家觉得麻烦 这段可以完全删除（从VERSION到 RESREVED.）

 {
 padding 0px;
 margin 0px;
 border none;
 list-style none;
}
body {这是主题样式
 font normal 100%150% Arial, Helvetica, sans-serif;这是主体的字体。大家可以不修改。
 color #B5B5B5;这是主体样式的颜色
 background #000;这是背景颜色。#000 就是代表黑色。这里需要说明一下，颜色代码可以在PHOTOSHOP里面查询到。会PS的应该都知道怎么查，如果你想找红色，就在色板里面调试成你喜欢的红色，然后查询这个颜色代码。比如如果是#436bf 你就把BACKGROUN 后改成#436BF背景就成红色了。
}
a { 这是你博客上面链接的样式。
 color #6287ba;链接的颜色
 text-decoration none; 这是文字装饰 后面的NONE表示没有的意思。
}
ahover,aactive {这个标签的意思是 鼠标停在链接上时的样式
 color #6287ba;同样 链接字的颜色
 text-decoration underline;这是文字装饰 后面的意思 是 有下划线。 如果你想不停留时都有下划线，你就把上面的这个标签 后面的NONE 替换成 UNDERLINE 但是个人认为 那样不好看，所以还是别改了。
}
h2 { 这里需要说明的就是，你在修改INDEX页面的时候会发现H2 嗯。这里就说的那个H2里面字的标签。
 font-weight normal;字体的宽度 普通
 line-height 130%; 
 color #CCC; H2标签里面的字的颜色
}
input {这个标签我也没弄懂什么意思 反正我是没修改
 padding 1px;
 font-size 100%;
 font-family Arial, Helvetica, sans-serif;
 color #7F7C79;
 border 1px solid #363636;
 background #000; 同样是背景颜色
}
textarea {这是正文区域的样式标签
 padding 2px 3px;这是填料 发现
 font-size 100%;这是字体尺寸
 font-family Arial, Helvetica, sans-serif;字体
 color #7F7C79;字的颜色
 border 1px solid #363636;这是边框 就是文字下面隔开日志的那根线的颜色 1PX表示粗细 应该是这样 我默认的
 background #000;背景
 overflow auto;这是溢出的意思 自动。
}
.button {这是里面按钮的标签 不用修改 默认够好看了
 width 48px;
 height 20px;
 padding 0 2px 3px;
 font-size 100%;
 font-weight bold;
 line-height 20px;
 color #999;
 border 1px solid #222;
 background #292929;
 cursor pointer;
}
#wrap {WRAP 妈妈的 这个弄得我心力交瘁了 首先说这个，大家注意我博客的那个框框没？其实这是三幅图拼凑起来的。顶图底图和WRAP这个标签。其实WRAP 大家先看这幅图:

 width 1000px;图的宽度 1000 所以你在P你的WRAP标签图片时 也要是P出宽度为1000PX的图
 margin 0 auto;
 background #000 url (httppublic.blogbus.comblogbusblogimagestemplatestransformerwrap.jpg) center top repeat-y;这是这个图的地址，你做好图之后，上传一个带外链的相册，把外链地址拷贝到这个（）括号里面，REPEAT-y的意思就是 重复显示这幅图片 注意一定要是Y Y 就是YES的意思 就是要重复显示。
}
#outerContainer {这是我的底图标签
 width 1000px;宽度同理
 margin 0 auto;
 padding-bottom 200px;
 background url(httppublic.blogbus.comblogbusblogimagestemplatestransformerouterContainer.jpg) left bottom no-repeat;同理，做好你的底图之后，大小就可以参考这个括号里面的图的 大小来P。先把括号里面的地址复制下来，然后放到IE地址栏里打开，具体多大我忘了 反正宽度一定是1000.

这是我的底图，大家就直接在这上面点属性 然后看大小吧。我的是按本来的大小来的。

}
#container {这是顶图，道理与OUT CONTAINER一样。
 width 1000px;
 margin 0 auto;
 font-size 75%;
 background url(httppublic.blogbus.comblogbusblogimagestemplatestransformercontainer.jpg) left top no-repeat;
}

与OUT CONTAINER同理。

大家看我的OUT CONTAINER的图。

现在要说说这三副图了。

大家看到这个框框没，嗯。首先先把本来的图下载下来，用PHOTOSHOP把三个全部打开。然后把三张图的高度加起来，新建一个1000*740像素的图。背景颜色，随便。大家把三个图分别放进来，按顶不 WRAP部分 和OUTCONTAINER 底图部分 复制过来，按顺寻摆好，大家发现，正好可以拼成一个框框了，至于框框为什么没有博客页面上下无论多长，这个图都无限放大，这就是为什么刚刚我强调WRAP部分要YES了 对。是因为重复WRAP那张图。所以，不用我解释了把。

自己作图的话，那个框框是画出来的，不需要一定按照原图那样精确画框框的位置。

知道原理之后，大家开始P顶图与底图把。新建一个1000*440大小的图，自己P好 保存PSD格式，先不管

在新建一个1000*10的图片 背景为黑色，当然你想让你日志那部分背景为其他什么颜色。，背景颜色就随便你改咯。然后保存PSD格式，先不管。

再新建一个1000*290大小的图。作为底图，道理一样。保存PSD 。

最后新建一个 1000*740的图。把那三张PSD打开，然后复制到最后新建的图里面拼接在一起。

然后画框框。嗯 对 不需和变形金刚一样原图，那样那么精确，然后呢。大家想像我一样有透明感觉的话，就沿着画出来的框框边沿画出一个一样大的矩形工具的矩形，黑色。透明度40%(视个人而定)

再用剪裁工具，固定大小，1000*440 从最顶上开始宽度从左至右拉，拉到边缘 ，高度自然成了440像素，所以不必担心了。然后保存JPEG格式，顶图完成。

然后再退一步，回到合在一起时的样子，裁剪工具变为1000*290 从底部左侧往右拉，这样同样得到底图。剩下的就是WRAP 保存。然后上传。 地址替换各自上面标签括号里的。就大功告成了。这其实是这个模板最关键的地方。
#header {这是INDEX里面HEADER部分 的样式…… 我删掉了 很丑。在你做出来的图片上……
 height 165px;
 text-align center;
 padding-top 118px;
}
#header h1 {同样删除了。
 margin 0 270px;
 font-size 180%;
 font-weight bold;
 color #FFF;
}
#header h1 a {意思根据之前介绍的，大家应该能明白了吧。
 color #FFF;
}
#header h1 ahover {
 color #000;
 text-decoration none;
}
#description {
 margin-left 1px;
 padding-bottom 20px;
 font-weight bold;
 color #908D89;
}
#content {这是内容部分的样式。
 float left;这是内容在左边
 width 696px;宽度。696 所以以后你日志要发图片时注意 宽度不要超过这个数目。
 margin-left 23px!important;
 margin-left 12px;
 padding 0;
 text-align left;文字靠左边对齐
 line-height 165%;
 letter-spacing 0.05em;
}
.entry {这是登入条目标签就是你日志页 开头部分
 margin-bottom 30px;
}
.entryHeader {同理，这是那个日志页那个缩略图 的样式
 margin 18px 0 0 15px;
 padding-left 70px;
 text-align left;
 background url(httppublic.blogbus.comblogbusblogimagestemplatestransformerentryHeader.jpg) left top no-repeat;大家可以打开这个地址，就可以知道，这个图是在哪了 所以你可以修改成为你自己的窄片 图片就和这个一样大吧。
}
.date {这是日期样式，就是你日志页上面显示日期的样式
 padding-top 14px;这些就不再介绍，不懂查字典把。前面或多或少有介绍，注意看前面了
 font-size 110%;
 font-weight bold;
 color #97C4DF;
 text-align left;
 line-height 100%;
}
.entry h2 {这是日志里H2的标签 我没改动
 padding 5px 0 25px 0;
 font-size 120%;
 font-weight bold;
 color #CCC;
 text-align left;
 line-height 140%;
}
.entry h2 a {这也是链接的样式 日志页 和进入标签的链接
 color #CCC;
 text-decoration none;
}
.entry h2 avisited {这是 链接你点击过之后的样式
 color #CCC;
}
.entry h2 ahover {这个介绍过 不再介绍
 color #97C4DF;
}
.entry h2 .sort {这是你归类的样式 BLOGBUS分类管理 分类你的日志。
 margin-left 10 px;
 font-size 85%;
 font-weight normal;
}
.entry h2 .sort a {
 color #CCC;
 text-decoration none;
}
.entry h2 .sort ahover {
 color #97C4DF;
}
.entryBody {
 width 666px;
 padding 0 15px;
}
.entryBody a {
 color #97C4DF;
 text-decoration none;
}
.entryBody ahover {
 color #AEAFAF;
 text-decoration underline;
}
.entryBody p {
 margin 0 auto 18px;
}
.entry table {
 text-align center;
 margin 0 auto;
}
.entryFooter {
 width 666px;
 margin-left 15px;
 padding 8px 0 2px 0;
 color #7F7C79;
 border-bottom 1px solid #222;
}
.entryFooter a,.pages span {
 color #908D89;
 text-decoration none;
}
.entryFooter ahover,.pages ahover {
 color #B5B5B5;
}
.entry table ahover {
 border none;
}

上面一大片为什么不解释。因为大部分都差不多了。自己认真看了前面的介绍，应该都能看懂了。我没学过电脑都会，相信大家可以和我一样。
.pages {INDEX里面有这个标签，所以这是定义 那个标签的样式。
 margin-left 15px;
}
#sidebar {边栏的属性。就是你右侧的导航条。
 float right;靠右
 width 235px;宽度为235px 所以你在INDEX里面修改 SIDEBAR的内容时，放上去的图片宽度不能超过235PX
 margin 158px 24px 0 0!important;
 margin 158px 12px 0 0;
 padding 0;
 color #908D89;
 text-align left;
 line-height 160%;
 table-layout fixed;
 word-break break-all;
 overflow hidden;
}
#sidebar ul {这是导航条上的 链接属性。
 margin-top 8px;
 list-style none;
 padding 0 3px;
}
#sidebar li {这是 你好友链接的样式
}
#sidebar a{
 color #908D89;
}
#sidebar ahover {
 color #97C4DF;
 text-decoration none;
}
#sidebar input {
}
#sidebar h2 {
 display block;
 width 235px;
 height 18px;
 padding 4px 0 5px 5px;
 font-size 110%;
 font-weight bold;
 color #282828;
 text-align left;
 background url(httppublic.blogbus.comblogbusblogimagestemplatestransformersh2.jpg) left top no-repeat;这个图什么样子，自己打开这个网址看吧。你一看就知道是什么地方了。你自己按照那个大小修改自己喜欢的吧。
}
#calendar {
 margin 0 0 15px 2px;
 padding 5px 0;
 font-weight bold;
}
#calendar table {
 width 220px;
 margin 0;
 padding 0;
}
#calendar td {
 font-size 80%;
 text-align center;
 line-height 150%;
 word-break keep-all;
 text-transform lowercase;
}
#calendar .calendar_h {
 font-size 100%;
 font-weight bold;
}
#calendar .calendar_h a {
 display inline;
 margin 0 4px;
 text-decoration none;
 background none;
}
#calendar .calendar_h ahover {
 text-decoration none;
 background none;
}
#calendar td a {
 color #7F7C79;
 font-weight bold;
 text-decoration none;
 background none;
}
#calendar td ahover {
 color #7F7C79;
 border none;
}
#calendar .week {
 padding 2px;
 font-size 100%;
 text-align center;
 white-space nowrap;
}
.day {
 text-align center;
 white-space nowrap;
}
#calendar .day a {
 color #97C4DF;
 font-weight bold;
}
#calendar td.today {
 color #CCC;
 background #292929;
}
#calendar td.today a {
 color #CCC;
 background #292929;
}

上面这部分全部是在定义你的日历样式。我觉得这个很好看，所以什么都没改了。至于要改。可以百度一下。懂英文的基本也看得懂，不懂英文看字典也可以看出来。
#login {
 margin-bottom 15px;
}
#login td {
 padding-bottom 4px;
}
#login tr {
 padding 6px;
 text-align right;
}
#login table {
 margin 12px 0 0 30px;
}
.inputLogin {
 width 122px;
}
#tagline {
 margin-bottom 25px;
}
#tagline ul {
}
#tagline li {
}
#search {
 margin 0 0 20px 30px;
}
.inputSearch {
 width 110px;
 margin-right 10px;
}上面这一部分就是在定义登陆和搜索还有TAG这个部分的样式，因为我的删除了，所以我这个也没管。有朋友想保留这些，修改的话 根据前面的介绍也不难改了。
#sorts {
 margin-bottom 25px;
}这是分类的标签
#update {这是你的更新的标签
 margin-bottom 25px;
}
#lastComments {这是你评论标签
 color #838D6F;
 margin-bottom 25px;
}
#archives {
 margin-bottom 25px;
}
#links {这是你好友链接的标签
 margin-bottom 25px;
}
#links img {好友图片链接的样式
 margin 5px 2px;
}
#links a img {
 border none;
}
#misc {INDEX里面有这个标签，什么用 我也没研究来…… 寒！！！！
 margin 0 0 25px 0;
 padding 0 3px;
}
#misc ahover {
}
#customHtml {
 margin 8px 0;
 padding 4px 0;
 text-align left;
 overflow hidden;
}
#subscribe, #subscribe a {这是订阅标签
 margin-bottom 15px;
}
#rssImg {
}
#rssTxt {
 margin-left 8px;
}
#poweredBy{从这里开始 基本不用改了
 font-size 80%;
 padding 10px 0 0px 0;
}
#context {
 margin 15px;
 color #AEAFAF;
 text-align left;
 word-break break-all;
 overflow hidden;
}
#context a {
 color #AEAFAF;
 text-decoration none;
}
#context avisited {
 color #AEAFAF;
}
#context ahover {
 color #97C4DF;
}
#comments {这是评论标签
 width 550px;
 margin 30px 0 20px 15px;
 padding-top 5px;
}
#comments h2 {
 margin-top 0;
 margin-bottom 20px;
 padding 0;
 font-size 110%;
 font-weight bold;
 color #CCC;
}
#comments li {
 margin 0 0 30px 0;
 list-style none;
 line-height 150%;
}
.commentBody {
 margin 10px 10px 6px 6px;
 color #B5B5B5;
 text-align left;
}
.commentPost  {
 margin-top 10px;
 padding-bottom 2px;
 color #7F7C79;
 border-bottom 1px solid #222;
}
.commentPost a  {
 color #908D89;
}
.commentPost ahover {
 color #B5B5B5;
 text-decoration none;
}
.recmtBody {
 padding 5px;
 color #777;
 background #222;
 border 1px solid #444;
}
#commentForm {
 margin 0 0 50px 15px;
}
#commentForm h2 {
 margin-top 0;
 margin-bottom 20px;
 padding 0;
 font-size 110%;
 font-weight bold;
 color #CCC;
}
#commentForm table {
 margin-left 5px;
}
#commentForm td {
 padding-bottom 4px;
}
#commentForm tr {
 padding 6px;
}
.pages {
 clear left;
 margin-bottom 40px;
}
.pages a {
 color #856E2D;
}
#footer {
 clear both;
}
#copyright {
 color #856E2D;
 font-size 9px;
 font-family Verdana, Arial, Helvetica, sans-serif;
 padding-bottom 20px;
 text-align center;
}
--
style
CSS到这里解释完毕。我再一次心力交瘁了。所以休息一天。明天4月30 所以再来写INDEX页的。。

今天继续：修改INDEX项。我一行行解释。不用修改或者没必要修改的我就不做解释了。节省时间和我的精力。。！！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="http://racyyw.blogbus.com/files/12084433040.ico" >
<link rel="bookmark" href="http://racyyw.blogbus.com/files/12084433040.ico" >这两个<link rel>的标签就是表示当打开你自己博客时 IE地址栏网址左边那个小图标和当收藏了你博客时，在收藏夹里面的小图标。可以改。你自己可以P，32*32大小，保存GIF格式，然后百度搜索，转换ICO网页。按照那个网页操作，就可以转换了，然后上传到BLOGBUS文件里，然后地址知道之后，替换上面的HERF “”里的地址就OK了。
<title><!-- ~ blogname ~ --> - <!-- ~ blogdescr ~ --> - BlogBus.com</title>这是标题。就是显示在IE最顶上那里的描述。
<meta name="description" content="<!-- ~ blogname ~ -->,<!-- ~ blogdescr ~ -->" />
<meta name="keywords" content="<!-- ~ blogname ~ -->,<!-- ~ blogdescr ~ -->,Blog,Blogger,BlogBus" />
<!-- ~ header ~ -->
</head>以上就是你内容的HEAD 标签，就是给全部内容做一个初步的构架。
<body>从这里开始就是你的主体了。
<div id="wrap">DIV其实就是一种格式还是什么我不记得了，反正这里说 <div id=""> 引号里的内容就是这个归类的类别下面与这里相同。
<div id="outerContainer">
 <div id="container">
 
  <div id="header">
   <h1><a href="http://<!-- ~ domain ~ -->" title="首页"><!-- ~ blogname ~ --></a></h1>
  </div>这部分我删除了。上面CSS部分有定义这部分的样式，我这里删除了 所以就算在CSS里面定义，上面CSS的内容也失去效果了。删与不删都无所谓，但你不想要HEAD 这里必须删。
  
  <div id="content">这是你的日志部分
    <!-- ~ diarys ~ -->这是日志内容标签，这个是不能更改的。这个标签是BLOGBUS特有的。这个标签的意思就是 日志。意思就是说日志显示在这里。比如还有<!~updata~!>就表示最近更新。这些标签对应的是什么功能，在BLOGBUS帮助页面能找到。

http://bangzhuzhongxin.blogbus.com/logs/5452759.html 就这里查询吧。我已经找到了。
    <div class="pages"><!-- ~ pagetxt ~ --></div>  
  </div>
  
  <div id="sidebar">这里就是定义右侧导航的内容了。
   <div id="customExtra">
   </div>
   <div id="description"><!-- ~ blogdescr ~ --></div>    这是博客描述
   <div id="calendar"><!-- ~ calendar ~ --></div>显示日历的部分 需要说明的是，你需要加新的标签进去 比如，你想在你登陆与 博客描述之间加入日历。 在刚刚那个帮助网站里找到显示日历的标签，然后打入代码<div id ="calendar"><!--~calendar~--!> </div>  这个格式到最后一起集中进行解释，先把代码每行的意思解释清楚。

<div id="login">登陆标签
    <h2>登陆</h2>这中间的字可以随意修改。大家应该注意到了 我把这个原始模板拥有的登陆搜索与TAG内容已经删除了。
    <form method="post" action="http://www.blogbus.com/members/login.php?Goto=/blog/">
         <table width="0" border="0" cellspacing="0" cellpadding="0">
           <tr>
          <td nowrap="nowrap">用户名&nbsp;&nbsp;</td>
          <td><input type="text" name="username" maxlength="40" class="inputLogin" /></td>
     
           </tr>
           <tr>
          <td>密　码&nbsp;&nbsp;</td>
          <td><input type="password" name="password" maxlength="40" class="inputLogin" /></td>
           </tr>
           <tr>
          <td colspan="2"><input type="submit" name="loginsubmit" value="提 交" class="button" /></td>
           </tr>
     
         </table>
    </form>
   </div>
   <div id="tagline">
    <h2>Tag</h2>
    <ul><!-- ~ cats ~ --></ul>
   </div>
   <div id="search">
    <form action="http://search.blogbus.com/search" method='get' target='_blank'>
     <input type='text' name='q' class="inputSearch" /><input type='hidden' value='<!-- ~ blogid ~ -->' name='b' /><input type='hidden' value='blog' name='dir' /><input type='submit' value='搜 索' class="button" />
    </form>
   </div>

到这里为之，就是登陆的代码和搜索的代码。其实我觉得这个东西没必要需要的。所以要删就从<div id="login">到上面这个</div>为之
   <div id="sorts">这是日志分类的标签。
    <h2>日志分类</h2>大家可以注意到 这个日志分类被我改成了dairy sorts所以 这个<H2></H2>里面的文字内容是可以修改的。随意修改。但是别打两三行子…… 寒！ 反正不要超过235PX就行。
    <!-- ~ sorts ~ -->
   </div>
   <div id="update">这是最近更新
    <h2>最新日志</h2>这里面的文字也被我修改了。
    <!-- ~ update ~ -->
   </div>
   <div id="lastComments">
    <h2>最新评论</h2>最近你收到的评论。
    <!-- ~ last_cmt ~ -->
   </div>
   <div id="archives">
    <h2>存档</h2>
    <!-- ~ archive ~ -->
   </div>
   <div id="links">
    <h2>链接</h2>
    <!-- ~ links ~ -->
    <!-- ~ new_links ~ -->
   </div>一直到这里都不需要解释什么啦！。 按照<H2></h2>里面的文字知道什么意思的。
   <div id="misc">
    <p id="counter">访问统计: <!-- ~ counter_text ~ --></p>这是访问统计，就是你网站的流量计数。大家可以把访问统计改成你自己想要的字。比如你博客有1000流量。然后你是这样修改的（从访问统计那开始。）你把访问统计替换成了，你是<!-- ~ counter_text ~ -->个来访问我的孩子。你博客就会显示，你是第1000个来欢迎我的孩子。其实这个不难理解。
    <div id="customHtml"><!-- ~ custom_html ~ --></div>
    <div id="subscribe">
     <span id="rssImg"><a href="<!-- ~ rss_url ~ -->"><img src="http://www.blogbus.com/images/site-v3/rss.gif" alt="RSS1.0" /></a></span>
     <span id="rssTxt"><a href="http://help.blogbus.com/logs/2003/12/55530.html" target="_blank">什么是RSS?</a></span>
    </div>这是RSS订阅。额。大家如果想漂亮点的话我等下再介绍RSS订阅功能。你也可以就用这个。；
    <a href="http://www.blogbus.com/"><img src="http://www.blogbus.com/images/site-v3/link_blogbus.gif" alt="博客快车 — 免费申请个人博客网站 | 博客VIP服务 | 企业博客服务" />
    </a>大家看这部分。这是那个巴士网站的LOGO。这个代码记住。等下我会说明，哎要不就在这里说明吧。A HERF 后面引号里面就是你要链接的地址，IMG SRC就是你图片链接时，图片的地址。alt就是对这个链接的描述。嗯。如果大家想换成自己设计的LOGO 就是把上面链接地址改成你博客地址，图片地址就改成你LOGO在网上外链的地址，描述就是你博客的名字了。很简单。
    <div id="poweredBy">&copy; Powered by <a href="http://www.blogbus.com/">BlogBus.Com</a>. 2002-<!-- ~ cur_year ~ -->, All Rights Reserved.这就是废话一片了。也是对版权的说明。<!~~cur_year~-->的意思就是现在多少年。比如BLOGBUS创建于2002 到现在就是2008 大家如果没修改，看你博客 你会发现这个部分显示的是2002-2008.如果到2009年了 就自动更改为2002-2009了。
    </div>  
   </div>
  </div>
  
  <div id="footer">
  
  </div>
 </div>
</div>
</div>
</body>主题内容就到这里结束。基本默认的标签我也解释完毕。现在开始怎么修改可以让自己博客变得更加漂亮。

首先。你可以在你右侧导航条里，放上你自己喜爱的图片。宽度不超过235px

这是显示图片的代码。

<div align=Right><img src="http://racyyw.blogbus.com/files/12088741190.gif" alt="Racyyw" /></div>这个跟图片链接不一样，这只单纯的是一张图显示在右侧导航条上。

<div align=Right>意思就是靠右对齐。意思就是这幅图是紧挨着右边的。</div>

每一个<div>标签定义完一段内容时，要在内容最后</div>意思就是完结。就是到这个</div>结束。不然的话，如果你没这个，你所有后面的内容全部靠右了。…… 这样会弄得乱七八糟的。切记！

<div align=Right>那么 Right改成left就是靠左，center就是居中了。这需要自己判断。有的时候，图片在左，字在右边，更加好看。就看你自己怎么觉得或者怎么灵活的运用了。我是教不会的，靠大家的审美观了。只要知道怎么运用这个<div align=*></div>就好了。

大家也可以添加自己喜欢的网站的图片链接，或者自己有相册的话，就把自己的相册推按链接地址弄上去也行。

<div align=Left><a href="http://racyapex.blogbus.com"><img src="http://files.blogbus.com/racyyw.blogbus.com/files/12091737590.jpg" alt="相册" /></div><p></a> 这就是一个标准的图片链接代码<div align></div>不用解释。大家发现</a>对 这就是表示显示成为链接的样式完结。不然，后面的所有内容全部成链接的样子，文字也是。如果大家真要修改的话。就直接复制这里的代码吧。只是引号里面的内容修改就而可以了。

文字也必不可少。大家可以像我一样，先说一段介绍自己的话。

<MARQUEE scrollAmount=1 direction=up height=15><DIV align=center><FONT color=#abf511><STRONG>Racy Hyw</STRONG></FONT></DIV></MARQUEE> 这个代码表示。文字从下往上这样滚动，然后呢 font就是字体的意思 color颜色 这里大家看了前面的介绍都知道了，这里介绍就是<strong>粗体的意思。然后大家看这个代码完结的部分，</FONT></DIV></MARQUEE> 大家都可以发现所有的代码开始就有对应的结束。其实这还是有规律可寻的。……

<DIV align=center><FONT color=#908D89><STRONG>Gmail:Racyyw@gmail.com</STRONG></FONT></DIV>不想滚动，代码就这样。不用解释。上面解释完了。

<DIV align=CENTER><FONT style="BACKGROUND-COLOR: #908D89" color=#000000>The moment</FONT></DIV></STRONG> 这个也是一个文字样式。就是文字背景和文字颜色。background 后面的是背景颜色，color是字体的颜色。大家看我博客右侧吧。就知道是什么意思了。

现在要说的是，这些东西放在哪？可以乱放吗？答案是！ 绝对不能！ 因为可能造成博客的杂乱无章。！！

怎么放？看我说明：

1.绝对不能插一脚到已经有的代码块里。比如人家一个

<div id="links">
    <h2>链接</h2>
    <!-- ~ links ~ -->
    <!-- ~ new_links ~ -->

</div>模块。你别把那些内容放在这个两个<div></div>之间。

2.要在<body></body>主体里面。

3.最简单的办法就是。比如你想在日历下面放一张图或者自我介绍的文字。你就啾准了</div>后面写一个<h2></h2>实际上就是多一栏区域出来了，然后放在这个标签的外面。比如我的。

<h2></h2>
<div align=Left><a href="http://racyyw.yupoo.com/albums"><img src="http://racyyw.blogbus.com/files/12088717740.gif" alt="相册" /></div><p>
<h2></h2>

这样就不会出问题的。

从哪里新开一个区域。这就看博友自己怎么设计，怎么摆放了。

嗯。介绍到这里，基本上都已经介绍完毕了。

最后再说说一些blogbus 站外一些实用的博客程序吧。

RSS订阅：http://www.feedsky.com/index.html

看到我左边的Rss订阅吗？你也可以，进这个网站之后，上面会提示你怎么做的。有代码 自己新建一个<div align=*></div>代码放这之间。大家应该熟悉运用这个代码标签。

我也是替换了BLOGBUS原始的RSS订阅功能。

饭否。www.fanfou.com 这个网站提供的是一个发布你自己即时消息内容的程序。像我右边，你可以经过设置之后，通过MSN，GTALK，QQ，手机等方式发布你正在干什么，或者你在想什么，或者你一切想说的。大家可以在这个程序里看到的。也同样是有源代码。自己在这个网站里里可以找到怎么设置。

还一个相册幻灯片播放：www.yupoo.com我是用的这个网站的相册。里面有一个玩转YUPOO 里面有一个类似以前flicker的功能。也提供源代码.

网络音乐播放器，现在播放器很少。以前有一个www.lifepop.com 最开始的写博客的时候就一直用，到现在也经过3年时间，不过突然已经破产了。以前这个网站的功能确实强大。不过…… 已经用不聊了，我到现在也没找到好的替代品…… http://www.91china.net/ 也还不错 去这里看看吧

这些源代码插入到哪里？

请跳回上面看看第三步。然后一切一切的修改办法，适合所有BLOGBUS代码，只要根据自身的情况和变化而定。代码是死的人是活的……

然后所有INDEX代码都要写到这个<html></html>里面。…… 最最最基本的！！

</html>
大家可以在我博客上点右键 调出源文件查看我的代码。有问题不懂可以E-MAIL给我Racyyw@hotmail.com

我写得很幸苦，所以大家请尊重我的劳动成果。我不想被别人引用如果需要引用或者转载。注明出处http://Racyyw.blogbus.com 作者RACY