2006年12月7日星期四

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 那样的自动存档功能,可在此之前我们还是要自己注意多备份几次吧。

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

5 评论:

安傑洛の隨筆塗鴉 说...

請問怎麼像您的首頁一樣,當鼠標指到上面的Labels會馬上出現文章預覽?

GG 说...

参考这篇文章:
http://sunr.blogspot.com/2006/11/blog-post.html

安傑洛の隨筆塗鴉 说...

多謝您的回覆,我會試著做看看^^

匿名 说...

请问GG,我在网站导航生成器那里选了一组我喜欢的导航,想把它放进我的博客首页,我对照着你的方法做了,但是在Edit HTML那里,找了两次也没有找到你说的下列代码:
................showaddelement="no

请给予帮助,谢谢GG.

GG 说...

建议你用文本文档复制全部代码搜索关键词showaddelement。如果没有这个代码说明你博客代码乱了坏了,建议重新开空白模板重做。

发表评论: ☆欢迎灌水☆言论自由☆交流快乐☆