怎样制作个性模版

显示全部楼层 · 2009-1-30 06:28:38

自定义新浪博客各处模板：1）改变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表示边框隐藏。----------2）页面宽度的代码：<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。不过要更改模板宽度的话建议面板的宽度不必改，只需用代码中的前四个参数就行了。----------3）博客改变背景代码：滚动的大背景代码：<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背景了，具体用以上那一种代码，看你个人喜好了！----------4）自定义博客各部分背景代码：<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的字样)→粘贴代码→钩选源代码(钩号消失)→保存新增面板→定制个人首页→选取新增个人面板→保存
提问者对答案的评价：

整体模板更改格式代码之十二：下面是我设置的“白雪公主和七个小矮人”模板，原模板宽度为770，现宽度改为1003，可以说是满屏了，特点是屏幕装饰显得比较大气，如你喜欢这种模板格式，只要把代码中的图片、flash动画地址更换一下，就拥有你自己的特色模板了：<DIV> </DIV><STYLE type=text/css>.logo{background:#transparent}.banner{background:#transparent}.menu{background:#transparent}.feeds .up{background:#transparent}.feeds .down{background:#transparent}.feeds .function{background:#transparent}.links .up{background:#transparent}.links .down{background:#transparent}.links .mid{background:#transparent}.photo .mid{background:#transparent}.label .mid{background:#transparent}.calendar .mid{background:#transparent}.callboard .up{background:#transparent}.callboard .down{background:#transparent}.callboard .mid{background:#transparent}.bodyBg{background:#transparent} .bodyBottom{background:#transparent}.sysW770{background:#transparent}.gbook .up{background:#transparent}.gbook .down{background:#transparent}.feeds .page{background:#transparent}.links .more{background:#transparent}.add{background:#transparent}.add .ico{background:#transparent}</STYLE><STYLE type=text/css> .bodyTop{display:none;} </STYLE><STYLE> .banner .link a{display:none;}.banner .link td{display:none;} </STYLE><STYLE type=text/css>.banner{background:url("http://album.sina.com.cn/pic/494b5c3d02000olm ") no repeat no scroll!mportant;}.banner{height:440px}</STYLE> <STYLE type=text/css>.menu{ width:1003px;height:24px; background:url("http://album.sina.com.cn/pic/494b5c3d02000ook ") no-repeat center; padding:0px 10px;color:#444444;} </STYLE><STYLE type=text/css>.feeds .up{background:url("http://album.sina.com.cn/pic/494b5c3d020009pv ") no-repeat center; }.feeds .down{background:url("http://album.sina.com.cn/pic/494b5c3d020009pv ") no-repeat center; }.feeds .function{background:url("http://album.sina.com.cn/pic/494b5c3d020009rv ") no-repeat right; HEIGHT: 45px }.links .up{background:url("http://album.sina.com.cn/pic/494b5c3d02000kqz "); }.links .down{background:url("http://album.sina.com.cn/pic/494b5c3d02000kqz "); }.callboard .up{background:url("http://album.sina.com.cn/pic/494b5c3d02000kqz "); }.callboard .down{background:url("http://album.sina.com.cn/pic/494b5c3d02000kqz "); }.bodyBg{background:url("http://album.sina.com.cn/pic/494b5c3d02000kdx ");}.add .ico{background:url("") no-repeat right;}</style><STYLE type=text/css>.bodyBottom{background:url(http://album.sina.com.cn/pic/494b5c3d02000myf );}.bodyBottom {margin-left:0px;}{height:92px}</STYLE><STYLE type=text/css>.bodyBottom{height:120px}</STYLE><STYLE> body {background:url(http://album.sina.com.cn/pic/494b5c3d02000l8n ) repeat fixed!important;);margin:0px; </STYLE><DIV> </DIV><STYLE type=text/css> .foot{display:none;} </STYLE><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><STYLE type=text/css>.bodyTop{width:1003px;}.bodyBg{width:1003px;}.bodyBottom{width:1003px;}.feeds .text{width:660px;}.label{width:280px;}.photo{width:280px;}.callboard{width:280px;}.links{width:280px;}.calendar{width:280px;}.sysBr180{width:180px;}</STYLE><DIV><EMBED style="LEFT: 0px; POSITION: absolute; TOP: 0px" align=right src= http://imgfree.21cn.com/free/flash/188.swfwidth=1003 height=440type=application/x-shockwave-flash wmode="transparent" quality="high" ;></EMBED></DIV><DIV><EMBED style="LEFT: 0px; POSITION: absolute; TOP: 0px" align=right src= http://www.xvlink.com/images/swf/004.swf width=1003 height=440 type=application/x-shockwave-flash wmode="transparent" quality="high" ;></EMBED></DIV>代码说明：background:url ：横幅（即大题图）图片地址，图片的实际宽度必须为1003以上，高度没有限制height:440px ：横幅（即大题图）图片高度，其高度数值应和图片实际高度相一致background:url ：横幅下HOME边框条，图片尺寸1003：24background:url ：文章标题条图片地址，图片尺寸620：32background:url ：文章标题条图片地址，图片尺寸620：32background:url ：文章结尾处菜单条图片地址，图片尺寸260：45background:url ：公告栏小标题图片地址，图片尺寸280：32background:url ：公告栏小标题图片地址，图片尺寸280：32background:url ：左侧小标题图片地址（不包括公告栏），图片尺寸280：32background:url ：左侧小标题图片地址（不包括公告栏），图片尺寸280：32.bodyBg{background:url ：模板图片地址（主要的）background:url ：页码下面小横条的图片地址height:120px ：页码下面小横条的高度body {background:url ：大背景图片地址，就是模板后面的那个大背景图font-size:36px; ：为标题文字字体的大小数值，可自行调节color:#ffff66; ：为标题文字的主颜色，可自行调节src= ：flash动画代码地址width=1003 height=440 ：flash动画的宽、高数值，应调整为和横幅图片的数值相一致注意事项：1，按装模板前，把原来的新浪模板调整为“灰色轨迹”或“野蛮丫头”模板，效果会更好；2，最好把所有的flash动画、挂件之类的装饰全去掉，以免影响网速；3，必须把图片地址复制粘贴在“ ”两个逗号中间，不要把“ ”复盖掉；没有逗号的，就复制粘贴在（）适号中间，不要把（）复盖掉，否则无效果；4，如果发现换了模板后字体显示不清楚，这是因为与你原先用的新浪模板字体颜色不搭配的缘故，可以在做好模板后重新选择新浪模板，直到和背景相协调为至；5，以上代码只能改变博客首页模板，如你要让每页文章背景都和首页一样的话，就要把以上所有代码，用纯文本形式保存，并上传到空间，获取URL地址，在每次发文章同时，勾选文章框下的“显示源代码”框，把获取的URL地址复制粘贴在每篇文章代码的后面就行了；具体操作方法如下：点击控制面板——新增空白面板——先在空白面板上敲一下空格键——钩选“显示源代码”（这时你会看到面板中已经有一行代码了：<DIV> </DIV>）——把以上代码复制粘贴在所有代码之后——钩选显示源代码（钩号消失）——保存新增面板——定制个人首页——选取新增面板——保存设置；欢迎光临我的博客：http://blog.sina.com.cn/m/azeng

我使用的是阿甑BLOG提供的模板,很漂亮的.