吉祥如意的博客

超越自己，不断的完善自己！

日志

关于我

穆美美

有梦想不需要任何理由！

文章分类

引用如何使用博客各种代码（强烈推荐）

2007-12-03 14:31:47| 分类： @博客代码 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

引用

感叹号的如何使用博客各种代码（强烈推荐）

    博客的制作优化需要通过代码来完成，网易博客给我们提供了简单实用的制作平台，只需要少量的CSS代码知识就可以做的不错，这也是很多博友选择网易的原因吧，但对新手而言，还是有难度，下面我就将博客中所有代码的基本使用方法加以总结，希望对朋友们有帮助。

    代码的获取有很多方式，自己编辑或到别人博客中去找都行，对新手而言建议刚开始用别人现成的，通过摸索实践有一定代码知识后再自己编辑，这样更容易体会到做博客的乐趣！！

代码加入首页模块的总方法

1、登陆自己的博客。

2、在编辑状态下，点最上方“预览我的博客”右边的工具条,(或将鼠标放在上面不要动就会出现）。

顺序打开 "排版设置——内容模板——自定义模板——添加自定义HTML（点击颜色变深后确定）"

3、新模块"添加自定义HTML"将显示出现在网页左下角

4、复制自己做好的（或别人现成的）代码到"自定义HTML"模板下方的空白处

5、根据喜好替换代码中的“http://地址”并修改个别数据（现成的就不用改了）

（若是flash动画，就是所有地址结尾是“swf”的，也可将4，5步换成如此操作：点"自定义HTML"模板标题下方的flash选项，在出现的对话框中填上“http://地址”即可，效果一样;wma文件也一样）

6、点击"预览"查看效果,调试满意后点击"新增"保存,记得给你的模板起个名字然后点“保存”

7、用鼠标拖动你新增模块上方的编辑横条，把模块拖放到你喜欢的位置

8、点击网页右上角的“保存”

9、"预览我的博客"，就可以看到效果出现在你的博客上了。

一、在首页模块中插入图片（详细请参考日志“图片特效代码大全”）

    （1）固定图片代码：

   普通<img src="http://图片地址" border="0" width="344（宽度）" height="255（高度）">


   高级<img src="http://图片地址" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="图片描述" lowsrc="低解析度图片地址">

说明：

src="http://图片地址"
图片来源，接受 .gif, .jpg 及 .png 格式，前两者通行已久，后者则由 96 年开始发展，于未来取代前两者。若图片档与该 html 档同处一目录则只需写上档案名称，否则必须加上正确的路径，相对或绝对均可。
width=100 height=100
设定图片大小，此宽度及高度一般采用 pixels 作单位。通常只设为图片的真实大小，以免失真，若需要改图片大小最好使用图像编辑工具。（改变大小的宽和高与原图的宽和高要成正比例，图片最好是改小不改大，以免失真
hspace=5 vspace=5
设定图片边沿空白，以免文字或其它图片贴近。hspace 是设定图片左右的空间， vspace是设定图片上下的空间，高度采用 pixels 作单位。
border=2
图片边框厚度，不要边框数值设为0
align="top"
调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底部、左右等，可选值：top, middle, bottom, left, right，内定为 botom。Netscape 还支持 texttop, baseline, absmiddle, absbottom，
texttop 表示图片和文字依顶线对齐，
baseline 表示图片对齐到目前文字行底线值，
absmiddle 表示图片对齐到目前文字行绝对中央，
absbottom 表示图片对齐到目前文字行绝对底部，（绝对底部是指它考虑到比如 y 、g、q 等字的下边）。
alt="图片描述"
这是用以描述该图形的文字，若使用文字浏览器，由于不支持图片，这些文字将会代替图片被显示。若支持图片的浏览器，当鼠标移至图片上该文字也会显示
lowsrc="低解析度图片地址"
设定先显示低解析度的图片，若加入的是一张很大的图片，下载要很长的时间，这张低解析度的图片会先被显示以免浏览者失去兴趣，通常是原图的黑白版本

（2）移动图片代码：

<MARQUEE scrollAmount=1 scrollDelay=1 direction=up width=200 height=230>

<DIV align=center><IMG src="http://图片地址" width=200 border=0></DIV> </MARQUEE>

其中一个<div...>....</div>为一个单元，表示一组图片，想添加更多图片滚动可以根据需要重复，格式很清楚了，但是滚动图片多了会影响加载速度。
（3）固定图片上有文字移动的代码：

         <TABLE borderColor=#cd5c5c height=350 width=450 align=center border=3>

<TBODY>

<TR>

<TD background=背景图片地址>

<MARQUEE scrollAmount=3 direction=down behavior=alternate height=350>

<P align=center><FONT color=red size=6><B>要输入的文字 <br> 要输入的文字....</B></FONT></P></MARQUEE></TD></TR></TBODY></TABLE>

说明：（2）（3）中代码中“width”是宽度，“height”是高度。图片地址就是网上以 .jpg .bmp .gif 结尾的网址，scrollAmount=3是移动速度， direction=down是从上到下，换成up是从下到上，left从左到右,right从右到左。

（4）获取图片地址的具体方法是：

      在网上搜索到喜欢的图片，在图片上点右键查看“属性”就可以获得图片的地址；
或将自己喜欢的图片上传到网易相册上，以获得一个图片网址（在图片上点右键查看“属性”）；也可进入我版面上的文字链接获取任意图片地址的方法在专业网站获取地址。

二、在首页模块中插入链接（参考“博客常用日志链接导航栏代码”）

（1）文字显示的链接代码：

<a href="链接地址" target=_blank><FONT color=#3300FF> <h5>链接名称</h5></FONT></A>

（2）图片显示的链接代码：

<a target="cont" href="链接地址 "><img src="图片地址" width="100" height="80" border="0"></a>

（3）图片移动显示的链接代码：（参考“制作可移动的友情连接”）

<marquee behavior="scroll" direction=right width="90%" height="100" scrollamount="2" scrolldelay="30" ><a target="cont" href="链接地址"><img src="图片地址" width="100" height="100" border="0"></a></marquee>

代码中scrollAmount=3是速度， direction=right从右到左，换成down是从上到下，up是从下到上，left从左到右,right从右到左。

三、在首页模块中插入动画、flash、游戏

<embed src="flash动画、游戏地址" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" quality="high" width="100%"></embed>

也可将进行如此操作：

点"自定义HTML"模板标题下方的flash选项，在出现的对话框中填上“http://flash动画、游戏地址”确定即可，效果一样;而且在下方你会看到同上类似的代码。

四、在博客日志中插入视频、动画、flash：

第一步、登陆自己的博客
第二步、在编辑状态下，点最上方“预览我的博客”右边的工具条，点“写日志”

第三步、点选日志编辑框左下角的"<>"显示源代码
第四步、复制下面的代码到文章里面，注意用你选中的视频地址，替换代码中的视频链接地址

<div align=center></div><embed src=视频链接地址 width=200 height=186 type=audio/mpeg loop="false" autostart="false">

设置和音乐一样，"true"为自动播放,"false"为不自动播放，宽度width和高度height都可以自定义。
第五步、保存文章。
第六步、发表文章显示成功。
第七步、在首页会看到视频文章的效果

五、在日志文章中插入背景音乐代码（参考介绍几款漂亮的播放器”）

方法同上，代码如下：
<embed src="音乐地址" align="baseline" border="0" width="350" height="45" type="audio/x-pn-realaudio-plugin" console="LonelyStreet" controls="StatusBar,ControlPanel" autostart="false"></embed>

六、在日志文章中插入背景图片代码：

第一步、登陆自己的博客

第二步、在编辑状态下，点最上方“预览我的博客”右边的工具条，点“写日志”

第三步、点选左下角的"<>"显示源代码”---至关重要
第四步、复制下面的代码到里面，注意用你选中的背景图片地址，替换代码中的背景图片地址

（1）整个大背景代码：

<table width="450" border="0">
<tr>
<td height="580" background="背景图片地址"></td>
</tr>
</table>

（2）两侧背景代码：（参考“美化日志背景之枫叶系列”）
     <table cellSpacing="0" cellPadding="0" width="700" background="背景图片地址" border="0">

<tr><td><div align="center"><table cellSpacing="0" cellPadding="0" width="450" border="0"><tr><td><font style="font-size: 9pt"><br><font color="#CC3300">直接输入你的文字</font></font><font color="#CC3300"><span style="font-size: 9pt"></span></font><p><span style="font-size: 9pt"></span></td></tr></table></div></td></tr></table>

（2）信纸背景代码：

   <div align="center"><div style="PADDING-RIGHT: 0px; PADDING-LEFT: 10px; BACKGROUND: url(图片地址); FONT: 12px/25px verdana; WIDTH: 460px; PADDING-TOP: 14px; HEIGHT: 660px"><br />

<div align="left"><div style="PADDING-RIGHT: 0px; OVERFLOW-Y: auto; PADDING-LEFT:

50px; SCROLLBAR-FACE-COLOR: #ffffff; FILTER: alpha(opacity=60); OVERFLOW-X: hidden; PADDING-BOTTOM: 0px; FONT: 12px/25px verdana;SCROLLBAR-HIGHLIGHT-COLOR: #cccccc; WIDTH: 405px; SCROLLBAR-SHADOW-COLOR: #cccccc; COLOR: #cccccc;SCROLLBAR-

3DLIGHT-COLOR: #cccccc; SCROLLBAR-ARROW-COLOR: #cccccc; PADDING-TOP: 0px;SCROLLBAR-TRACK-COLOR: #cccccc; SCROLLBAR-DARKSHADOW-COLOR: #cccccc; HEIGHT:

206px"></div></div><br /></div></div>

介绍几款信纸图片地址

http://www.pinkanan.com/attachments/forumid_1/3_4uz8In6jxB8G.gif

http://www.pinkanan.com/attachments/forumid_1/6_XfpsW4sPzWP9.gif

http://bbsimg.qq.com/2005/06/02/004/799.jpg

http://bbsimg.qq.com/2005/06/02/004/818.jpg

http://bbsimg.qq.com/2005/06/02/004/813.jpg

http://bbsimg.qq.com/2005/06/02/004/805.jpg

http://bbsimg.qq.com/2005/06/02/004/793.jpg

http://bbsimg.qq.com/2005/06/02/004/787.jpg

第五步、再次点选左下角的"<>"，取消“显示源代码”的选择，你就会在编辑栏看到图片，而且光标也在图片之上（可能光标的首行不在图片的顶端，不过没有关系，尽管从光标的首行可是您的写作就行了，文字会自动顶到图片的顶端），写文章与平时一样，在光标或“直接输入你的文字”处写日志就行了
第六步、发表日志显示成功
第七步、在首页会看到有背景图片文章的效果

七、如何插入个性化鼠标（参考“个性化鼠标代码大全”）

第一步、进入日志编辑界面

第二步、和平时一样写日志，文字，图片等
第三步、点选左下角的"<>"显示代码，将出现很多代码和文字
第四步、复制代码<span style="cursor:鼠标效果链接">到所有代码的最前面，复制代码</span>到所有代码的最后面，注意用你选中的效果链接，如“'http://webme.bokee.com/inc/mouse002.ani'”然后贴到效果处就可以了。
第五步、发表日志，在浏览时就可看到效果了。

介绍几个地址     'http://webme.bokee.com/inc/mouse001.ani'

                 'http://webme.bokee.com/inc/mouse002.ani'

                后面的数值可到从001到200，也可上网搜，很多的。

八、如何插入多个特效挂件（参考精美可爱的博客浮动挂件特效）

1、固定位置挂件的源代码：
<DIV style=" RIGHT：300px; TOP: 100px"><IMG src="图片地址" border=0></A></DIV>
说明：以上为右挂件代码，更换RIGHT（右）为LEFT（左），则为左挂件代码
2、挂件随滚动条上下移动的源代码：（网易博客页面目前不适用，但日志中可用）
<DIV style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; ; RIGHT: +eval(document.body.clientWidth)-1020); FILTER: progid:DXImageTransform.Microsoftpadding:8px; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; ; ; TOP: +eval(document.body.clientHeight)-600); TEXT-ALIGN: center"><IMG src="图片地址" border=0></DIV>
代码说明：

(document.body.clientWidth)-1020);表示图片的左右位置，负数值越大距离左侧越远
(document.body.clientHeight)-600);表示图片的上下位置，负数值越大距离下方越远

挂件可以选择GIF格式的动画图片!其中LEFT: 为从左向右移的位置，即挂件距离屏幕左边缘的距离；TOP: 为从上向下移的位置，即挂件距离屏幕上边缘的距离！左右两边挂件都是以屏幕左边缘为基准的，其距离的具体数值可根据实际情况而定！

   以上的代码应该都没问题，如果不行，可能是你“地址连接”的问题，也请朋友们在使用过程中有问题及时反馈给我，你感觉还缺少哪些也请提出来，我会及时更新修改！！

评论这张

转发至微博

阅读(354)| 评论(0)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_087069085082083065086083085095087087085068082094095074',
              blogTitle:'引用 如何使用博客各种代码（强烈推荐）',
              blogAbstract:'<P\><EM\>引用</EM\></P\>  <BLOCKQUOTE\><A target=\"_blank\" href=\"http://blog.163.com/yajun119@126/\" \>感叹号</A\> 的 <A target=\"_blank\" href=\"http://blog.163.com/yajun119@126/blog/static/873572720073681445124\" \>如何使用博客各种代码（强烈推荐）</A\><BR\>  <P\>    博客的制作优化需要通过代码来完成，网易博客给我们提供了简单实用的制作平台，只需要少量的CSS代码知识就可以做的不错，这也是很多博友选择网易的原因吧，但对新手而言，还是有难度，下面我就将博客中所有代码的基本使用方法加以总结，希望对朋友们有帮助。</P\>  <P\>    代码的获取有很多方式，自己编辑或到别人博客中去找都行，对新手而言建议刚开始用别人现成的，通过摸索实践有一定代码知识后再自己编辑，这样更容易体会到做博客的乐趣！！ </P\>  <P\><FONT color=\"#0000ff\" size=\"4\" \>代码加入首页模块的总方法</FONT\></P\>  <P style=\"TEXT-INDENT: 2em;\"  \>1、登陆自己的博客。</P\>  </BLOCKQUOTE\>',
              blogTag:'博客帮助,博客教材,网易博客技巧篇,网易博客,网易,博客技巧',
              blogUrl:'blog/static/31476899200711323147727',
              isPublished:1,
              istop:false,
              type:0,
              modifyTime:1317449681780,
              publishTime:1196663507727,
              permalink:'blog/static/31476899200711323147727',
              commentCount:0,
              mainCommentCount:0,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'有梦想不需要任何理由！',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/31476899200711323147727">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

吉祥如意的博客

导航

日志

引用 如何使用博客各种代码（强烈推荐）

历史上的今天

最近读者

热度

评论

页脚

引用如何使用博客各种代码（强烈推荐）