问题:
推荐关注评论 举报
问题logo

笑语嫣然

[新手]
已解决 怎样装扮博客上的俩边并使它有动感 0分
回答:1   浏览:1755   提问时间:2007-02-10 14:04
1条评论...
最佳答案 最佳答案 此答案由提问者自己选择,并不代表爱问知识人的观点
揪错评论 举报

付强

[学者] 向付强提问
可以像我的博客一样,添加挂件,加flash呀,改模板呀 方法很多!



自定义新浪博客各处模板

一改变BLOG标题大小的代码:
<STYLE type=text/css>
.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;}
</STYLE>


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表示边框隐藏。

--------------------------------------------------------------------------------

二页面宽度的代码:
<STYLE type=text/css>
.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;}
</STYLE>


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

--------------------------------------------------------------------------------

三博客改变背景代码:

滚动的大背景代码:
<style>body {background:url("页面大背景图片地址") repeat scroll!important;}</style>

repeat 重复,当图片的大小不够的时候会以平铺显示
scroll 卷轴,大背景会随着右边滚动条拉动的时候而滚动

固定的大背景代码
<style>body {background:url("页面大背景图片地址") repeat fixed!important;}<style>

fixed 固定,大背景不会因为你拉动滚动条而滚动

背景透明代码:
<STYLE type=text/css>body
{background:#transparent) repeat scroll!important;}</STYLE>


使用说明:
找到你喜欢的图片(1024*768规格),把它存在你的博客里,具体方法参考无限制上传图片的方法然后把图片地址覆盖在代码中的("页面大背景图片地址")上面,找一个已经有内容的模块添加这段代码,就能改变你的BLOG背景了,具体用以上那一种代码,看你个人喜好了!
--------------------------------------------------------------------------------

四自定义博客各部分背景代码:

<STYLE type=text/css>.logo
{background:url("题图上背景图片地址") no repeat no scroll!mportant;}</STYLE>


<STYLE type=text/css>.banner
{background:url("题图下背景图片地址") no repeat no scroll!mportant;}</STYLE>


<STYLE type=text/css>.menu
{background:url("题图下的菜单背景图片地址") no-repeat center;}</STYLE>


<STYLE type=text/css>.feeds .up
{background:url("正文标题栏上翻时的图片地址") no-repeat center;}</STYLE>


<STYLE type=text/css>.feeds .down
{background:url("正文标题栏下翻时的图片地址") no-repeat center;}</STYLE>


<STYLE type=text/css>.feeds .function
{background:url("正文摘要结尾处菜单的图片地址") no-repeat right;}</STYLE>


<STYLE type=text/css>.links .up
{background:url("面板标题栏上翻时的图片地址");}</STYLE>


<STYLE type=text/css>.links .down
{background:url("面板标题栏下翻时的图片地址");}</STYLE>


<STYLE type=text/css>.links .mid
{background:url("面板的背景图片地址");}</STYLE>


<STYLE type=text/css>.photo .mid
{background:url(个人形象照片处的背景图片地址);}</STYLE>


<STYLE type=text/css>.label .mid
{background:url("自定义面板的背景图片地址");}</STYLE>


<STYLE type=text/css>.calendar .mid
{background:url("日历面板背景图片地址");}</STYLE>


<STYLE type=text/css>.callboard .up
{background:url("公告栏标题栏上翻时的图片地址");}</STYLE>


<STYLE type=text/css>.callboard .down
{background:url("公告栏标题栏下翻时的图片地址");}</STYLE>


<STYLE type=text/css>.callboard .mid
{background:url("公告栏背景图片地址");}</STYLE>


<STYLE type=text/css>.bodyBg
{background:url("正文背景图片地址");}</STYLE>


<STYLE type=text/css>.bodyBottom
{background:url("内背景页脚处图片地址,在翻页处下面一横窄条");}</STYLE>


<STYLE type=text/css>.gbook .up
{background:url("留言板标题栏上翻时的图片地址") no-repeat;}</STYLE>


<STYLE type=text/css>.gbook .down
{background:url("留言板标题栏下翻时的图片地址") no-repeat;}</STYLE>


<STYLE type=text/css>.feeds .page
{background:url("正文文章页数图片地址") no-repeat center;}</STYLE>


<STYLE type=text/css>.links .more
{background:url("最新文章列表下的MORE的背景图片") no-repeat right;}</STYLE>


代码说明:

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

--------------------------------------------------------------------------------

如果想叫某一部分背景或者全部变的透明的话,在以上代码中大括号里面内容换上background:#transparent就能实现透明效果,

例如横幅代码:
<STYLE type=text/css>.logo
{background:url("题图上背景图片地址") no repeat no scroll!mportant;}</STYLE>

以上代码中红色部分全部改成:background:#transparent

示范:
<STYLE type=text/css>.logo{background:#transparent}</STYLE>

以上所有代码必须添加在已经有内容的模块中,例如模块里面已经有了时钟,天气预报等等内容!
  具体操作步骤是:复制代码--->控制面板--->新增空白面板--->钩选源代码(出现钩号,同时文档里出现DIV的字样)--->粘贴代码--->钩选源代码(钩号消失)--->保存新增面板--->定制个人首页--->选取新增个人面板--->保存

五页面FLASH代码

想在自己的页面添加FLASH的效果,可以建立一个新的"自定义空白面板",将"显示源代码"画勾后,在版面上复制粘贴此代码:

<CENTER><EMBED style="LEFT: 10px; POSITION: absolute; TOP: -70px" align=right src=FLASH的网址 width=700 height=400 type=application/x-shockwave-flash wmode="transparent" quality="high" ;></CENTER>

其中 width代表宽度, height代表高度,left:和top分别代表与ie左边界与右边界的距离。

蓝色雪花http://imgfree.21cn.com/free/flash/64.swf
飞翔小球 http://bbs.flasher123.com/UploadFile/2004-5/20045912375165288.swf
五彩星星 http://bbs.flasher123.com/UploadFile/2004-5/20045912435828355.swf
彩色螺旋 http://bbs.flasher123.com/UploadFile/2004-4/200442814445969367.swf

青蛙http://imgfree.21cn.com/free/flash/8.swf
蓝色蝴蝶http://imgfree.21cn.com/free/flash/9.swf
金鱼http://imgfree.21cn.com/free/flash/17.swf
蓝色背景雪花飘飘http://imgfree.21cn.com/free/flash/23.swf
无色背景水珠http://imgfree.21cn.com/free/flash/27.swf
粉黄色5瓣花飘飘http://imgfree.21cn.com/free/flash/33.swf
小星、大星光晕梦幻http://imgfree.21cn.com/free/flash/35.swf
空中飘动的黄球http://imgfree.21cn.com/free/flash/42.swf
两只黄色的蝴蝶在左上角飞舞http://imgfree.21cn.com/free/flash/45.swf
旋转的花瓣、蝴蝶随鼠标飞舞http://imgfree.21cn.com/free/flash/97.swf
黄色4瓣花飘落http://imgfree.21cn.com/free/flash/101.swf
鼠标滑过,雪花飘飘http://imgfree.21cn.com/free/flash/130.swf
绿色的枫叶飘落http://imgfree.21cn.com/free/flash/131.swf
粉红色的花瓣飘落http://imgfree.21cn.com/free/flash/113.swf
黄色的四瓣花飘落http://imgfree.21cn.com/free/flash/63.swf
浅蓝色的雪花在空中,小雪花降落http://imgfree.21cn.com/free/flash/64.swf
五彩礼花:http://sucai.heima.com/sucai/news/flash/92.swf
闪烁的星星http://sucai.heima.com/sucai/news/flash/71.swf
白色的小花http://sucai.heima.com/sucai/news/flash/42.swf
紫色背景白色的小花http://imgfree.21cn.com/free/flash/41.swf
黄色的蝴蝶http://imgfree.21cn.com/free/flash/45.swf
柳树http://hlm.nease.net/swf/red/liu.swf
透明FLASH的地址:http://lbxx.blogchina.com/2469452.html

五-2 在文章中添加Flash代码如下:

<DIV>
<P align=center><EMBED src=http://www.flashmusic.com.cn/flash/2005-11/24ACmilan.swf width=500 height=350 type=application/x-shockwave-flash></P></DIV>
<DIV></DIV>


六左右浮动挂件的代码………………

固定不动的右挂件
<DIV style="LEFT: 900px; POSITION: absolute; TOP: 100px" align=right><IMG src="http://www.haotu.cn/0815/sucai/gif/38/030116girl018.gif" align=right></DIV>

天使左
<DIV style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; ; RIGHT: expression(eval(document.body.scrollLeft)+eval(document.body.clientWidth)-100); FILTER: progid:DXImageTransform.Microsoftpadding:8px; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP: expression(eval(document.body.scrollTop)+eval(document.body.clientHeight)-350); TEXT-ALIGN: center"><IMG src="http://www.haotu.cn/0815/sucai/gif/38/030116girl017.gif" border=0></DIV>
<DIV></DIV>

天使右
<DIV style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; ; RIGHT: expression(eval(document.body.scrollLeft)+eval(document.body.clientWidth)-990); FILTER: progid:DXImageTransform.Microsoftpadding:8px; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP: expression(eval(document.body.scrollTop)+eval(document.body.clientHeight)-350); TEXT-ALIGN: center"><IMG src="http://www.haotu.cn/0815/sucai/gif/38/030116girl018.gif" border=0></DIV>
<DIV></DIV>


<博客代码大全>
我的博客http://blog.sina.com.cn/m/fuqiang里的
<博客代码大全>本文的续文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: 博客添加电视的代码
......
希望对你能有所帮助
回答:2007-02-10 14:17
提问者对答案的评价:
1条评论...
意见反馈 - 网站推广 - 招贤纳士 - 爱问大全
© 2009 Sina.com 免责声明