Racy YW 翊玮 - Racy YW 翊玮 [WE]

2008-04-30

BLOGBUS模板代码修改教程 - [我們的影音]

在无数次心力交瘁之后，终于把博客新版面整体修改好了。只有右侧导航条没有弄完。这次过程中。基本把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> -  - BlogBus.com</title>这是标题。就是显示在IE最顶上那里的描述。
<meta name="description" content="," />
<meta name="keywords" content=",,Blog,Blogger,BlogBus" />

</head>以上就是你内容的HEAD 标签，就是给全部内容做一个初步的构架。
<body>从这里开始就是你的主体了。
<div id="wrap">DIV其实就是一种格式还是什么我不记得了，反正这里说 <div id=""> 引号里的内容就是这个归类的类别下面与这里相同。
<div id="outerContainer">
<div id="container">

  <div id="header">
   <h1><a href="http://" title="首页"></a></h1>
  </div>这部分我删除了。上面CSS部分有定义这部分的样式，我这里删除了所以就算在CSS里面定义，上面CSS的内容也失去效果了。删与不删都无所谓，但你不想要HEAD 这里必须删。

  <div id="content">这是你的日志部分
    这是日志内容标签，这个是不能更改的。这个标签是BLOGBUS特有的。这个标签的意思就是日志。意思就是说日志显示在这里。比如还有<!~updata~!>就表示最近更新。这些标签对应的是什么功能，在BLOGBUS帮助页面能找到。

http://bangzhuzhongxin.blogbus.com/logs/5452759.html 就这里查询吧。我已经找到了。
    <div class="pages"></div>
  </div>

  <div id="sidebar">这里就是定义右侧导航的内容了。
   <div id="customExtra">
   </div>
   <div id="description"></div>    这是博客描述
   <div id="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">用户名  </td>
          <td><input type="text" name="username" maxlength="40" class="inputLogin" /></td>

           </tr>
           <tr>
          <td>密　码  </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></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='' 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就行。
    
   </div>
   <div id="update">这是最近更新
    <h2>最新日志</h2>这里面的文字也被我修改了。
    
   </div>
   <div id="lastComments">
    <h2>最新评论</h2>最近你收到的评论。
    
   </div>
   <div id="archives">
    <h2>存档</h2>
    
   </div>
   <div id="links">
    <h2>链接</h2>
    
    
   </div>一直到这里都不需要解释什么啦！。按照<H2></h2>里面的文字知道什么意思的。
   <div id="misc">
    <p id="counter">访问统计: </p>这是访问统计，就是你网站的流量计数。大家可以把访问统计改成你自己想要的字。比如你博客有1000流量。然后你是这样修改的（从访问统计那开始。）你把访问统计替换成了，你是个来访问我的孩子。你博客就会显示，你是第1000个来欢迎我的孩子。其实这个不难理解。
    <div id="customHtml"></div>
    <div id="subscribe">
     <span id="rssImg"><a href=""><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">© Powered by <a href="http://www.blogbus.com/">BlogBus.Com</a>. 2002-, 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>模块。你别把那些内容放在这个两个<div></div>之间。

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

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

这样就不会出问题的。

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

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

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

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

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