2006-09-12

Blogger-Beta Hack之“导航菜单式的分类”

8"O"又去偷师了,结果就是现在新的界面效果。将分类移到页面的上方,显示成浏览器标签页(导航菜单)的风格。有点儿意思吧?直接进入正题,看看怎样一步一步实现这个效果。

1. 选择导航菜单的样式
如果你选择8"O"-Beta上这种样式,可以跳过此步骤。也可以从下面的11种样式中挑选适合你blogger风格的导航菜单。

感谢exploding boy免费提供这些导航菜单。点击下载所有样式的导航菜单

2. 添加Label这个页面元素(page element)
如果不是新注册的blogger-beta用户,应该已经在侧边栏上添加了Label。可以跳过此步骤。
没有Label的朋友,可以在可视化模板编辑中添加页面元素,选择Label。

3. 扩展Header
在模板HTML编辑中找到以下代码(友情提醒:更改模板前先备份):
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
将其更改为:
<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">
保存模板后回到可视化模板编辑,将Label从侧边栏拖放到原来的Header下


4. 添加CSS样式
如果你和8"O"一样选择F样式,那么复制下面的代码,粘贴到CSS样式表的最后("]]>"标志前)
/*- Menu Tabs F By http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/------
*/

#tabsF {
float:left;
width:100%;
font-size:80%;
line-height:normal;
border-bottom:1px solid $bordercolor;
/*Notice the use of $bordercolor to match with the Beta Blogger Settings*/
}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url(" http://www.anniyalogam.com/labeltabs/tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}

上述代码中的图片来自Ramani的网站,你也可以将图片放到自己的blogger上,然后更改图片位置。

如果你选择其他样式的导航菜单,则将相应的CSS代码复制到上述位置。

5. 最关键的一步(特别感谢Hoctro
找到下面的代码:
<b:widget id='Label1' locked='false' title='your label title' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

<br/>
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Select a Label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

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

将其替换成:
<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<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>

开香槟庆祝吧!

13 个说法:

匿名 说...

不错不错,不过我这里看不出你任何的页面效果。:(

坚硬的泡沫 说...

这是Beta的hack,你上8个圈圈的Blogger-Beta看看?

匿名 说...

@fung 现在应该看得到了吧!

匿名 说...

嘿嘿,不错啊

匿名 说...

我开始做的时候也是看不到,现在你说了九知道了

匿名 说...

如果选择的其它导航菜单,怎么找到那些代码?

匿名 说...

如果你下载了那个打包文件,你会发现有一个html文件,打开然后查看源代码,然后复制相应的CSS代码就ok了。

匿名 说...

那个css样式表在哪儿找?

匿名 说...

如果你下载了那个打包文件,你会发现有一个html文件,打开然后查看源代码,然后复制相应的CSS代码就ok了。

匿名 说...

为什么最后编辑告诉我input color?什么意思?
另,谢谢你给我的回信!

匿名 说...

问题已解决,不过首页不知道如何添加,我试过在可视化里添加一个lable,不过没有编辑功能,还望8"0"诲人不倦,谢谢

匿名 说...

搞定!请参看“Beta Hack之“导航菜单式的分类”——扩展版

匿名 说...

我也搞定,不过决定放弃。
因为我的字体太大,而且lable太多,看起来不够简洁

HOW TO: 怎样生成自己的标签云

搜索此博客