（博客技巧）一些博客代码_哈哈靖

（博客技巧）一些博客代码(2006-08-07 14:56:50)

收集了一些非常实用的新浪博客技巧，有很多大家都在用，我把它们汇集在一篇文章里方便以后查阅。

内容很丰富，从文字的特效、图文的混排到页面的装饰、添加背景音乐都有哦！

文字特效

参数汇总解析：
#xxxxxx表示颜色代码，替换改变相应颜色
strength表示强度（如发光效果等）
direction投影等角度（必须添45的倍数）

使用方法：
发表文章时点“显示原代码”，然后输入下列代码就可以了。

代码范例：
<div style='border:1px #FF0000 solid;'>红色边框</div>

红色边框

<font style="text-decoration:line-through">刪除线</font>
刪除线

<FONT style="BACKGROUND-COLOR: #ffddff">加上背景色</FONT>
加上背景色

<font style="filter:FlipH;height:10pt;">左右翻转效果</font>
左右翻转效果

<font style="filter:FlipV ;height:10pt;">上下翻转效果</font>
上下翻转效果

<FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#4A7AC9,strength=2); COLOR: #ffffff; HEIGHT: 9pt">发光文字效果</FONT>
发光文字效果

<FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#FF0000,strength=2); COLOR: #ffffff; HEIGHT: 9pt">发光文字效果</FONT>
发光文字效果

<FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#FF0080,strength=2); COLOR: #ffffff; HEIGHT: 9pt">发光文字效果</FONT>
发光文字效果

<FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#FF8000,strength=2); COLOR: #ffffff; HEIGHT: 9pt">发光文字效果</FONT>
发光文字效果

<FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#008080,strength=2); COLOR: #ffffff; HEIGHT: 9pt">发光文字效果</FONT>
发光文字效果

<FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#0000FF,strength=2); COLOR: #ffffff; HEIGHT: 9pt">发光文字效果</FONT>
发光文字效果

<FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#8000FF,strength=2); COLOR: #ffffff; HEIGHT: 9pt">发光文字效果</FONT>
发光文字效果

<FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#000000,strength=2); COLOR: #ffffff; HEIGHT: 9pt">发光文字效果</FONT>
发光文字效果

<FONT style="FONT-SIZE: 12pt; FILTER: Shadow(color=#4A7AC9,direction=135); HEIGHT: 19pt" face=Verdana color=#ffffff>投射阴影文字效果  </FONT>
投射阴影文字效果

<FONT style="FONT-SIZE: 12pt; FILTER: Shadow(color=#FF0000,direction=135); HEIGHT: 19pt" face=Verdana color=#ffffff>投射阴影文字效果   </FONT>
投射阴影文字效果

<FONT style="FONT-SIZE: 12pt; FILTER: Shadow(color=#FF0080,direction=135); HEIGHT: 19pt" face=Verdana color=#ffffff>投射阴影文字效果   </FONT>
投射阴影文字效果

<FONT style="FONT-SIZE: 12pt; FILTER: Shadow(color=#FF8000,direction=135); HEIGHT: 19pt" face=Verdana color=#ffffff>投射阴影文字效果   </FONT>
投射阴影文字效果

<FONT style="FONT-SIZE: 12pt; FILTER: Shadow(color=#008080,direction=135); HEIGHT: 19pt" face=Verdana color=#ffffff>投射阴影文字效果   </FONT>
投射阴影文字效果

<FONT style="FONT-SIZE: 12pt; FILTER: Shadow(color=#0000FF,direction=135); HEIGHT: 19pt" face=Verdana color=#ffffff>投射阴影文字效果   </FONT>
投射阴影文字效果

<FONT style="FONT-SIZE: 12pt; FILTER: Shadow(color=#8000FF,direction=135); HEIGHT: 19pt" face=Verdana color=#ffffff>投射阴影文字效果   </FONT>
投射阴影文字效果

<FONT style="FONT-SIZE: 12pt; FILTER: Shadow(color=#000000,direction=135); HEIGHT: 19pt" face=Verdana color=#ffffff>投射阴影文字效果   </FONT>
投射阴影文字效果

<font style="FILTER:Dropshadow(color=#cccccc,offX=3,offY=3); height=1px">阴影文字效果</font>
阴影文字效果

?/P>

<DIV style="WIDTH: 80px; HEIGHT: 19px; BACKGROUND-COLOR: #cccccc"><FONT style="FILTER: Dropshadow(color=#FFFFFF,offX=1,offY=1); HEIGHT: 15pt" color=#000000> 雕刻文字效果</FONT></DIV>

雕刻文字效果

<DIV style="FONT-SIZE: 14pt; FILTER: Wave(freq=17,strength=3,lightstrength=1,phase=0); WIDTH: 125px; LINE-HEIGHT: 15pt; FONT-FAMILY: Verdana; HEIGHT: 20px" align=left>
<FONT color=#ff8000><STRONG><B>扭曲文字效果</B></STRONG></FONT></DIV>

扭曲文字效果

二.版面特效
<DIV style="writing-mode:tb-rl;text-align:left;font-family:Arial">文字竖排</DIV>

文字竖排

writing-mode设置书写模式，text-align设置文字对齐方式，font-family设置字型

插入文章背景图和文章左右配图(图文混排效果)

一、如何插入文章背景，

代码就是：

　　其中“width”一般是显示100%，也就是宽度在文章内全部显示，也可以设定具体数值！“height”是高度，高度大小其实没多大事，当文章内容超过它的高度的时候，表格会自动拉长！编辑文章的时候，找好你的背景图片地址，在显示源代码前打勾，把以上代码放进去，再把勾取消掉，就可以在图片上编辑文章了！

　　二、接下来给大家讲一下如何实现左右文章配图:

1、图片在右，文字在左

代码为:

其中“<A href="对图片的链接地址" target=_blank>”表示对图片进行链接，如果不需要的话只要把“<A href="对图片的链接地址" target=_blank>”和“</A>”删了就行了，“target=_blank”表示点击图片后链接在新窗口中打开，如果没有这个，则点击图片后链接在默认窗口中打开！

2、图片在左，文字在右

只要把“align=right”改为“align=left”就行了，即为:

调整图片于文字的距离可加入“vspace=上下距离 hspace=左右距离”使用不同数值效果不一样。比如改后的代码是：
<P><A href="对图片的链接地址" target=_blank><IMG height=100 src="图片URL地址" width=100 align=left hspace=10 vspace=10 border=0></A>文章内容</P>

在您的blog上填加水滴、雪花等效果

透明FLASH素材大合辑。
http://imgfree.21cn.com/free/flash/1.swf红色背景白色小流星
http://imgfree.21cn.com/free/flash/2.swf浅绿色背景亮色竖条
http://imgfree.21cn.com/free/flash/3.swf光球光芒时隐时现
http://imgfree.21cn.com/free/flash/4.swf米字星光
http://imgfree.21cn.com/free/flash/5.swf灰色背景米字星光
http://imgfree.21cn.com/free/flash/6.swf灰蓝背景飘落雨滴
http://imgfree.21cn.com/free/flash/7.swf黄色背景飞星闪闪
后面还有很多，就不一一列举了，大家可以自己改变后面的数字。

如何更改鼠标样式

操作：

代码：

<STYLE type=text/css>
a:hover {cursor:url('鼠标网址1')}
BODY {cursor:url('鼠标网址2')</STYLE>

说明：①其中“.ani”后缀的文件动态鼠标文件

　　　②“.cur”结尾的文件为静态鼠标文件，在使用时请注意。
　　　③以上代码中，Body后面的“鼠标网址2”是显示在文章主体中的鼠标样式,也就是大部分位置会显示你在此处替换的鼠标网址.

　　　④“鼠标网址1”则是会在你的鼠标移动到某个栏目有链接的地方才会显示的鼠标样式,普通情况不会显示。

鼠标样式请点击http://myok.bokee.com/3429184.html查看，共130款。

如何添加挂件

代码：
左联代码:
<DIV id=moaz style="LEFT: 10px; POSITION: absolute; TOP: 50px"><IMG src="图片网址" border=0 alt=左对联></DIV>　　

右联代码:
<DIV id=moaz style="RIGHT: 10px; POSITION: absolute; TOP: 50px"><IMG src="图片网址" border=0 alt=右对联></DIV>

说明：以上代码需要将文字"图片地址"替换成您的真实图片地址。操作同上

如何添加左右对联

左侧对联代码：

<DIV style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; FILTER: progid:DXImageTransform.Microsoftpadding:8px; ; LEFT: expression_r(eval(document.body.scrollLeft)+eval(document.body.clientWidth)-970); BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP: expression_r(eval(document.body.scrollTop)+eval(document.body.clientHeight)-500); TEXT-ALIGN: center"><IMG src="图片网址" border=0></DIV>

右侧对联代码：

说明：以上代码需要将文字"图片地址"替换成您的真实图片地址，操作同上。

在BLOG里加入音乐

(1)加入背景音乐（页面不显示播放器）
代码1：<BGSOUND src="音乐文件网址" loop=infinite>，或
代码2：<img dynsrc="音乐文件网址" loop=infinite>
注意：这里是添加在已经建立好、有内容的模板里。
此用法也适用于加入文章中的源代码后，变成某个文章的背景音乐。

(2)加入播放器，使用播放器播放背景音乐(可以单独新建模板)
Windows Media Player播放器的２种代码

代码1：
<DIV><OBJECT id=videowindow1 height=185 width=179 classid=CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6><PARAM NAME="URL" VALUE="音乐文件网址"><PARAM NAME="playCount" VALUE="infinite"><PARAM NAME="autoStart" VALUE="1"><PARAM NAME="volume" VALUE="50"><PARAM NAME="uiMode" VALUE="full"><PARAM NAME="stretchToFit" VALUE="1"></OBJECT></DIV>

注：Name后的英文可以替换为数字，表示重复播放多少次，如果不更改表示永久循环播放；Value的数字表示是否自动播放，更改为"0"时不会自动播放，"1"的时候是自动播放。

万能播放器代码2：
<DIV><EMBED id=mePlay style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid" codeBase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,5,0803 src=音乐文件网址 width=179 height=185 type=application/x-oleobject classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" standby="Loading Windows Media Player components..." loop="3"></EMBED></DIV>

注：Loop后引号里的数字表示重复播放次数，可替换成你想要的数字，如果需要改成永久循环可以修改为"infinite"。

(3)更简单的音频自动播放代码

(1)新增一个空白面板，点选“源代码”，粘贴代码如下：
<embed src=歌曲网址 width=200 height=50 type=audio/mpeg loop="true" autostart="true">

歌曲网举例：
春风 http://www2.qglt.com.cn/wsrmlt/club/music/shangjianzhong/09.MP3
友谊天长地久（魂断蓝桥萨克斯） http://www.16800000.com/yinyue/yinyue/youyitianxhang.mp3
回家（萨克斯） http://www.syps.com/ytai/yshu/ysxs/ys101/201.mp3
茉莉花（萨克斯） http://www.xinyudi.com/mp3/11693.mp3

注意：loop="true"表示无限次循环 loop="false"表示自由控制播放次数。等号后面也可以换成任何阿拉伯数字。height="高度值" width="宽度值" 这些同样可以自由调控。此外还应注意：歌曲格式应该为mp3。

(2)点击控制面——BLOG信息设置--定制我的首页，选择添加模块，在出现的提示框中，选中使用该模块，然后保存整个模版。此模块即可自动显示在首页。

另外还有：
更换模板横幅的方法：http://blog.sina.com.cn/u/48e6e36d010005gi

博客标题的美化方法：http://blog.sina.com.cn/u/48e6e36d010005gj

阅读|评论|收藏|打印|举报

前一篇：宜昌街头的“裸男”
后一篇：大家来吃果冻了～

评论重要提示：警惕虚假中奖信息，点击查看详情[发评论]

评论加载中，请稍候...

发评论 明星私家相册

插入表情

登录名：
密码：
找回密码
注册
昵称：
匿名评论

验证码： 看不清楚数字吗？点击这里再试试。收听验证码

发评论

以上网友发言只代表其个人观点，不代表新浪网的观点或立场。