|    Blogger  |  随手写下  |  网络服务  |  做好每一件事  |  我的视频  |  给我留言   |

2010年6月20日星期日

让文章标签分两列显示

最近呢,一直被标签云那里的显示所困扰,标签那里以列表显示可以很快的显示,而以标签云的方式显示(Blogger已经支持标签云),则要停顿一下,我估计是要调用Blogger的JS,由于Blogger被封的缘故,源于Blogger的JS显示是很慢甚至出现错误的,看到很多WP博客那里有用列表显示,分成两列或3列显示,在HTML里编辑了半天也对不齐,就想一定是有办法,结果翻墙后在一台湾哥们的Blogger那里找到了,由于被墙的缘故就不发台湾网友的地址链接了,方法如下:

首先进入Blogger后台,备份你的模本,这是基本常识了,勾选扩展窗口小部件模板,找到以下这一行:
<b:widget id='Label1' locked='false' title='文章分类' type='Label'>

或是查询label这个关键字,按Ctrl+F就会跳出查找框的:)


会看到如下代码:
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>

将其中的
<ul>改成<ul id="tags">
再将
<span dir='ltr'>(<data:label.count/>)</span>
置换成以下这行
<data:label.name/> (<data:label.count/>)
里边的(<data:label.count/>),代表的是这个分类的文章数量,如果不想显示可以拿掉。


因为我们在上面增加了一个id为tags,所以要在css里追加这个tags的定义,

.sidebar #tags li {
float:left;
width:120px;
}


宽度就视你的边栏宽度除以2,大概再減20px左右,譬如我的栏位為280px,我的宽度设定为120刚好可容纳,可以自己慢慢调整,如果你的栏位更宽,比如我将上边的宽度改为100后,边栏变成了3列了,刚刚好,很整齐的,效果见测边栏。

另外如果你的标签会重复出现两次,记得将
<data:label.name/> (<data:label.count/>)
前面的
<data:label.name/>移除,只剩(<data:label.count/>)即可


最后记得,如果你将新增小工具里的标签移除后,要重新放上标签时,上面的html语法要重新再裝上才能生效。