怎样字定义模板？

显示全部楼层 · 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的字样)→粘贴代码→钩选源代码(钩号消失)→保存新增面板→定制个人首页 →选取新增个人面板→保存
提问者对答案的评价：

管理博客--自定义设置--首页内容维护--自定义空白面板--勾选显示原代码--复制以下内容，粘贴。确定好了。用自定义空白面板时，弄完了，要定制我的首页，点添加模块--自定义空白面板，勾自己要的面板，保存设置。网址可以自己选。http://blog.sina.com.cn/xiemulin

安装时钟
很多网友都想充实自己的博客，博客除了里面要有实质性的内容外，首页的装饰也是十分重要的，初学者往往就是在“自定义空白面板栏”上过不了关，而“自定义空白面板栏”就是装饰博客的基础，很多内容都是装在“自定义空白面板栏”，只要掌握了，举一反三，其它的就容易了。
下面通过介绍安装时钟来说明这一问题：
1、登录新浪博客后，点“博客管理”
2、点“个人首页维护”
3、点“自定义空白面板栏”
4、点“增加”
5、填好面板标题，如“时钟”
6、勾选文本框下方的“显示源代码”此时面板介绍中出现:
DIV></DIV> 把它们删掉后，把自己选择的时钟代码粘贴上去。
如我的代码<IFRAME border=0 name=www.haofa.net marginWidth=0 marginHeight=0allowTransparency="true"
src=http://w2.haofa.net/dm/swf/swf.htm?clock6 frameBorder=0 width=150 scrolling=no height=180></IFRAME>
粘贴上后去掉源代码的钩，稍等片刻，就应该看到清晰的时钟，然后“保存”
7、再返回“个人首页维护”，点击左侧“BLOG信息设置”中的“定制我的首页”
8、点击“添加模块”
9、勾选刚刚建立的模板（时钟），点击下方的“选取”
10、时钟出现在页面上，（用鼠标的右键将之移动到合适的位置上）点击“保存设置”，完成时钟安装。
今后如果要换时钟，只需：
1、登录新浪博客后，点击“博客管理”
2、进入“个人首页维护”。
3、进入“自定义空白面板栏”。
4、点“时钟”，勾选“源代码”，把原来代码删去，粘贴上新的代码，“保存”就OK。
新浪以外的播放器、圈标、天气预报、百度搜索等凡是安装在“自定义空白面板栏”的方法都完全相同，
没有代码的复制上去保存即可，有代玛的要勾选“显示源代码”，粘贴上后去掉源代码的钩，
应该清晰的看见自己安装的东西，如播放器应该可靠顺畅的唱歌，很多人安装不成功，
就是因为没有去掉源代码的钩检查效果，盲目安装，安装了废品也不知道。即使安装成功的，
也可能经常换的，因为代码是网站支持的，网络网站会出故障，更何况网站也象博客一样，
有很多在哪儿没人管呢？同时技术日新月异，不断会有新的出现，装饰更要吐骨纳新。
如果你要查看或欣赏我的播放器、时钟等的效果，请登陆：
http://blog.sina.com.cn/wxryql
有详细安装方法、获取代码、检验代码等。
如果要选择可靠的时钟代码，请登陆：
时钟代码网站：http://www.haofa.net/code/clock/
几十种可靠时钟任你选。