一舟

一

日志

关于我

一舟

爱好文学,以文会友,喜欢摄影,陶醉音乐,拥抱自然,旅游天下——甘愿一舟小,摆渡人间情。

文章分类

【原创】学会漂亮日志导航的制作

2010-06-07 10:05:03| 分类：博艺交流 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

【原创】精致日志边框（花草系列） - 一舟 - zhengyongjin1949

学会漂亮日志导航的制作

文字/一舟

网易博客首页，极富个性化色彩是其特点之一。它犹如一张人的面孔，一帧书的封面。人的面孔长得一表非凡，书的封面设计别具一格，则能让人啧啧称奇。同样，打开博客首页，映入眼帘的是独具匠心的装扮，那么会吸引人的眼球，给博友留下深刻的印象。而如今博客首页的装扮，大都已离不开漂亮的日志导航。它不仅方便日志的查阅，而且可以为个性化博客首页带来一抹亮色。

网易博客的日志导航，个人认为大致可分为目录式、表格式、图片式、书架式等几种。而评价其表现形式的利弊，似乎各有千秋。目录式直接简便，但占版面大；表格式一目了然，但过于呆板；书架式还算新颖，但缺乏个性。为此，我的个人喜好，便倾向于图片的表现形式。因为图片色彩丰富，款式多样，采集方便，更在于能给博客首页的装扮增色不少。这也许是不少博友，向我了解其制作方法的原因之一吧！

下面就介绍一下我的博客日志导航的简便制作方法：

一、表现形式。

我采用的是图片式和目录式相结合的表现形式，即：在博客首页中采用的是图片式（见图一），在日志中采用的是目录式（见图二）。点击博客首页图片式日志导航的图片，就能打开日志中的目录式分类导航。点击目录式分类导航中的日志（博文）标题，就能打开此日志（博文）。博友可分别点击图一、图二，直接体验感受一下。

二、制作步骤。

1、将个人日志进行分类。

可根据个人日志的内容，分为不同的类别，如：诗歌散文、灯下随笔、图文音画、知识荟萃、养生健康……等等（类别名称字数不宜过长，采用四个字最好），一般类别在10～20个之间。另，博客日志分类和归类宜早不宜迟，等到日志多了再进行分类和归类，则需要花费更多的精力。

2、制作分类日志导航。

上述步骤完成后，网易会将个人日志根据你的安排自动归类。之后，开始制作分类日志导航。在“写日志”中，写上一个类别名称（如：诗歌散文），将网易相同类别的日志标题等文字全部复制粘贴在上面。注意只留下标题，其它的文字在粘贴后删去。如果能配上日志边框以及音乐、图片，就是一个漂亮的“目录式的分类日志导航”（见图二）。每一个类别都要分别制作一个“目录式的分类日志导航”。以后新增加的日志可按类别随时复制粘贴添加上去。掌握此方法，省去了用代码制作的麻烦。

3、制作博客首页日志导航。

首先，根据日志分类的多少，来寻找确定一组漂亮的图片的张数（当然也要根据博客首页装扮的排列要求）。并点击右键“属性”，找出每张图片的地址。之后，找到自己日志中已制作完的每一个“目录式的分类日志导航”的地址（在浏览器的最上端）。将每张图片的地址和“目录式的分类日志导航”的地址代入代码即可（代码见正文后）。这样，博客首页图片式日志导航就完成了（见图一）。此步骤可在“写日志”中操作，以依据实图检验代码的正确与否。

4、将图片式日志导航放在首页。

按以下步骤点击操作：换风格——设置首页内容——添加自定义模块——在模块名称写上：XX的日志导航——在下面空白方框中粘贴“图片式日志导航”的代码——确定——调整日志导航在首页的位置即可。

以上便是我的日志导航制作方法，个人认为制作较简便，效果较满意。欢迎大家各抒己见，相互交流，以提高各自的博艺。

【附：代码与图例】

代码(以本人首页日志导航为例，考虑全部代码过长，截取前两小段来解释其中含义，以便于自己制作，完整代码可将“图一”复制粘贴到“写日志”中，再点击〈〉取得）：

<TABLE borderColor=#ff0000 cellSpacing=9 cellPadding=0 width="20%" align=

center bgColor=#080808 border=1> <TBODY><TR><TD><FONT color=#ff6600><P

style="TEXT-INDENT: 2em"><Ahref="http://zhengyongjin1949.blog.163.

com/blog/static/620388522009826104634727/" target=_blank><IMG

title="2009年9月20日 - 一舟 - zhengyongjin1949的博客" style="DISPLAY

: block; WIDTH: 125px; HEIGHT125px; TEXT-ALIGN:

center" height=200 alt="2009年9月20日 - 一舟 - zhengyongjin1949的博客" src="http://img.blog.163.com/photo/mhaxPQQoNeouSwlIXZEong

==/5369979605686346357.jpg" width=125 border=0></A></P></FONT><

/STRONG><P></P><P style="TEXT-INDENT: 2em" align=center><FONT

color=#ff6600

size=4><STRONG>诗歌散文</STRONG></FONT></P></A>

</TD><TD> <Ahref="http://zhengyongjin1949.blog.163.com/blog/

static/620388522009826105148894/edit/"></A><P style="TEXT-INDENT: 2em" align=center> <Ahref="http://zhengyongjin1949.blog.163.

com/blog/static/620388522009826105148894/ edit/" target=_blank><IMG

title="2009年9月20日 - 一舟 - zhengyongjin1949的博客" style="DISPLAY: block; WIDTH: 125px; HEIGHT: 125px; TEXT-ALIGN: center" height=200 alt="2009年9月20日 -

一舟 - zhengyongjin1949的博客" src="http://img.blog.163. com/photo/edB6c

RuK_4zrM1V9CJtqyg==/1165587878559132732.jpg"

border=0></STRONG><STRONG></STRONG></FONT> </FONT></A></P><P

style="TEXT-INDENT:2em" align=center><FONT size=4></A><STRONG>

<FONT color=#ff6600>灯下随笔 </FONT></STRONG></FONT></P></TD>

代码说明：

红色部分是分类日志导航地址代码，黄色部分是图片地址代码，紫色文字是日志分类名称。取得完整代码后，将上面三种颜色的代码或文字替换掉即可。如图片不更换，只替换红色部分代码和紫色文字即可。因首页“自定义模块”字数受限，超过10张图片应分为两组，否则代码过长图片显示就会不完整。

（图一）

诗歌散文

灯下随笔

放飞心灵

亲情友情

快乐如风

所见所闻

我抒己见

情感杂谈

旅游天地

（图二）

诗歌散文

（引用此帖，方便查阅；点击标题，

即可进入；内容随增，敬请关注）

[置顶]【原创】我是一叶舟

[置顶]【原创】你的名字流淌在我心底

[置顶]【原创】认识您真好

[置顶]【原创】把您的名字珍藏

[置顶]【原创】静静地想您

我骄傲，我是中国人（FIASH诗歌朗诵）

枕在古典的溪畔（FIASH诗歌朗诵）

一个人的夜晚（FIASH散文朗诵）

【原创】母爱——献给2010年母亲节

【原创】祝博友五一劳动节快乐（藏头诗）

为什么一次次让我憔悴（FIASH诗歌朗诵）

夜雨敲窗（FIASH散文朗诵）

红尘隐（FIASH散文朗诵）

爱上有月亮的夜晚（FIASH散文朗诵）

一舟“诗歌散文”日志导航 - 一舟 -

评论这张

转发至微博

阅读(1020)| 评论(47)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_080075082080083065093086085095082084081064092094083065',
              blogTitle:'【原创】学会漂亮日志导航的制作',
              blogAbstract:'<TABLE cellSpacing=\"90\" cellPadding=\"1\" align=\"center\" background=\"http://img.ph.126.net/KVNYXc0SVQvv2g25yhb2qA==/3314930800722283876.jpg\" border=\"0\" \>  <TBODY\>  <TR\>  <TD\>  <TABLE borderColor=\"#82cafa\" cellSpacing=\"1\" cellPadding=\"2\" width=\"100%\"  bgColor=\"#6698ff\" border=\"1\" \>  <TBODY\>  <TR\>  <TD\>  <TABLE borderColor=\"#82cafa\" cellPadding=\"0\" width=\"100%\"  bgColor=\"#6698ff\" border=\"0\" fec=\"\"  \>  <TBODY\>  <TR\>  <TD\>  <TABLE borderColor=\"#82cafa\" cellSpacing=\"8\" cellPadding=\"2\" width=\"100%\"  bgColor=\"#afdcec\" border=\"1\" \>  <TBODY\>  <TR\>  <TD\>  <TABLE borderColor=\"#f0e68c\" height=\"300\" cellSpacing=\"2\" cellPadding=\"0\" width=\"100%\"  border=\"0\" \>  <TBODY\>  <TR\>  <TD\>  <P align=\"center\" \> </P\>  <P align=\"center\" \></P\></TD\></TR\></TABLE\></TD\></TR\></TABLE\></TD\></TR\></TABLE\></TD\></TR\></TABLE\></TD\></TR\></TABLE\>',
              blogTag:'',
              blogUrl:'blog/static/6203885220105553349998',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1316865882626,
              publishTime:1275876303819,
              permalink:'blog/static/6203885220105553349998',
              commentCount:47,
              mainCommentCount:28,
              recommendCount:4,
              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/6203885220105553349998">${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 - 订阅此博客

一舟

导航

日志

【原创】学会漂亮日志导航的制作

历史上的今天

最近读者

热度

评论

页脚