Joost邀请

需要的朋友可以点击下面的链接留名。 Joost™ the best of tv and the internet
本博因故暂停更新。请重新订阅或访问8个圈圈的Blogger

8个圈圈的Blogger

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>

开香槟庆祝吧!

更新(20061230)Beta Hack之“导航菜单式的分类”——扩展版

19 [圈阅]:

匿名 说...

如果选择Tab Menu K的话,怎么找相对应的代码?

8"O" 说...

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

tokyoer 说...

显示的效果和下载的网页上的效果不一样,显示不出图片,鼠标移到标签上面文字就消失了,请问有高招解决吗?

8"O" 说...

你需要在CSS代码中指定图片位置(事先要将所要用到的图片如tabFleft.gif和tabFright.gif上传到网上-如自己的网上空间、相册、googlepages)

8"O" 说...

更明确一点,将对应图片上传到网上空间,并以相应的图片地址替换下列代码中的图片地址background:url("图片地址")

冰 山 说...

"保存模板后回到可视化模板编辑,将Label从侧边栏拖放到原来的Header下"
这句有点 不明白,可不可以解释一下英文的意思

到第四步保存模版后老是提示“不能保存模版代码”,这是为什么?是不是我没找对“]]”的位置。

8O 说...

@冰山,意思就是将“标签”(label)这个页面元素,拖放到“标题”(header)下。应该放在]]></b:skin>这个位置之前

Sunwei 说...

Thanks!花了一天时间,终于成功了。不过我有一个问题:如何直接引用Blogger的相册图片?Picasa不能上传GIF的图,我后来改成JPG在Picasa用了,但我仍希望直接引用Blogger的相册的GIF图片。

挪威没有森林 说...

所有的代码都按上面写好了,预览的时候却打不开博客了,会直接关闭,然后在代码那里出行代码:bordercolor.为红色,希望高手给指点下.谢谢!

8O 说...

@sunwei,o一般都是把gif文件传到GPC上然后再引用。

@森林,建议:把border-bottom:1px solid $bordercolor;的黑体字部分直接改成颜色44,如#bbb

8O 说...

@森林,或者你可以上o的新博客下载o的模板参考一下。

Lightning 说...

你好!
最后最关键的一步,根本找不到你所说的代码!不知道把代码替换到什么地方?

8O 说...

@lightning,在进行html编辑时请选中“扩展窗口小部件模板

NovelX 说...

8O有时间能帮我看看我的blog(http://novelx.blogspot.com)吗?我在加了导航栏之后遇到两个问题,一个问题是如果标签有英文,那么所有中文标签会被抬高,中英文标签下端就不对齐了;第二个问题是当鼠标在标签上悬停时,副标题的文字会消失。我用的是打包文件中的tagI。谢谢~~

8O 说...

@novelx,看过了,一切正常。

NovelX 说...

第二个问题我后来也没有发现了。第一个问题在ie下有,ff没有...

GAME 说...

可是我添加了页首图片,标签出现在了图片上,如何定位啊?谢谢

8O 说...

试试下面的方法:

进入html编辑,在css header部分添加

#nav-wrapper {
width:868px;(宽度根据你自己的模板填写)
}


在body的header-wrap后添加

<div id='nav-wrapper'>
      <b:section class='header' id='nav' maxwidgets='2' showaddelement='yes'>
<b:widget id='HTML13' locked='false' title='' type='HTML'/>

</b:section>
    </div>


然后回到页面元素编辑,在nav-wrapper中添加相应的html代码。

怎么?问题有没有解决?

GAME 说...

Perfect!非常之感谢,学习,学习~!