怎么设置模板DIY
可以像我的博客一样,添加挂件,加flash呀,改模板呀 方法很多!
自定义新浪博客各处模板
一改变BLOG标题大小的代码:
。banner 。title td{font-size:36px;}
。 banner 。title td{FILTER: glow(color=#000000,direction=2);}
。banner 。title td{color:#ffff66;}
。banner table{background:#transparent;filter:alpha(opacity=85);border:0px solid #000;}
36px为标题文字的字体大小
#00...全部
可以像我的博客一样,添加挂件,加flash呀,改模板呀 方法很多!
自定义新浪博客各处模板
一改变BLOG标题大小的代码:
。banner 。title td{font-size:36px;}
。
banner 。title td{FILTER: glow(color=#000000,direction=2);}
。banner 。title td{color:#ffff66;}
。banner table{background:#transparent;filter:alpha(opacity=85);border:0px solid #000;}
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表示边框隐藏。
--------------------------------------------------------------------------------
二页面宽度的代码:
。
bodyTop{width:900px;}
。bodyBg{width:900px;}
。bodyBottom{width:900px;}
。feeds 。text{width:660px;}
。
label{width:20px;}
。photo{width:200px;}
。callboard{width:200px;}
。links{width:200px;}
。calendar{width:200px;}
。
sysBr180{width:200px;}
参数说明:
。bodyTop 指的是页面顶部的宽度,控制了 banner(就是题图)的宽度。
。bodyBg 指的是整个页面的宽度,其值最好与上者相同(也可以自行变化)。
。bodyBottom 指的是页面底部的宽度,其值最好是与上面相同 。
。feeds 。text 指的是正文部分的宽度(也就是文章部分的宽度) 。
。label 指的是面板的宽度(其值加正文宽度的值应略小于整个页面的宽度)。
。photo 指的是形象照片面板的宽度(其值同上) 。
。callboard 指的是公告栏的宽度(其值同上) 。
。links 面板(也即最新留言、最新评论等面板)宽度(其值同上)。
。calendar 日历的宽度(其值同上)。
。sysBr180 这个值比较特殊,其值同以上各面板宽度近似,但不一定相同大家应当根据自己设置的宽度进行调节。
width 后面的数字就是你要修改的宽度值,可根据自己的需要设置。
面板的宽度值大约为190左右;如果要改成全屏,整个页面总宽度约为995-996。
不过要更改模板宽度的话建议面板的宽度不必改,只需用代码中的前四个参数就行了。
--------------------------------------------------------------------------------
三博客改变背景代码:
滚动的大背景代码:
body {background:url("页面大背景图片地址") repeat scroll!important;}
repeat 重复,当图片的大小不够的时候会以平铺显示
scroll 卷轴,大背景会随着右边滚动条拉动的时候而滚动
固定的大背景代码
body {background:url("页面大背景图片地址") repeat fixed!important;}
fixed 固定,大背景不会因为你拉动滚动条而滚动
背景透明代码:
body
{background:#transparent) repeat scroll!important;}
使用说明:
找到你喜欢的图片(1024*768规格),把它存在你的博客里,具体方法参考无限制上传图片的方法然后把图片地址覆盖在代码中的("页面大背景图片地址")上面,找一个已经有内容的模块添加这段代码,就能改变你的BLOG背景了,具体用以上那一种代码,看你个人喜好了!
--------------------------------------------------------------------------------
四自定义博客各部分背景代码:
。
logo
{background:url("题图上背景图片地址") no repeat no scroll!mportant;}
。banner
{background:url("题图下背景图片地址") no repeat no scroll!mportant;}
。
menu
{background:url("题图下的菜单背景图片地址") no-repeat center;}
。feeds 。up
{background:url("正文标题栏上翻时的图片地址") no-repeat center;}
。
wn{background:url("正文标题栏下翻时的图片地址") no-repeat center;}
。feeds 。function
{background:url("正文摘要结尾处菜单的图片地址") no-repeat right;}
。
links 。up
{background:url("面板标题栏上翻时的图片地址");}
。 wn{background:url("面板标题栏下翻时的图片地址");}
。links 。
mid
{background:url("面板的背景图片地址");}
。photo 。mid
{background:url(个人形象照片处的背景图片地址);}
。label 。mid
{background:url("自定义面板的背景图片地址");}
。
calendar 。mid
{background:url("日历面板背景图片地址");}
。callboard 。up
{background:url("公告栏标题栏上翻时的图片地址");}
。
wn{background:url("公告栏标题栏下翻时的图片地址");}
。callboard 。mid
{background:url("公告栏背景图片地址");}
。bodyBg
{background:url("正文背景图片地址");}
。
bodyBottom
{background:url("内背景页脚处图片地址,在翻页处下面一横窄条");}
。gbook 。up
{background:url("留言板标题栏上翻时的图片地址") no-repeat;}
。
wn{background:url("留言板标题栏下翻时的图片地址") no-repeat;}
。 ge{background:url("正文文章页数图片地址") no-repeat center;}
。
re{background:url("最新文章列表下的MORE的背景图片") no-repeat right;}
代码说明:
页面大背景(body) 指的是整个博客的最大背景,由于中间部分被覆盖,所以显示的效果只是两边的部分。
题图上背景(logo) 是指所在的横长条的背景。
题图下背景(banner) 是指博客名字博客地址 复制 ?收藏本页)所在的那部分的背景。
logo和banner宽各为770,logo高40,banner高134,单位均为像素。
题图下的菜单背景” 是指“HOME。。。搜索┆帮助┆退出”等字所在的那个横长条的背景。
正文标题栏上翻时的图片 指的是文章发表了之后文章标题的图片。
面板标题栏下翻时的图片 指的是点击标题后出现标题后的后面的图片。
面板的背景图片 指的是左边比如我的文章列表什么的背景图片。
正文背景 是指整个文章文字所在的大背景!
以上代码可以更改博客各个部分的图片,更换的图片尺寸要和原尺寸一模一样,关于上传图片和怎么得到图片地址请参考:无限制上传图片的方法
--------------------------------------------------------------------------------
如果想叫某一部分背景或者全部变的透明的话,在以上代码中大括号里面内容换上background:#transparent就能实现透明效果,
例如横幅代码:
。
logo
{background:url("题图上背景图片地址") no repeat no scroll!mportant;}
以上代码中红色部分全部改成:background:#transparent
示范:
。
logo{background:#transparent}
以上所有代码必须添加在已经有内容的模块中,例如模块里面已经有了时钟,天气预报等等内容!
具体操作步骤是:复制代码--->控制面板--->新增空白面板--->钩选源代码(出现钩号,同时文档里出现DIV的字样)--->粘贴代码--->钩选源代码(钩号消失)--->保存新增面板--->定制个人首页--->选取新增个人面板--->保存
五页面FLASH代码
想在自己的页面添加FLASH的效果,可以建立一个新的"自定义空白面板",将"显示源代码"画勾后,在版面上复制粘贴此代码:
其中 width代表宽度, height代表高度,left:和top分别代表与ie左边界与右边界的距离。
蓝色雪花
飞翔小球
五彩星星
彩色螺旋
青蛙
蓝色蝴蝶
金鱼
蓝色背景雪花飘飘
无色背景水珠
粉黄色5瓣花飘飘
小星、大星光晕梦幻
空中飘动的黄球
两只黄色的蝴蝶在左上角飞舞
旋转的花瓣、蝴蝶随鼠标飞舞
黄色4瓣花飘落
鼠标滑过,雪花飘飘
绿色的枫叶飘落
粉红色的花瓣飘落
黄色的四瓣花飘落
浅蓝色的雪花在空中,小雪花降落
五彩礼花:
闪烁的星星
白色的小花
紫色背景白色的小花
黄色的蝴蝶
柳树
透明FLASH的地址:
五-2 在文章中添加Flash代码如下:
六左右浮动挂件的代码………………
固定不动的右挂件
天使左
天使右
我的博客
本文的续文50篇,将博客源代码打捞干净
本文续文01:文字代码、图片左右插入文字、滚动新闻代码、图片为背景发表文章
本文续文02:滚动条代码、单张图片滚动代码、背景图片代码、个性鼠标代码
本文续文03:邮箱快速登陆代码、搜索条代码、滚动字幕代码、插入播放器
本文续文04:阴影文字代码、鼠标滑过文字停止代码、播放器代码、手机地址查询代码、 改变标题图片代码、Flash特效代码
本文续文5:改变标题文字代码、修改模板的代码、改变模板宽度代码、Twins样式的钟表发光字体代码
本文续文06:天气预报代码
本文续文07: 涂鸦留言板的申请(比较复杂)
本文续文08:网页制作工具网址
本文续文09:添加日历的代码总汇
本文续文10:QQ电台的添加
本文续文11:自定义新浪博客各处模板等
本文续文12:新浪博客文字颜色改变的源代码等
本文续文13:文章图片导航系统等
本文续文14:更改博客上的标题文字的大小和颜色等
本文续文15:设为首页、加为收藏、联系的代码更改文章标题位置所用的代码制作
本文续文16: 文绕图+在图片下注释的效果在图片上做滚动文字的代码
本文续文17: 滚动友情链接
本文续文18: 给新浪BLOG添加密码、图文导航代码破解
本文续文19: 自定义导航栏
本文续文20: 博客添加电视的代码
。
。。。。。
希望对你能有所帮助
。收起