blogger:在Blogger Beta中将Label标签与滑动门导航技术相结合

Blogger 升级推出了 Beta 版之后，从用户使用体验方面做出了很多的改进，其中最令人欣喜的一项就是增加了 Label 标签功能，这实际上就解决了 Blogger 一直没有文章分类这个令人苦恼的问题。早在原版时代，很多人就提出过各种解决分类的办法，其中比较流行的做法是使用美味书签 (del.icio.us) 的 Tag 功能作为辅助。总之，不管用什么方法一定都是很麻烦的，而现在有了 Label 一切都变得美好了。

Label 的用途我认为也可以根据个人的喜好不同有所区别。一方面你可以把它当成标签 (tag) 用，每篇文章都可以根据关键词 (keyword) 添加多个标签。稍后我还会就此写一个标签云 (tag cloud) 的制作方法。另一方面你也可以就把它当成文章分类 (categories) 用，每篇文章就加一两个类别，这样 Label 的总数不会太多，也方便管理和快速的查阅。如果你选择后种用途，我今天就为你介绍一个 Label 标签变导航条 (navigation menu) 的效果，就像本站上面用的那个一样。这种效果下标签不宜过多，那样可能会不太美观，不过具体怎么用还要看你自己，这里只是我的个人意见。

第一步：
制作一个滑动门 (doorway) 效果的导航条，需要运用到 CSS 及 HTML 方面的知识，考虑到用户水平各异，我们还是用现成的比较方便。登陆 Exploding Boy 网站下载他们制作好的导航条压缩包。
网址如下：
http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/


导航条的各种效果参见：
http://exploding-boy.com/images/cssmenus/menus.html

第二步：
进入 Template > Page Elements 模式，为你的侧栏增加一个 Label 部件。如果原本已经有了，直接用这个也是可以的。

第三步：
使你的 Header 区域变为可编辑模式。具体操作方法是，进入 Template > Edit HTML 找到下列代码：

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">

将它改为：

<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">

改好后保存更新，再次回到 Page Elements 界面，将刚刚添加的 Label 部件移动到 Header 下方，效果如图所示：


第四步：
将之前下载的压缩包释放之后，找到名为 "menus.htm" 的文件，用你常用的代码编辑工具打开它，用浏览器查看源代码功能也可以。找到你选中的式样所代表的 CSS 代码部分，进入 Template > Edit HTML 界面，将它拷贝粘贴到你 Blogger 的代码中。

下面以我采用的 Tab Menu E 为例，其中我对几处修改做出了标注，用于说明的部分可以不用粘贴。

/*- Menu Tabs E--------------------------- */

 #tabsE {
   float:left;
   width:100%;
   background:$bgcolor;
   font-size:93%;
   line-height:normal;
   border-bottom:1px solid $bordercolor;
   }
/*将背景与边线的颜色与你的 Blogger 设置保持一致*/

#tabsE ul {
 margin:0;
 padding:10px 10px 0 50px;
 list-style:none;
   }
 #tabsE li {
   display:inline;
   margin:0;
   padding:0;
   }
 #tabsE a {
   float:left;
   background:url("tableftE.gif") no-repeat left top;
   margin:0;
   padding:0 0 0 4px;
   text-decoration:none;
   }
 #tabsE a span {
   float:left;
   display:block;
   background:url("tabrightE.gif") no-repeat right top;
   padding:5px 15px 4px 6px;
   color:#FFF;
   }
/*将压缩包中的同名图片上传到自己的网络空间后，这两处改为图片的 URL 地址，注意分清左右*/

/* Commented Backslash Hack hides rule from IE5-Mac \*/
 #tabsE a span {float:none;}
 /* End IE5-Mac hack */
 #tabsE a:hover span {
   color:#FFF;
   }
 #tabsE a:hover {
   background-position:0% -42px;
   }
 #tabsE a:hover span {
   background-position:100% -42px;
   }

第五步：
开始修改你的 Label 部件格式。进入 Template > Edit HTML 界面，勾选 Expand Widget Templates 展开，找到和你 Label 所对应的部分，还是用我的代码来举例：

修改前：

<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
  <h2><data:title/></h2>
</b:if>
<div class='widget-content'>
  <ul>
  <b:loop values='data:labels' var='label'>
    <li>
      <b:if cond='data:blog.url == data:label.url'>
        <data:label.name/>
      <b:else/>
        <a expr:href='data:label.url'><data:label.name/></a>
      </b:if>
      (<data:label.count/>)
    </li>
  </b:loop>
  </ul>

  <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

修改后：

<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
  <div id='tabsE'>
  <ul>
    <b:loop values='data:labels' var='label'>
      <li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
    </b:loop>
  </ul>
  <!-- <b:include name='quickedit'/> -->
  </div>
</b:includable>
</b:widget>

请仔细对照着修改，认真检查不要发生任何错误，之后保存更新就大功告成了。如果和周围的样式还有所冲突，要具体问题具体分析，接着再通过修改 CSS 和 HTML 来让它们看起来更融合，更统一，希望你能够顺利成功。;-p

后记：这篇文章我总共写了两遍，本来昨晚就可以发出了，但当我敲打完最后一个字符，点击 SAVE AS DRAFT 之后，我面前突然出现了一句致歉性的词语，接着我辛苦写完的文章就再也找不回来了。愤怒、懊恼全都于事无补，事实再一次提醒了我，正在使用的可是一款 Beta 版系统啊。希望 Blogger 能够早日增加如同 Gmail 那样的自动存档功能，可在此之前我们还是要自己注意多备份几次吧。

希望上文对你有所帮助，如有任何疑问可留言告知，我会尽快给予回复。