加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

博客模板大变脸(实用代码)diy博客必备

(2007-04-22 14:19:18)
分类: *博客教程* -欢迎学习-
 
一改变BLOG标题大小的代码:
 
36px为标题文字的字体大小
#000000表示文字效果(显影)的颜,direction=2表示发光效果的强弱,数值可自行设定,自己觉得合适即可。
banner .title td{color:#ffff66;}表示标题文字的主颜色
banner table{background:#transparent; filter:alpha(opacity=85); border:0px solid #000;}这个是文字及其外框的设置:background:后面的值为标题外框的颜色效果;opacity=85是表示文字的透明度,值越小越透明;border:0px表示外框线条的粗细,数值越大边框线条越粗,数值设为0表示边框隐藏。

 
改变BLOG标题字体的代码:
font-family:隶书  这里可自己更换!
 

 
二页面宽度的代码:
 
参数说明:
.bodyTop 指的是页面顶部的宽度,控制了 banner(就是题图)的宽度。
.bodyBg 指的是整个页面的宽度,其值最好与上者相同(也可以自行变化)。
.bodyBottom 指的是页面底部的宽度,其值最好是与上面相同 。
.feeds .text 指的是正文部分的宽度(也就是文章部分的宽度) 。
.label 指的是面板的宽度(其值加正文宽度的值应略小于整个页面的宽度)。
.photo 指的是形象照片面板的宽度(其值同上) 。
.callboard 指的是公告栏的宽度(其值同上) 。
.links 面板(也即最新留言、最新评论等面板)宽度(其值同上)。
.calendar 日历的宽度(其值同上)。
.sysBr180 这个值比较特殊,其值同以上各面板宽度近似,但不一定相同大家应当根据自己设置的宽度进行调节。
width 后面的数字就是你要修改的宽度值,可根据自己的需要设置。
面板的宽度值大约为190左右;如果要改成全屏,整个页面总宽度约为995-996。
不过要更改模板宽度的话建议面板的宽度不必改,只需用代码中的前四个参数就行了。

三博客改变背景代码:
 
注意了:覆盖图片地址的时候,千万不要把代码中:("页面大背景图片地址") 中的“”去掉,否则显示的是白色,没有图片效果!
 
滚动的大背景代码:
repeat 重复,当图片的大小不够的时候会以平铺显示
scroll 卷轴,大背景会随着右边滚动条拉动的时候而滚动
 
固定的大背景代码
fixed 固定,大背景不会因为你拉动滚动条而滚动
 
背景透明代码:
 
使用说明:
       找到你喜欢的图片(1024*768规格),把它存在你的博客里,具体方法参考无限制上传图片的方法 然后把图片地址覆盖在代码中的("页面大背景图片地址")上面,找一个已经有内容的模块添加这段代码,就能改变你的BLOG背景了,具体用以上那一种代码,看你个人喜好了!
关于上传图片和怎么得到图片地址请参考:无限制上传图片的方法
 
添加方法:
 1,控制面板----首页内容维护----定义空白模板----新建,创建模块标题,点击粘贴代码----保存并返回;

 2,控制面板----定制我的首页----点添加模块----点选创建好的模块标题---勾上并保存,移动新建面板位置--保存设置。做第二步的目的是将建立好的模块在博客个人首页里呈现出来。

不会添加代码的朋友请参考:关于添加特效的详细介绍(图片)

四自定义博客各部分背景代码:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
代码说明:
 
页面大背景(body)   指的是整个博客的最大背景,由于中间部分被覆盖,所以显示的效果只是两边的部分。
题图上背景(logo)   是指所在的横长条的背景。
题图下背景(banner)   是指博客名字 博客地址 复制 ﹥收藏本页)所在的那部分的背景。
logobanner宽各为770logo40,banner134,单位均为像素。
题图下的菜单背景”  是指“HOME...搜索┆帮助┆退出”等字所在的那个横长条的背景。
正文标题栏上翻时的图片   指的是文章发表了之后文章标题的图片。
面板标题栏下翻时的图片   指的是点击标题后出现标题后的后面的图片。
面板的背景图片    指的是左边比如我的文章列表什么的背景图片。
正文背景    是指整个文章文字所在的大背景!
以上代码可以更改博客各个部分的图片,更换的图片尺寸要和原尺寸一模一样,关于上传图片和怎么得到图片地址请参考:无限制上传图片的方法

如果想叫某一部分背景或者全部变的透明的话,在以上代码中大括号里面内容换上background:#transparent就能实现透明效果,
 
例如横幅代码:
<STYLE type=text/css>.banner
{background:url("头部大横幅图片地址") no repeat no scroll!mportant;}</STYLE>
 
以上代码中红色部分全部改成:background:#transparent
 
示范:
<STYLE type=text/css>.banner{background:#transparent}</STYLE>

添加方法:
 1,管理博客----首页内容维护----定义空白模板----新建,创建模块标题,点击粘贴代码----保存并返回;

 2,管理博客----定制我的首页----点添加模块----点选创建好的模块标题---勾上并保存,移动新建面板位置--保存设置。做第二步的目的是将建立好的模块在博客个人首页里呈现出来。

不会添加代码的朋友请参考:添加模板代码的教学幻灯片
 

 

转自技术博客

进入csbeyond's blog

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有