eA7Y-Originals(C)

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://ieasy.blogbus.com/logs/7917892.html

本教程所有模板修改基于'变形金刚'，其他模板可能有略微区别。

首先我们来看看Blogbus的模板类型，因为有说明，仅做简单的介绍.
模板设置-新增自定义模板-从变形金刚导入-修改模板
Header 页面共享头信息，我也没看懂，不用改.
Index 主页的源代码，修改达到个性化作用.
Index.logContent 主页文章部分源代码，没必要修改，想改也行.
Log 日志页的源代码，修改达到个性化作用.
Comment 评论框的源代码，没必要修改，想改也行.
Comment.Form 评论框的源代码，没必要修改，想改也行.
CSS 最具有修改价值的CSS，控制着整个Blog外观.
除Header外，一个一个讲。

Index/log
全是HTML标签，看不懂没关系，慢慢来。入门级教程，不做过多解释。
1.
先找到<title><!-- ~ blogname ~ --> - <!-- ~ blogdescr ~ --> - BlogBus.com</title>
这个是博客的标题(浏览器标题栏上显示的文字)
<!-- ~ blogname ~ --> 博客的名字 比如我的 Ea&Y
<!-- ~ blogdescr ~ --> 博客简介 比如我的 Windows Media Player 11 正在播放...
除了这两个是标签外，其他的都是普通文字，于是我们可以开始修改。
范例：
<title><!-- ~ blogname ~ --> - 杏初</title>
改完以后，去掉了很长不适合观看的博客简介(有的简介可能有100多字)，然后把Blogbus换成了个性化的杏初。 那个 - 的符号也是可以修改的，换成&、@、#都随意，整个标题栏完全可以按你的个性定制。
更多：
<title>Ea&Y::我的标题什么标签都不加</title>
<title><!-- ~ blogname ~ --> To <!-- ~ blogname ~ --></title>
.... 多尝试几次，会有很好的效果。
2.最简单又很个性的修改
用平常心去看Index的代码，找到你能找到的汉字，并在博客的首页找到与之对应的。然后修改成你喜欢。
范例：
原 <p id="counter">访问统计: <!-- ~ counter_text ~ --></p>
新 <p id="counter">个人资产 <!-- ~ counter_text ~ --> 万美元</p>
的确是很简单的修改，但是效果绝对不可估计，至于如何改才好玩，符合你的风格，就没我的事拉。
更多：
原 <div id="poweredBy">&copy; Powered by <a href="http://www.blogbus.com/">BlogBus.Com</a>. 2002-<!-- ~ cur_year ~ -->, All Rights Reserved.
新 <div id="poweredBy">&copy; Powered by <a href="http://ieasy.blogbus.com/">杏初</a>. 2002-<!-- ~ cur_year ~ -->, All Rights Reserved.
多尝试几次，会有很好的效果。
3.在博客侧边栏添加你的相片
细心看代码，你就会找到侧边栏的所有代码...
例如：
<div id="sorts">
<h2>日志分类</h2>
<!-- ~ sorts ~ -->
</div>
<div id="update">
那个div的标签我们可以不加，因为它不会取得视觉效果，无意义。<!-- ~ sorts ~ -->是博客分类专用的标签，其它的一些专用标签，Bus的帮助里有说明，我们不用管。
依葫芦画...什么，我们可以再添加一个：
<h2>我的世界</h2>
<a href="点击图片后跳到的网址"><img src="图片地址" alt="图片标题" />
</div>
这样，侧边栏就会多出一栏，上面有你喜爱的图片，点击可以进入喜爱的网址，是不是很酷？当然不添加图片，什么Flash，Pop muice，个人精品文章链接 什么的，完全可以自己个性化。
那么代码放在哪里呢？
你可以放在每一个<h2>....</h2>的前一行，新手最好别放在最前面，这样如果没弄好模板容易错位。
4.Blogbus在博客侧边栏上会留一个小Logo，这样的广告不去掉怎么行...
代码是：
<a href="http://www.blogbus.com/"><img src="http://www.blogbus.com/images/site-v3/link_blogbus.gif" alt="博客快车 — 免费申请个人博客网站 | 博客VIP服务 | 企业博客服务" />
不用修改，删掉就可以了。如果有Logo的化，也可以改成自己的，换掉它！

这样Index的修改就完成了。

Index.LogContent/Comment/Comment.Form
1.看到代码没有，只有一点点，照上一章第二节改就可以了，不用太花心思（如果很花心思也会有好的效果！）。

CSS
最重点的内容，以至于我把代码全部Copy过来，一个一个解释：
<style type="text/css">
<!--
/*
 Style: Transformers_2               //CCS标题，随便取
 Version: 1.0a, build/20070629 //版本号，随便取
 Author: iZ //作者，改成 Ea&Y
 Author URL: http://iz-efpp.blogbus.com   //作者链接，改成http://ieasy.blogbus.com
 Author eMail: zouzheng@blogbus.com  afdzz@hotmail.com //作者邮箱 ...

 Optimal Configuation: Best view in at least 1024*768 dpi, Ture color, Javascript Enabled.
 (c) Copyright 2002-2007 Blogbus Web Team. All Rights Reserved. //信息,看不懂就别改
*/
* {
 padding: 0px;
 margin: 0px; //边距
 border: none; //边框
 list-style: none;
}
body { //主体
 font: normal 100%/150% Arial, Helvetica, sans-serif; 正文字体大小 字体 字号
 color: #B5B5B5;
 background: #000; //背景颜色
}
a { 所有链接的属性
 color: #6287ba; //颜色
 text-decoration: none;  //链接是否有下划线
}
a:hover,a:active { //鼠标移上去时所有链接的属性
 color: #6287ba;
 text-decoration: underline;
}
h2 { //2级标题
 font-weight: normal;
 line-height: 130%;
 color: #CCC;
}
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;
 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 {
 width: 1000px;
 margin: 0 auto;
 background: #000 url(http://public.blogbus.com/blogbus/blog/images/templates/transformer/wrap.jpg) center top repeat-y;
}
#outerContainer {
 width: 1000px;
 margin: 0 auto;
 padding-bottom: 200px;
 background: url(http://public.blogbus.com/blogbus/blog/images/templates/transformer/outerContainer.jpg) left bottom no-repeat;
}
#container {
 width: 1000px;
 margin: 0 auto;
 font-size: 75%;
 background: url(http://public.blogbus.com/blogbus/blog/images/templates/transformer/container.jpg) left top no-repeat;
}
#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 a:hover {
 color: #000;
 text-decoration: none;
}
#description {
 margin-left: 1px;
 padding-bottom: 20px;
 font-weight: bold;
 color: #908D89;
}
#content {
 float: left;
 width: 696px;
 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(http://public.blogbus.com/blogbus/blog/images/templates/transformer/entryHeader.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 {
 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 a:visited {
 color: #CCC;
}
.entry h2 a:hover {
 color: #97C4DF;
}
.entry h2 .sort {
 margin-left: 10 px;
 font-size: 85%;
 font-weight: normal;
}
.entry h2 .sort a {
 color: #CCC;
 text-decoration: none;
}
.entry h2 .sort a:hover {
 color: #97C4DF;
}
.entryBody {
 width: 666px;
 padding: 0 15px;
}
.entryBody a {
 color: #97C4DF;
 text-decoration: none;
}
.entryBody a:hover {
 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 a:hover,.pages a:hover {
 color: #B5B5B5;
}
.entry table a:hover {
 border: none;
}
.pages {
 margin-left: 15px;
}
#sidebar {
 float: right;
 width: 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 a:hover {
 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(http://public.blogbus.com/blogbus/blog/images/templates/transformer/sh2.jpg) left top no-repeat;
}
................................省略
-->
</style>

太多了,懒得写。有没有在里面发现图片地址？把所有CSS里有的图片全部都Download下来，然后对应原模板的样式进行修改，完了后在上传的网络相册（个人是用Ｙupoo.com）或Bus空间，然后把上传后图片的地址与原模板的默认图片地址更换，这时，模板的外观就被真正彻底的改变了。
注意：
没有图片处理能力的  >> 1.自己努力学（比如我） 2.赖着别人帮忙做（别找我） 3.放弃修改（不推荐！）
拥有图片处理能力的  >> 1.请注意模板的设计，不要什么特效都往上加，注意整体效果而不是部分。
                                  2.一切从简，当心模板抢了你文章的风头（比如我）
                                  3.别忘了我
另外，改了图片后，肯能模板的文字颜色会不太协调，那么可以修改Bus的CSS文字代码...具体我也不太懂....
可以利用搜索功能，我似乎看到了很多介绍BusCSS的文章，大家也可以参考。版权考虑，我没有转载，希望大家也这样。

© Powered by Ea&Y.