博客优化的技巧?

发布网友发布时间：2022-04-26 17:46

共2个回答

热心网友时间：2022-05-13 15:55

博客优化建设使用技巧(上)

一、添加音乐类

载入音乐
基本语法： <EMBED SRC="音乐文件地址">
常用属性如下：
SRC="FILENAME" 设定音乐文件的路径
AUTOSTART=TRUE/FALSE 是否要音乐文件传送完就自动播放，TRUE是要，FALSE是不要，默认为FALSE
LOOP=TRUE/FALSE 设定播放重复次数，LOOP=6表示重复6次，TRUE表示无限次播放，FALSE播放一次即停止。
STARTIME="分:秒" 设定乐曲的开始播放时间，如20秒后播放写为STARTIME=00:20
VOLUME=0-100 设定音量的大小。如果没设定的话，就用系统的音量。
WIDTH HEIGHT 设定控制面板的大小
HIDDEN=TRUE 隐藏控制面板
CONTROLS=CONSOLE/SMALLCONSOLE 设定控制面板的样子
例一： <EMBED SRC="midi.mid" autostart=true hidden=true loop=true>
作为背景音乐来播放，隐藏了播放器。
例二： <EMBED SRC="midi.mid" loop=true width=145 height=60>

出现控制面板了，你可以控制它的开与关，还可以调节音量的大小。

注明：mp3 rm ra ram asf mid等音乐都用这个播放器

IE中的的背景音乐

代码如下：

<bgsound src="音乐文件地址" loop=#>

#=循环数

注明：这种背景音乐格式，只有在IE浏览器中才可以听到。一般用来插入wav wma mid等格试的音乐。

一般格试如下：

播放器3

<embed width="100" height="20" type="audio/x-pn-realaudio-plugin" autostart="true" controls="ControlPanel" src="歌曲链接地址">

大播放器不直接放

<EMBED src=歌曲链接地址 volume="100" width=250 height=20 hidden="FALSE" autostart="fault" type="audio/x-pn-realaudio-plugin" controls="PlayButton"></EMBED>

播放器直接放

<embed width="426" height="20" type="audio/x-pn-realaudio-plugin" autostart="true" controls="ControlPanel" src="歌曲链接地址">

仿真播放器rm

<embed src="歌曲链接地址" width="280，80%" height="60，80%" autostart="true"><embed>

视频点击播放

<object id=videowindow1 width=480 height=330 classid="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6">
<param name=URL value=歌曲链接地址>
<param name=AUTOSTART value=0></object>

说明：一般用来插入mp3 rm ra ram asf mid等音乐文件，如果要隐藏播放器，把width和height的数值改成0或者1就可以了。

二、添加图片

插入背景图片

<TABLE align=center background="背景图" border=0 cellPadding=0 cellSpacing=0 borderColor=#ffff00 width="100%"><TBODY><TR><TD>

内容，文字或图片.....

</TD></TR></TBODY></TABLE>

<TABLE> 的参数设定（常用）：

<table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#CF0000" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">

注解：
width="400"

表格宽度，接受绝对值（如 80）及相对值（如 80%）。

border="1"

表格边框的厚度，不同浏览器有不同的内定值，故请指明。

cellspacing="2"

表格格线的厚度

align="CENTER"

表格的摆放位置（水平），可选值为： left, right, center

valign="TOP".

表格里内容的对齐方式（垂直），可选值为： top, middle, bottom。

background="myweb.gif"

表格的背景图片，与 bgcolor 不要同用。

bgcolor="#0000FF"

表格的底色，与 background 不要同用

bordercolor="#CF0000"

表格边框颜色

bordercolorlight="#00FF00"

表格边框向光部分的颜色

bordercolordark="#00FFFF"

表格边框背光部分的颜色，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。

cols="2"

表格栏位数目，只是让浏览器在下载表格时先画出整个表格而已。

三、文字设置

1、文字基本设制

基本代码如下：

<P align=center><FONT color=#0066ff face=隶书 size=5>插入文字</FONT></P>

align=center 表示字体居中，可选值为居右（right）居左（left）

color=颜色代码具体颜色代码可参照：颜色选取＜＜点击查看

face=字体常用字体为：宋体.黑体.楷体.仿宋.新宋体.细明体等

size=字体大小，这里的最大值为7 取值越大文字就越大

2、大字体文字

代码：

<font style=font:40pt face=新宋体 color=#ff0000>插入文字</font>

font:40pt 数值越大文字就越大。

3、移动文字设置：

基本代码1：

<marquee direction=移动方向 scrollamount=移动速度数值>插入文字</marquee>

说明：direction=移动方向可选值为向上(up) 向下(down) 向左(left) 向右(right)

基本代码2：

<marquee behavior=移动效果>插入文字</marquee>

说明：

behavior=scroll 一圈一圈绕着走

behavior=slide 只走一次

behavior=alternate 来回走

停停走走：

代码如下：

<marquee scrolldelay=500 scrollamount=100>插入文字</marquee>

4，文字特效显示：

效果一、<CENTER><FONT style="COLOR: #e4dc9b; FILTER: shadow(color=black); FONT-FAMILY: 华文彩云; FONT-SIZE: 30pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>欢迎光临中年贴图</B></FONT></CENTER>

效果二、<CENTER><FONT style="COLOR: #e4dc9b; FILTER: glow(color=black); FONT-FAMILY: 华文彩云; FONT-SIZE: 30pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>欢迎光临中年贴图</B></FONT></CENTER>

效果三、<CENTER><FONT color=#0099ff style="FILTER: blur(add=1, direction=40,strength=10); FONT-SIZE: 30px; FONT-WEIGHT: bolder; POSITION: relative; LINE-HEIGHT: 150%; WIDTH: 450px">欢迎光临中年贴图</FONT></CENTER>

效果四：

原代码：

<MARQUEE behavior=alternate direction=up height=150 scrollAmount=5><MARQUEE behavior=altrnate scrollAmount=2 width=460 <IMG src="http://www.east128.com/bbs/UploadFile/2003-9/20039251018214901.gif"><FONT color=red face=楷体_gb2312 size=7>欢迎光临中年贴图</FONT></MARQUEE></MARQUE></MARQUEE>

效果五：

<FONT color=#0096ff face=隶书 size=7><MARQUEE height=50 width=240>欢迎你朋友</FONT></MARQUEE><FONT color=#0000ff face=隶书 size=7><MARQUEE direction=right height=50 width=240>友朋你迎欢</MARQUEE></FONT></FONT>

注明：在用这种效果时，文字移动范围的宽width的取值很重要，两段文字移动范转的width取值和一定要小于背景层width

四、添加时钟链接

给你的blog增加flash时钟
格式
一、刻度时钟：
说明：
1、http://www.butabon.com/Clock/clock_038.swf是时钟的flash地址，可以在IE中预览；
2、其中的038可以替换成000-039之间或者051-059之间的任何一个数字，请先在IE中预览，然后选择自己喜欢的。
二、数字时钟：
(一) 说明：
1、http://www.butabon.com/Clock/digiwide019.swf同样是时钟的flash地址，可以在IE中预览；
2、其中的019可在000-019之间选择。
(二) 说明：
1、http://www.butabon.com/Clock/digital_019.swf同样是时钟的flash地址，可以在IE中预览；
2、其中的019可在000-019之间的任何一个你可以在IE中可以成功预览的数字(请自己测试)。
另推荐一批flash时钟的地址：http://fengzhuju.nease.net/previews/clocks/clock1.swf，其中的clock1可以换成clock1~clock100，请根据自己的喜好进行您的选择。

时钟样式请见：163款各式时钟:http://myok.blogchina.com/1568354.html

五、更改鼠标样式

想要更改鼠标指针的代码，只需在模板DIY的CSS代码中加入以下代码：

body{cursor:url('鼠标指针图片网址')}

A{(cursor:url('鼠标指针图片网址')}

说明1：第一行是鼠标指针初始形态，第二行是鼠标指针碰到链接的形态。

说明2：你需要两个鼠标指针图片（最好这两个图片是一套或是相近的）。

说明3：鼠标指针的图片格式是.cur和.ani，不是.jpg、.gif或是其它图片格式，这点请注意。

说明4：如果你喜欢的鼠标指针只有一张图片而不是两张，那么A{(cursor:url('鼠标指针图片网址')}这段代码就不用写了，一张鼠标指针图片其实也行的。
代码一：
CURSOR: url('http://www.52blog.net/uploadfile/20041214112739616.cur');

代码二：cursor:url(http://yuhou.net/build/images/03.cur);

代码三：
CURSOR: url('http://www.blogcup.com/uploadfile/200559203014735.ani');

代码四：CURSOR: url('http://soft.mumayi.net/inc/Arrow.ani');

代码五：cursor:url(http://www.51hongtu.com/mouse.ani);

代码六：cursor:url(http://www.5tb.com/link.ani);

代码七：CURSOR: url('http://www.jzmoney.com/cursor2.cur');

代码八：CURSOR: url('http://lengku.net//index/mouse.ani');

代码九：CURSOR: url('http://www.chinahrgg.cn/mouse.ani');

代码十：CURSOR: url(http://clsky.net/pic/cur.cur');

提示：代码加在样式表中的“body{ ”后面即可!

六、取消手拉手

取消博客手拉手的方法,看看把下面的代码加入到“单篇文章CCS代码”中，看看效果。

div.operation

{ text:expression((children != null && children.length>0 && children[0].name=="relatedDiary")?style.display = "none":"") }

这里判断了是否是博客手拉手的DIV，要是是则不显示，否则显示。

七、轻松实现博客介绍开头空两格的方法

一：直接按空格

二：用<P>、</P>标签
方法一：首先登陆你的网站，点击参数设置，然后在博客摘要里你的文字前输入下面字符：

说明：在HTML语言中，代表空格的代码，以上相当于你以代码的形式输入了八个空格。

方法二：登陆你的网站，点击参数设置，然后在博客摘要里将<PRE>和</PRE>分别加在你的文字内容的最前面和最后面，接着在第一个汉字前按八下空格，然后保存，更新主页即可。

说明：<PRE>、</PRE>标签在HTML中具有预格式化功能，能够完全保留你的空格和回车。

方法三：进入更换模板－模板DIY，在CSS原码中找到以下代码：

div#blogContent{

加入以下一句代码：

white-space:pre;

然后回到参数设置－博客摘要，在第一个汉字前按两下空格，保存并更新主页。

说明：white-space:pre是CSS中预格式化功能的属性代码，功能同方法二。

八、将图片作为文章栏目的背景

找到以下这段代码：

/*=======栏目=======*/

div#category{

……

在它的最后面加一句话：

background-image: url（图片网址）;

比如：

/*=======栏目=======*/

div#category{

margin-left:12px;

margin-right:12px;

color: #636563;

height: 30px;

padding-top:12px;

margin: 5px;

background-image: url(http://bimzcy.blogchina.com/inc/xiaonvhai.jpg);

}

（友情提示：根据笔者的经验，图片的宽度以<=540象素合适，如果超过这个宽度的话可以用ACDSEE来裁剪、来重调图片大小，很方便的）

九、将图片作为博客介绍的背景

找到以下这段代码：
/*=======Blog介绍=======*/

div#blogContent{

在最后同样加入一段下面的代码：

background-image: url(图片网址);

比如：

/*=======Blog介绍=======*/

div#blogContent{

width:570px;

text-align: left;

background-color:#ffffff;

font-family: Arial,Helvetica,sans-serif;

font-size:9pt;

color: #333333;

margin-top:2px;

background-image: url(http://bimzcy.blogchina.com/inc/xiaonvhai.jpg);
}

十、改变主页上功能模块标题文字颜色

找到以下代码：

/*===============每一栏的标题=====================*/

h4{

font-family: Arial,Helvetica,sans-serif;

font-size:9pt;

font-weight: bold;

color: Black;

把color：后面的颜色名称改为你想要的颜色名称即可。
参考资料：http://caoyee.bokee.com/3814674.html