注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Ashes of Time

本空间内容皆来源于互联网

 
 
 

日志

 
 

博客大巴blogbus自定义模板教程  

2010-05-22 11:48:16|  分类: 他山之石 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文出自:http://daoban.blogbus.com/

 

1.       使用新版模板的自定义模板功能,首先进入后台模板设置”--“定制模板

博客大巴blogbus自定义模板教程 - 俗人半个 - Ashes of Time
 

选择新增自定义模板

博客大巴blogbus自定义模板教程 - 俗人半个 - Ashes of Time

为新增模板命名,要注意名称不能为空;

博客大巴blogbus自定义模板教程 - 俗人半个 - Ashes of Time

新建好自定义模板后就能在新模板页面看到创建好的模板,点击修改

博客大巴blogbus自定义模板教程 - 俗人半个 - Ashes of Time

可选择从已有模板中导入样式;

博客大巴blogbus自定义模板教程 - 俗人半个 - Ashes of Time

提交后,此时的自定义模板与导入的模板样式相同,如需修改,只需要点击不同的代码块进入不同模块进行修改即可;

比如下图中,我点入“index”代码块中进行修改;

博客大巴blogbus自定义模板教程 - 俗人半个 - Ashes of Time

将前台显示的访问统计更改为看过我的人数有,更改完提交;

博客大巴blogbus自定义模板教程 - 俗人半个 - Ashes of Time

再回到模板设置中选择使用此模板;

博客大巴blogbus自定义模板教程 - 俗人半个 - Ashes of Time

刷新前台页面,就可以看到更改后的效果了,如下图:

博客大巴blogbus自定义模板教程 - 俗人半个 - Ashes of Time
 

基于博客大巴模板变形金刚的代码分析【参考】

博客大巴blogbus自定义模板教程 - 俗人半个 - Ashes of Time
 

1.本教程基于旧模板系统制作,与新模板系统不兼容之处恕不解答。

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

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


全是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>
这样,侧边栏就会多出一栏,上面有你喜爱的图片,点击可以进入喜爱的网址,是不是很酷?当然不添加图片,什么FlashPop 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的修改就完成了。


1.
看到代码没有,只有一点点,照上一章第二节改就可以了,不用太花心思(如果很花心思也会有好的效果!)。


最重点的内容,以至于我把代码全部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:   //
作者邮箱 ...

 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;
}
................................
省略,怎么这么长
-->
</style>

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

  评论这张
 
阅读(7881)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017