怎样对自己的博客进行模板DIY设置?
一、头部图片的替换
1、预先选择设计好自己喜欢的图片,并且使设计的图片宽度和高度与原模板图片一致。这样可以避免修改模板带来的不必要的麻烦。
2、设计好后,上传到博客空间里(这样可以保证速度),注意命名要易记不重名。
3、进入到模板DIV,以首页为例。找到头部代码“div#header{” 中的“background-image: url(/myok/inc/head.jpg);”,如果没有可新增一行该代码。
4、将其中的链接替换你上传的图片链接即可。
二、背景颜色或图片的替换
1、登录博客后,选择模板设置。
2、选择”模板DIV“(以首页为例)。
整体大背景
a.在CSS代码中找到代码Body。
b.如果是修改背景颜色,找到background-color: #XXXXXX;,用你喜欢的背景颜色代码替换掉原来的即可。
c.如果是修改背景图片(注:使用了背景图片后,背景颜色将失效),找到background-image: url(http://XXX.XXXXX.XXX/XXX.jpg);将图片替换成你喜欢的背景图片链接即可。
日志背景:
a.找到日志主体div.entity{ 中的background-color: #XXXXXX;(背景颜色),或者background-image: url(http://XXX.XXXXX.XXX/XXX.jpg)(背景图片);,用自己中意的背景颜色和图片替换掉即可。如果没有该二行代码,可自行添加。
侧边栏背景:
a.需要分别将各侧边栏(在你的博客中显示出来的),添加上述代码,并换成自己中意的背景颜色和图片即可。
三、博客介绍栏的设置四、修改标题栏图片背景的方法五、新窗口打开链接的方法六、鼠标特效的设置方法
博客介绍栏位于HTML的<head>和</head>之间,我们可以利用起来做很多事情。只要在规定的字符数内,尽可展示你的所学与才华!我在这里仅仅介绍一下博客介绍栏背景图片、颜色及高度的修改。
1、登录博客后,选择模板设置。
2、选择”模板DIV“(以首页为例)。
3、找到Blog介绍中的div#blogContent{代码,添加或修改相应的background-color: #XXXXXX;(背景颜色),或者background-image: url
(http://XXX.XXXXX.XXX/XXX.jpg)(背景图片)代码即可;
4、修改博客介绍的高度值,只需找到height:XXXpx;,修改相应值即可。
1、登录博客后,选择模板设置。
2、选择”模板DIV“(以首页为例)。
3、找到每一栏的标题中的H4,修改其中的 background-color: #XXXXXX;和 background-image: url(http://XXX.XXXXX.XXX/XXX.jpg);即可。
4、栏目标题的修改需要找到栏目中的代码div#category{,添加或者修改其中的 background-color: #XXXXXX;和 background-image: url
(http://XXX.XXXXX.XXX/XXX.jpg);即可。
1、登录博客后,选择模板设置。
2、选择”模板DIV“(以首页为例)。
3、再CSS最后添加如下代码:
a:active {
text:expression(target="_blank");
}
1、登录博客后,选择模板设置。
2、选择”模板DIV“(以首页为例)。
3、找到代码Body,在其中添加鼠标特效代码即可。
4、代码格式如下:
cursor:url(' http://a5877088.blogbus.com/files/***********.cur ');
5、更多样式参见本站日志:CSS鼠标代码
七、隐藏首页部分显示的方法
隐藏头部博客名称显示的方法:如果你想在首页隐去头部博客名称的显示,请登录博客后,进入到模板管理,找到首页模板CSS中的“h1{”,然后紧跟在后面添加代码display:none;即可。
隐藏首页文章横条显示方法:如果你想在首页隐去日志上方有文章二字的横条显示,请登录博客后,进入到模板管理,找到首页模板CSS中的“h4.textDiary{”,然后紧跟在后面添加代码display:none;即可。
隐藏作者头像的方法:如果你想在首页隐去作者头像复的显示,请登录博客后,进入到模板管理,找到首页模板CSS中的“div#myPhoto{ ”,然后紧跟在后面添加代码display:none;即可。
隐藏博客年度索引的方法:如果你想在首页隐去博客年度索引的显示,请登录博客后,进入到模板管理,找到首页模板CSS中的“div#blogIndex{ ”,然后紧跟在后面添加代码display:none;即可。
隐藏底部版权信息的方法:如果你想在首页隐去底部版权信息的显示,请登录博客后,进入到模板管理,找到首页模板CSS中的“div#footer a{”,然后紧跟在后面添加代码display:none;即可。
隐藏作者及回复显示方法:如果你想在首页隐去日志底部有关作者和回复的显示信息的话,请登录博客后,进入到模板管理,找到首页模板CSS中的“p.diaryFoot{”,然后紧跟在后面添加代码display:none;即可。
隐藏日志标题的方法:如果你想隐去首页日志的标题显示,可登录博客后,进入到模板管理,找到首页模板CSS中的“h5.diaryTitle{”,然后紧跟其后添加代码display:none;即可!
隐藏目录栏目显示的方法:如果你想隐去首页日志的标题显示,可登录博客后,进入到模板管理,找到首页模板CSS中的“div#category a{”,然后紧跟其后添加代码display:none;即可!
注:
1、如果模板中没有找到对应的代码,可在最后增加该代码内容!
2、有其他需要隐藏的地方,很简单,你只需要登录博客后,进入模板样式将与该栏相对应的代码用display:none;屏幕掉即可。
举例:我想屏幕掉头部,只需找到代码div#header将其中的代码去掉,换成display:none;即可。因涉及栏目较多,在此不一一列举,可参照尝试。