2006年12月7日星期四

blogger:如何隐藏Blogger Beta的导航条Navbar


如果你正在使用 Blogger Beta 架构博客,并同时自由托管在 Blogspot 空间下的话,那在你博客的上方就一定会出现这个叫做 Navbar 的导航条了。它其实是一个功能强大的导航工具,并有4种颜色可供选择,具体操作可以参见 Blogger 的帮助文档。

但也许有人会觉得它有些碍眼,与自己的博客风格不是很搭配,等等。那这时应该怎样把它去掉呢? Blogger 并没有提供给我们直接的操作途径,但我们依然可以通过改变模板中的 CSS 参数来达到这个效果。

首先登陆你的Blogger Beta帐户,然后点击“Template”,接着点击“Edit HTML",先在代码中找到这一行

/* global
----------------------------------------------- */

再将如下代码添加至它的后面
#navbar #Navbar1 iframe{
height:0px;
display:none;
visibility:hidden;
}

事实上你也可以将这段 Hack Code 添加到 CSS 表单中的任何位置,但应该以保持表单的规整并方便查找为原则。

现在保存更改,并从新查看你的博客,这时 Navbar 就会消失了。

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

阅读全文...

blogger:如何隐藏Blogger Beta的导航条Navbar


如果你正在使用 Blogger Beta 架构博客,并同时自由托管在 Blogspot 空间下的话,那在你博客的上方就一定会出现这个叫做 Navbar 的导航条了。它其实是一个功能强大的导航工具,并有4种颜色可供选择,具体操作可以参见 Blogger 的帮助文档。

但也许有人会觉得它有些碍眼,与自己的博客风格不是很搭配,等等。那这时应该怎样把它去掉呢? Blogger 并没有提供给我们直接的操作途径,但我们依然可以通过改变模板中的 CSS 参数来达到这个效果。

首先登陆你的Blogger Beta帐户,然后点击“Template”,接着点击“Edit HTML",先在代码中找到这一行

/* global
----------------------------------------------- */

再将如下代码添加至它的后面
#navbar #Navbar1 iframe{
height:0px;
display:none;
visibility:hidden;
}

事实上你也可以将这段 Hack Code 添加到 CSS 表单中的任何位置,但应该以保持表单的规整并方便查找为原则。

现在保存更改,并从新查看你的博客,这时 Navbar 就会消失了。

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

阅读全文...

blogger:Feed订阅按钮制作

前几天简单介绍过了在 blogger 中如何添加 Feed 订阅的方法,网友“抽筋儿”一直问我有没有帮忙制作订阅按钮的工具,我想这可能也是很多朋友想知道的问题,因为自己写代码毕竟还是太麻烦了。最近发现了一个这样的工具,拿出来和大家分享。网站的地址是:http://www.feedbutton.com/

它的工作很简单,你把自己的 Feed 地址交给它,它帮你制作给出一段代码,你再将代码贴到你博客中理想的位置,就完成了。我自己也在旁边侧栏里做了一个实验,它看起来就是这个样子的,鼠标移到上面所有的按钮就会显示出来,替你省了不少空间。你还可以通过修改两条 CSS 的值来更换它的背景和边框颜色,也可以在它的网站上挑选适合你的按钮。感觉还是很方便的,希望也能帮到大家。

阅读全文...

blogger:Feed订阅按钮制作

前几天简单介绍过了在 blogger 中如何添加 Feed 订阅的方法,网友“抽筋儿”一直问我有没有帮忙制作订阅按钮的工具,我想这可能也是很多朋友想知道的问题,因为自己写代码毕竟还是太麻烦了。最近发现了一个这样的工具,拿出来和大家分享。网站的地址是:http://www.feedbutton.com/

它的工作很简单,你把自己的 Feed 地址交给它,它帮你制作给出一段代码,你再将代码贴到你博客中理想的位置,就完成了。我自己也在旁边侧栏里做了一个实验,它看起来就是这个样子的,鼠标移到上面所有的按钮就会显示出来,替你省了不少空间。你还可以通过修改两条 CSS 的值来更换它的背景和边框颜色,也可以在它的网站上挑选适合你的按钮。感觉还是很方便的,希望也能帮到大家。

阅读全文...

blogger:在Blogger Beta的独立文章页中增加所在位置导航

这个功能可以使你在每篇文章的独立页中增加一个所在位置的导航链接,此项功能一般常见于大型的、路径比较复杂的网站,实际上在 Blogger 上不存在这种问题,但如果你愿意也还是可以加上一个,以方便你的浏览。

第一步:
进入 Template->Edit HTML ,备份,勾选 Expand Widget Templates 展开,找到 Blog1 部件 (<b:widget id="Blog1" locked="false" title="Blog Posts" type="Blog">) 。将下列代码紧贴其后。

<b:includable id='breadcrumbs' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
You are here:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> & g t ;
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
</b:if>
</b:loop>
<b:if cond='data:post.title'>
& g t ; <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>
</b:includable>

然后将& g t ;中的空格全部取消。

第二部:
接着再找到这句
<b:if cond='data:post.dateHeader'>

将下列代码紧贴其上(如图所示):
<b:include data='post' name='breadcrumbs'/>



第三步:
将下列 CSS 代码粘贴在<b:skin></b:skin>之间任何合适的位置(如图所示):

.breadcrumbs {
border-bottom:1px dotted $bordercolor;
margin:0 0 0.5em;
padding:0 0 0.5em;
}


具体样式可以自行修改,保存更新,大功告成。
如果你的一篇文章有多个 Label 时,它只会显示最后一个,如果你的文章没有加上 Label 的话,它就不会显示了。

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

阅读全文...