• 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><!-- ~ 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


    收藏到:Del.icio.us




    评论

  • 请问一下怎么修改作者栏
    就比如说我想把“xxx发表于xxx”移到左边然后把“评论”标签改成“comments”
    在新模板里面好象没有你说的那个模块
  • 不错啊 谢谢你
  • 你实在太强悍了,没细看完,先收藏起来慢慢看了。一定要留个言,非常感谢!以后有问题再来你这啦。:P
  • 你好,看了你的帖子,还有个问题请问:

    像这个模板http://skin-preview.366454.blogbus.com/,也就是新官方模版bloody roses

    怎么把它的背景变成单色?我在CSS里改了背景颜色后,日志部分的背景还是没有变化,也就是中间那快褐色、白色、斜纹的背景是在哪里改啊?INDEX还是CSS?

    如果方便的话请回复我下,在这里或者在我blog里回复,我会去看的,谢谢!
    Racy回复伊放勋说:
     看了一下。额 是在css里面改。 日志的背景颜色应该是在哪,我忘记了。但我知道是需要单独改的。。你仔细在这教程里面找找,我应该写了。我半年没 改过这东西了 ,都不记得了。。
    2009-02-02 10:22:09
  • <p id="counter">访问统计: <!-- ~ counter_text ~ --></p>这是访问统计,就是你网站的流量计数。大家可以把访问统计改成你自己想要的字。比如你博客有1000流量。然后你是这样修改的(从访问统计那开始。)你把访问统计替换成了,你是<!-- ~ counter_text ~ -->个来访问我的孩子。你博客就会显示,你是第1000个来欢迎我的孩子。其实这个不难理解。




    #- - 我完全不懂啊 您写的辛苦 我看得也好辛苦= =。
    不过就是这个啊。我刚刚把它弄到index里面。
    然后有显示出来。不过字体很大阿 跟我前面的完全搭不上- -
    不好意思 我弱弱的请你帮我看看 然后教我怎么弄- -

    谢谢!
    Racy回复karen说:
    额 我没看懂你得意思
    2009-01-29 02:12:23
  • 恩~又学到东西哟
    其实css一点都不难~语法也很简单~只是如果看书的话不如对这代码试着修改,谢谢你的教程>m<
  • 头一次认认真真的看完一篇模板代码教程。
    写得很详细,而且易懂。
    一些专业网站上的教程写得过于复杂,专业。
    我总是没有耐心看下去。
    现在好了,解决了。
    更加坚定了我搬来这里的决心。
    哈哈。
  • 第一次见写的那么详细的代码教程.
    实用.
    Racy回复小鬼 ,说:
    觉得实用就好好看吧
    2008-12-31 11:56:24
  • 恼火····还是弄不来·······
  • 我今天大一期末作文都没怎么写,看着大家美丽的模板,自己却连音乐播放器都弄不来,心里真是有够郁闷!
    音乐播放器到底怎么弄啊?T_T
    Racy回复Claire说:
    我用的是九天SKY的
    2008-12-19 22:23:37
  • 你好,我是bus刚注册的,可是对于代码这些又很白痴,看了你的日志觉得你应该很厉害吧,不知道可以帮我改下么。谢谢哦,我的qq 254314598
  • 太可怕了。。。完全看不懂。。。。5555555555。。。好挫败啊~~~
    我只想把顶图改一下都不会~~~555555
    Racy回复a'huan说:
    ……|| 慢慢来
    2008-12-03 16:34:35
  • 好吧,我承认我真的是个笨蛋,把自己的博客弄得乱七八糟,惨绝人寰T_T
    决心要好好选个时间来好好学习一下你的无数次心力交瘁的过程……
    安~
    Racy回复智齿小姐说:
    …… 安……
    2008-11-24 20:19:10
  • 太感动了 最近正在纠结这个模板!
    Racy回复fayfaychen琳菲说:
    别纠结了~把自己给纠结 老了……
    2008-11-16 15:27:31
  • 终于找着一篇比较详细的教程了,真是爱死你了,收着了,慢慢研究学习~
    Racy回复智齿小姐说:
    你千万别爱死我~ 我死了就没人教你了~~
    2008-11-11 22:49:38
  • 我是代码白痴。。。。
    看到那么多代码,眼睛都花了
    可否帮我弄啊?
    Racy回复Miss.Bread说:
    ……~ 我没时间啊~ 没看我博客都很久没更新了
    2008-11-09 11:08:35
  • 好长,等有时间再慢慢拜读。
    我想请教一个问题,我也是导入原有的模板,然后改的。但是,我发现日记无法全部显示。
    而且,所谓的传统模式,以后的友情链接什么的都要自己加,能麻烦你给个代码么?
    Racy回复hahaxiao说:
    友情链接不用自己一个一个往里面加 你注意看BUS自己的 帮助文件。至于你为什么日志无法全部显示。可能跟你代码错误有关。
    2008-08-28 15:43:34
  • 已经没关系了,我还是觉得换风格蛮麻烦。以后真的需要你的帮助,我会发邮箱给你的。

    谢谢你的热情。

    午安。
    Racy回复雨后觉说:
    嗯~ 不用谢。
    2008-06-19 09:34:52
  • 我这个人比较愚昧,好吧。我现在只想问一个问题。

    你来看看我的新模版,是简约风格2。

    我想知道,该怎么把首页简介中文章内容的字体颜色和点击某一日志标题后进入的内页(也就是内页,显示全文内容的那个。)字体的颜色全部变成普通的黑色,而不是那种暗淡的灰色。

    先谢谢了,我知道你一定懂的。

    看得出来,你是一个富于耐心和勇气的人。请你把一些操作步骤和修改后的代码(要全部代码,否则我不知道在哪里。)全部发到我博客里来。

    这是我最初的请求。也是今天唯一的愿望。

    早安。
    Racy回复雨后觉说:
    我在你BLOG回给你了~
    2008-06-17 09:37:43
  • 嗯,看到了有用的~~~留個腳印!
    Racy回复live*cafe说:
    呵呵· 欢迎
    2008-06-10 08:50:54
  • 是不是以为我用的是新版,不能这样改啊?
    Racy回复大猫说:
    我估计是这样啊
    因为我看到大部分都有的。
    2008-05-26 18:13:53
  • 请问这个是怎样实现的啊,就是 阅读全文 和 评论的,我用了很多办法都没搞懂,看你源代码是这个,不知道怎么做的,<a href="/logs/21234777.html">阅读全文</a> | <a href="/logs/21234777.html#cmt">在我左边 27</a>
    Racy回复大猫说:
    额……
    @ | 阅读全文 | 在我左边

    这是我的源文件。
    放在Index.LogContent里。实际上我这里没动。只是“在我左边”
    以前是评论我改成了这个。你把这段代码复制到Index.LogContent末尾试试。
    2008-05-26 14:37:05
  • 很想学啊,可是,看起来很复杂呢。你真有耐心:)
    Racy回复zzy说:
    呵呵。
    因为我是湖南人嘛。
    湖南人吃得苦,耐得烦,霸得蛮,不怕死 :-)
    其实这个挺容易的
    2008-05-25 19:15:42
  • 这个好诶。。。但是我看不懂。。。
    Racy回复king说:
    哎呀 我都写得很详细的
    你自己摸索一下嘛
    2008-05-25 00:57:55
  • ..很迷茫啊...VB课程已经把我推进火炕了...
    CSS....
    Racy回复Sibyl说:
    CSS其实很简单的啊
    分类进行设置……
    2008-05-24 10:07:56
  • 好强大的教程阿!
    Racy回复jedal说:
    …… 哈哈 谢谢你光临。
    2008-05-21 08:41:26
  • 哈哈~不错不错~
    很详细哦~
    PS.我也有Bus美化教程.
    在我博客里.
    比较早期的...
    搜索下^^
    Racy回复NetPuter说:
    哈哈 我去看看
    看你写得怎样
    2008-05-12 20:50:35
  • 对了,想说 :
    新博感觉不错,简单的好!
    Racy回复&柒尛潇_说:
    呵呵 以前很多人都说我博客太花了 反而不好 所以改简单了。
    2008-05-08 15:55:42
  • 你真是强悍啊...
    辛苦你了...
    Racy回复&柒尛潇_说:
    哈哈 小CASE。 你搬来BUS不?
    2008-05-08 15:56:08