新浪博客代码.docx
《新浪博客代码.docx》由会员分享,可在线阅读,更多相关《新浪博客代码.docx(15页珍藏版)》请在冰豆网上搜索。
新浪博客代码
1、大背景:
尺寸不限,但图案最好不要太大太复杂(1024PX最好)
2、页眉背景:
尺寸为770*40px(px为像素单位),图案自己选
3、标题背景:
尺寸为770*135px,这是你的博客最个性的图片
4、菜单栏背景:
尺寸为770*30px,图案最好不要太大太复杂
5、形象照片:
尺寸最好为180*200px,但高度可以大于200px
6、小标题背景:
尺寸不限,但图案最好不要太大太复杂
7、小标题栏:
尺寸为210*34px,图案最好不要太大太复杂
8、文章标题:
尺寸为550*28px,图案最好不要太大太复杂
9、文章背景:
尺寸不限,但图案最好不要太大太复杂
10、文章评论背景:
尺寸为550*28px,图案最好不要太大太复杂
11、页脚背景:
尺寸为770*40px,图案最好不要太大太复杂
第一:
博客模版宽度扩展
满屏式扩展:
.bodyTop{width:
1005px;}
.bodyBg{width:
1005px;}
.bodyBottom{width:
1005px;}
.menu{width:
1005px;}
.feeds.itemBoxtable{width:
775px;}
.feeds.text{width:
745px;}
.label{width:
220px;}
.photo{width:
220px;}
.callboard{width:
220px;}
.links{width:
220px;}
.calendar{width:
220px;}
.sysBr180{width:
220px;}
比较合适的一个:
.bodyTop{width:
900px;}
.bodyBg{width:
900px;}
.bodyBottom{width:
900px;}
.feeds.text{width:
660px;}
.label{width:
200px;}
.photo{width:
200px;}
.callboard{width:
200px;}
.links{width:
200px;}
.calendar{width:
200px;}
.sysBr180{width:
200px;}
:
)代码说明——
.bodyTop指的是页面顶部的宽度,控制了banner(就是题图)的宽度
.bodyBg指的是整个页面的宽度,其值最好与上者相同(也可以自行变化)
.bodyBottom指的是页面底部的宽度,其值最好是与上面相同
.menu指的是菜单处的款度,其值最好是与上面相同
.feeds.itemBoxtable指的是“发表文章”、“文章发表时间”及“固定链接、评论(0)、引用、阅读(0)、编辑”等处的宽度,其值应该比文章部分的宽度稍大
.feeds.text指的是正文部分的宽度(也就是文章部分的宽度)
.label指的是面板的宽度(其值加正文宽度的值应略小于整页的宽度)
.photo指的是形象照片面板的宽度(同上)
.callboard指的是公告栏的宽度(同上)
.links面板(也即最新留言、最新评论等面板)宽度(同上)
.calendar日历的宽度(同上)第二:
模版背景图片更换
更换整体页面背景的源代码:
body
{background:
url(博客整体页面背景图片)repeat
scroll!
important;}
更换页面题图logo图片的源代码:
.logo
{background:
url(博客最上方题图logo图片)no
repeatnoscroll!
mportant;}
更换页面横幅题图的源代码:
.banner
{background:
url(横幅题图大图)no
repeatnoscroll!
mportant;}
更换页面横幅题图下面的菜单图片的源代码:
.menu{
background:
url("题图下的长条菜单图片")no-
repeatcenter;}
更换页面文章标题栏上翻时的图片的源代码:
.feeds.up{
background:
url("文章标题栏上翻时的图片")no-
repeatcenter;}
更换页面文章标题栏下翻时的图片的源代码:
.feeds.down{
background:
url("文章标题栏下翻时的图片")no-
repeatcenter;}
更换页面文章结尾处评论阅读菜单栏的图片的源代码:
.feeds.function{
background:
url("文章结尾处评论阅读菜单栏的图片")no-
repeatright;}
更换页面空白面板标题栏上翻时图片的源代码:
.links.up{
background:
url("空白面板标题栏上翻时图片");}
更换页面空白面板标题栏下翻时图片的源代码:
.links.down{
background:
url(空白面板标题栏下翻时的图片);}
更换页面空白面板的背景图片的源代码:
.links.mid{
background:
url(空白面板的背景图片);}
更换页面形象照片处的背景图片的源代码:
.photo.mid{
background:
url(形象照片处的背景图片);}
更换页面自定义空白面板背景图片的源代码:
.label.mid{
background:
url(自定义空白面板的背景图片);}
更换页面日历面板的背景图片的源代码:
.calendar.mid{
background:
url("日历面板的背景图片");}
更换页面公告栏标题栏上翻时图片的源代码:
.callboard.up{
background:
url("公告栏标题栏上翻时图片");}
更换页面公告栏标题栏下翻时图片的源代码:
.callboard.down{
background:
url("公告栏标题栏下翻时图片");}
更换页面公告栏的背景图片的源代码:
.callboard.mid{
background:
url("公告栏的背景图片");}
更换页面正文背景图片的源代码:
.bodyBg{
background:
url("正文背景图片");}
更换页面正文背景图片的源代码:
.bodyBottom{
background:
url("正文背景图片");}
更换页面正文文章页数图片的源代码:
.feeds.page{
background:
url("正文文章页数图片")no-repeatcenter;}
更换页面留言板标题栏上翻时的图片的源代码:
.gbook.up{
background:
url('留言板标题栏上翻时的图片')no-repeat;}
更换页面留言板标题栏下翻时的图片的源代码:
.gbook.down{
background:
url('留言板标题栏下翻时的图片')no-repeat;}
第三:
隐藏各部位模块
:
)去掉新浪LOGO标识
.logo{display:none;}
:
)移除横幅
.banner{display:none;}
:
)去掉横幅里博客名称
:
)去掉横幅里博客地址,复制与收藏本页
:
)去掉菜单导航栏里的[HOME]
:
)隐藏导航栏里“登录”“搜索”“帮助”等
:
)隐藏形象照片下的标签文字
:
)隐藏首页正文标题
——发现错误!
?
?
?
?
?
?
:
)隐藏“活力地带”
:
)隐藏所有新浪模板(:
除公告外
:
)隐藏“发表文章”
:
)隐藏“文章的发表时间”
:
)隐藏正文在首页上的显示
:
)隐藏公告栏的“我的公告栏”标签
:
)隐藏首页上正文下,“查看原文”
:
)“隐藏正文下的阅读评论引用”栏
:
)隐藏首页底部“页码数目”
:
)隐藏博客的计数器
:
)隐藏订阅RSS阅读器
:
)隐藏界面底部“新浪博客的版权申明”等
.foot{display:none;}
:
)隐藏整个博客,需要密码才可查看
:
)隐藏首页,精华,圈子,美图
第四:
改变各模块字体以及字体大小颜色
:
)修改博客标题的代码:
.banner.titletd{font-size:
36px;}
.banner.titletd{FILTER:
glow(color=#000000,direction=2);}
.banner.titletd{color:
#ffff66;}
.bannertable{background:
#transparent;filter:
alpha(opacity=85);border:
0pxsolid#000;}
.banner.titletd{background:
url{font-family:
隶书;}no-repeatcenter;}
36px为标题文字的字体大小.
#000000表示文字发光的颜色,direction=2表示发光效果的强弱,数据自己试.
banner.titletd{color:
#ffff66;}表示标题文字的主颜色
bannertable{background:
#transparent;filter:
alpha(opacity=85);border:
0pxsolid#000;}
这个是文字及其外框的设置:
background:
后面的值为标题外框的颜色效果;
opacity=85是表示文字的透明度,值越小越透明;
border:
0px表示外框线条的粗细,数值越大边框线条越粗,数值设为0表示边框隐藏。
banner.titletd{background:
url{font-family:
隶书;}no-repeatcenter;}
可以自己改字体.:
)更改博客名称的位置
.banner.title{
margin-left:
10px;
margin-top:
10px;
font-weight:
bold;
}
.banner.link{
MARGIN-TOP:
0px;
MARGIN-LEFT:
10px
}
——说明:
.banner.title是标题的位置.
left:
是标题距页面左边的距离.top:
为标题据顶部的距离.可自行调节代码中的数值.
.banner.link指的是下面的菜单栏里“复制<收藏”blog地址的位置.自行调节.:
)更改首页横幅上的博客标题颜色:
更改首页横幅上的博客地址颜色:
改变横幅下菜单文字颜色:
隐藏横幅下HOME文字:
更改形象照片下名字的颜色:
更改公告栏标题文字颜色:
更改所有模板标题文字的颜色:
(不包括公告)
更改活力地带,文章分类,文章列表,链接文字,评论和留言人的名字颜色
更改发表文章四个字的颜色:
更改文章首页显示文字的颜色:
更改查看原文的颜色:
更改首页文章标题的颜色:
更改首页文章下的正文阅读处文字颜色:
更改首页底部翻页文字的颜色:
——下面是有关标题字体颜色的修改:
)
.menua{color:
#ff0000;}
.links.text{color:
#ff0000;}
.callboard.title{color:
#ff0000;}
.links.desc{color:
#ff0000;}
.feeds.text{color:
#ff0000;}
.linkstda{color:
#ff0000;}
.feeds.titlea{color:
#ff0000;}
.feeds.time{color:
#ff0000;}
.banner.linka{color:
#ff0000;}
.photo.infoTexta{color:
#ff0000;}
.feeds.functiona{color:
#ff0000;}
.feeds.pagea{color:
#ff0000;}
.feeds.pagespan{color:
#ff0000;}
.adda{color:
#ff0000;}
.footpa,.footcentera{color:
#ff0000;}
.foot{color:
#ff0000;}
第五:
固定页面背景底图
:
)让新浪博客各个部分的模块的背景变的透明:
.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}
.label.top
{background:
#transparent}
.photo.top
{background:
#transparent}
.label.bottom
{background:
#transparent}
.photo.bottom
{background:
#transparent}
.callboard.bottom
{background:
#transparent}
.links.bottom
{background:
#transparent}
展开阅读全文