怎样在博客中添加背景和挂件?

[复制链接]
查看11 | 回复0 | 2009-1-30 06:28:38 | 显示全部楼层 |阅读模式
怎样在博客中添加背景和挂件?我想把自己的博客做漂亮点,希望各位博友能够多多帮助乌鸦下,谢谢啦!

                                                                                                我的博客出汗了………………不随鼠标滚动的代码<CENTER><EMBED style="LEFT: 10px; POSITION: absolute; TOP: -70px" align=right src=http://imgfree.21cn.com/free/flash/27.swf width=980 height=1024 type=application/x-shockwave-flash ; quality="high" wmode="transparent"></CENTER>随鼠标滚动的代码<DIV style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; FILTER: progid:DXImageTransform.Microsoftpadding:8px; ; LEFT: expression(eval(document.body.scrollLeft)+eval(document.body.clientWidth)-1000); BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP: expression(eval(document.body.scrollTop)+eval(document.body.clientHeight)-700); TEXT-ALIGN: center"><TABLE cellSpacing=0 cellPadding=0 align=center border=0><TBODY><TR><TD><EMBED style="POSITION: absolute" src="http://imgfree.21cn.com/free/flash/27.swf" width=900 height=700 type=application/x-shockwave-flash wmode="transparent" quality="high" ;> </TD></TD></TR></TBODY></TABLE></DIV></DIV>具体操作步骤如下:控制面板----个人首页维护----自定义空白面板----新增填写面板标题----勾显示源代码----粘贴当前代码----保存定制我的首页----添加模块----勾选新添面板----选取保存设置 我的博客下雨了…………<DIV style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; FILTER: progid:DXImageTransform.Microsoftpadding:8px; ; LEFT: expression(eval(document.body.scrollLeft)+eval(document.body.clientWidth)-980); BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP: expression(eval(document.body.scrollTop)+eval(document.body.clientHeight)-500); TEXT-ALIGN: center"><TABLE cellSpacing=0 cellPadding=0 align=center border=0><TBODY><TR><TD><EMBED style="LEFT: 0px; POSITION: absolute; TOP: -200px" align=right src=http://imgfree.21cn.com/free/flash/129.swf width=950 height=680 type=application/x-shockwave- ; quality="high" wmode="transparent" flash></EMBED></TD></TR></TBODY></TABLE></DIV><DIV></DIV>不随鼠标滚动的代码<CENTER><EMBED style="LEFT: 10px; POSITION: absolute; TOP: -70px" align=right src=http://imgfree.21cn.com/free/flash/129.swf width=980 height=1024 type=application/x-shockwave-flash ; quality="high" wmode="transparent"></CENTER>随鼠标滚动的代码<DIV style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; FILTER: progid:DXImageTransform.Microsoftpadding:8px; ; LEFT: expression(eval(document.body.scrollLeft)+eval(document.body.clientWidth)-1000); BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP: expression(eval(document.body.scrollTop)+eval(document.body.clientHeight)-700); TEXT-ALIGN: center"><TABLE cellSpacing=0 cellPadding=0 align=center border=0><TBODY><TR><TD><EMBED style="POSITION: absolute" src="http://imgfree.21cn.com/free/flash/129.swf" width=900 height=700 type=application/x-shockwave-flash wmode="transparent" quality="high" ;> </TD></TD></TR></TBODY></TABLE></DIV></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>大背景,推荐使用这个代码:背景随鼠标滚动………………<STYLE type=text/css>body{background:url("http://album.sina.com.cn/pic/4a3e754102000a7y") repeat scroll!important;}</STYLE><STYLE type=text/css>body{background:url(http://image.bbs.tom.com/data1/pic/386/94/94005.jpg) repeat scroll!important;}</STYLE>背景固定不动………………<STYLE>body {background:url("http://content3.bigoo.ws/content/background/space/space_167.gif") repeat fixed!important;}</STYLE><STYLE type=text/css>body{background:url("http://album.sina.com.cn/pic/4aa5ff81020008wv") repeat fixed!important;}</STYLE>题图,推荐使用这个代码:<STYLE type=text/css>.menu{background:url("http://album.sina.com.cn/pic/5604c5b20200055z") no repeat no scroll!mportant;}.banner{background:url(http://album.sina.com.cn/pic/5604c5b20200055n); height:200px;}.banner .title td{font-size:26px; color:#ffff66; FILTER:glow(color=#000000,direction=2);}</STYLE>这个已经是做好的也是我在用的注意这段代码不可以单独使用必须应用在已经有内容的自定义的模块里基本步骤:登录你的博客,点击控制面板选择定制我的首页选择合适的模块点击编辑,进入修改页面勾选显示源代码直接将这段代码黏贴在最后面就可以了。保存——保存设置鼠标<STYLE type=text/css>a:hover {cursor:url(\'http://webme.bokee.com/inc/mouse001.ani\')}BODY {cursor:url(\'http://webme.bokee.com/inc/mouse001.ani\')}</STYLE>更多特效鼠标,请参见我的博客琉璃球[http://blog.sina.com.cn/m/hatazhao]注意:此段代码不可以单独使用必须粘贴到已经有内容的自定义的空白面板里注意这段代码不可以单独使用必须应用在已经有内容的自定义的模块里基本步骤:登录你的博客,点击控制面板选择定制我的首页选择合适的模块点击编辑,进入修改页面勾选显示源代码直接将这段代码黏贴在最后面就可以了。保存——保存设置                                       
提问者对答案的评价:

                                                                                                可以像我的博客一样,添加挂件,加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的字样)--->粘贴代码--->钩选源代码(钩号消失)--->保存新增面板--->定制个人首页--->选取新增个人面板--->保存<博客代码大全>我的博客http://blog.sina.com.cn/m/fuqiang里的<博客代码大全>本文的续文30篇,将博客源代码打捞干净本文续文01:文字代码、图片左右插入文字、滚动新闻代码、图片为背景发表文章本文续文02:滚动条代码、单张图片滚动代码、背景图片代码、个性鼠标代码本文续文03:邮箱快速登陆代码、搜索条代码、滚动字幕代码、插入播放器本文续文04:阴影文字代码、鼠标滑过文字停止代码、播放器代码、手机地址查询代码、 改变标题图片代码、Flash特效代码本文续文5:改变标题文字代码、修改模板的代码、改变模板宽度代码、Twins样式的钟表发光字体代码本文续文06:天气预报代码本文续文07: 涂鸦留言板的申请(比较复杂)本文续文08:网页制作工具网址本文续文09:添加日历的代码总汇本文续文10:QQ电台的添加本文续文11:自定义新浪博客各处模板等本文续文12:新浪博客文字颜色改变的源代码等本文续文13:文章图片导航系统等本文续文14:更改博客上的标题文字的大小和颜色等本文续文15:设为首页、加为收藏、联系的代码更改文章标题位置所用的代码制作本文续文16: 文绕图+在图片下注释的效果在图片上做滚动文字的代码本文续文17: 滚动友情链接本文续文18: 给新浪BLOG添加密码、图文导航代码破解本文续文19: 自定义导航栏本文续文20: 博客添加电视的代码......希望对你能有所帮助
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

主题

0

回帖

4882万

积分

论坛元老

Rank: 8Rank: 8

积分
48824836
热门排行