色彩斑斓: 2006/11

Picasaweb幻灯片模块生成工具

Picasaweb自Blogger beta、Google base、Google calendar之后也支持JSON.

Phydeaux3因此为Picasaweb写了一个生成器把它应用到了Blogger中。

生成器地址

只要找到要显示的相册的RSS地址填到地址框里就行了。

做一个导航栏的下拉菜单如何？(已更新)

已经测试过了，示例请看我的测试Blog

因为晚上有课，写得非常匆忙，也未像以前一样自己试一下，可能存在一些错误。如果觉得写得不清楚，可查看原文。

有导航栏可以让Blog看起来更专业一点。以前也介绍过生成导航栏的方法。如果有大量的分类信息呢？当鼠标移过时显示下拉菜单怎么样？效果可以看原作者的Blog.这里介绍的是把一些链接模块放在导航栏上。

1.Head之间引用JS。比较建议自己下载并上传JS文件

<script src='http://non.alastor.googlepages.com/chrome.js' type='text/javascript'/>

2.定义CSS

chromestyle.css - 银色
chromestyle2.css -蓝色
chromestyle3.css - 绿色
chromestyle4.css - 红色

一共有四种样式，你可以选择一种跟Blog打配的，并把里面的内容添加到Blogger模板中。紧跟在]]></b:skin>之前就可以。

3.导航栏位置

一般我们会把它放在标题下方，不过，只要你愿意，可以放在任何你想要的地方，比如最上方。

这里我们把它放在标题栏下方，找到 header-section结束、content-wrapper开始的地方（即在div id='content-wrapper'这句之前），添加下面代码

<div class='chromestyle' id='chromemenu'>
<ul>
<li><a href='http://YOURBLOG.blogspot.com/'>Home</a></li>
<li><a href='#' rel='dropmenu1'>导航 1</a></li>
<li><a href='#' rel='dropmenu2'>导航 2</a></li>
<li><a href='#' rel='dropmenu3'>Content 3</a></li>
<li><a href='#' rel='dropmenu4'>Content 4</a></li>
</ul>
</div>
<script type='text/javascript'>
cssdropdown.startchrome("chromemenu")
</script>

4.把原侧边栏模块移到导航栏

找到相应的模块代码部分，做一些修改。添加红色部分。因为我们在第三步中已经定义了导航1、2等导航标题，有个Rel属性，下面代码中的Id属性应该与相应的Rel属性对应。

<b:widget id='...' locked='false' title='...' type='...'>
<b:includable id='main'>
<div class='dropmenudiv' id='dropmenu1'>
<div class='widget-content'>
.
.
.
</div>
</b:includable>
</b:widget>

记住要删除原侧边栏模块的标题。

5.美化部分

尽管按上面的方法已经实现了下拉菜单，但对于一些模块会不太完美，比如标签，记数器会让菜单扭曲，作者提供了相应的方法，即把计数器放在链接内部。

<b:widget id='Label1' locked='false' title='Categories' type='Label'>
<b:includable id='main'>
<div class='dropmenudiv' id='dropmenu1'>
<div class='widget-content'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/> (<data:label.count/>)
<b:else/>
<a expr:href='data:label.url + "?max-results=100"'><data:label.name/> (<data:label.count/>)</a>
</b:if>
</b:loop>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

下面代码针对订阅链接，真实效果查看作者导航栏的NewsFeeds。

<b:widget id='Label2' locked='false' title='Newsfeeds' type='Label'>
<b:includable id='main'>
<div class='dropmenudiv' id='dropmenu2'>
<div class='widget-content'>
<a href='http://YOURBLOG.blogspot.com/feeds/posts/default/-/' target='_blank' title='Subscribe to Posts'><img src='http://non.alastor.googlepages.com/rss_icon.gif'/> Posts</a>
<a href='http://YOURBLOG.blogspot.com/feeds/comments/default/-/' target='_blank' title='Subscribe to Comments'><img src='http://non.alastor.googlepages.com/rss_icon.gif'/> Comments</a>
<b:loop values='data:labels' var='label'>
<a expr:href='"http://YOURBLOG.blogspot.com/feeds/posts/default/-/" + data:label.name' target='_blank'><img src='http://non.alastor.googlepages.com/rss_icon.gif'/> <data:label.name/></a>
</b:loop>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

最简单的生成Blogger下拉菜单的方法

Hackosphere做了一个下拉菜单生成器，如果你的侧边栏上有大量的链接，除了用以前的方法将它收缩起来，也可以试试下拉菜单的形式。

生成地址

注：anniyalogam.com原来在中国是无法访问的，不知道为什么现在解封了。

上文中提到的JSON不知道有没有心动，没有？来体验一下吧，或许你会改变观点！

只要点击下面的按钮就可以“安装”Hack，无需修改任何代码，给喜欢偷懒的人带来的机会哦
首先，在Head之间引用JS，<script src='http://home.planet.nl/~hansoosting/downloads/beautifulbeta.js' type='text/javascript'/>
1.最新文章模块（与通过RSS添加有所不同）

其中涉及到一些自定义选项。点击上面的按钮之后会出现对些模块的最基本设置，如标题，以及选择想要添加的Blog（前提你建了多个Blog）。下面有个“Edit Content”就是要编辑的内容了。点击一下。我们要针对自己的Blog做一些修改。

把“beautifulbeta.blogspot.com”替换成你的Blog地址;numposts代表要显示的文章数，默认为10;numchars代表显示摘要的字数，默认为100；showpostsummary是不是显示摘要，值为True和False;showpostdate是不是显示日期，值同样为True或False。

2.最新评论模块

同样我们要自定义一下以适应自己的Blog。替换 'beautifulbeta.blogspot.com' 为你的Blog地址;设置 numcomments为显示的评论数大小;numchars为评论摘要的字数;showposttitle是不是显示评论所属文章的标题，值为True或False;showcommentdate是不是显示评论日期，值为True或False;

3.搜索模块

via BeautifulBeta&Hackospere