将 Blogger 中的标签改成标签云(Tag Cloud)
当 Blogger 中的文章一多,标签也跟着变多,而 Blogger 的标签元件就会变得落落长,不好看也不好搜寻。
这时候如果改成 “标签云” 就会是一个不错的作法。在标签云中运用字体大小及颜色的变化,就可以很快的找你要的标签。
修改步骤
- 编辑 Blogger 样板,并 “展开小装置范本”。
- 在 <Style> 区块内加入:
#Label1 ul { font-family:Arial; padding:0px; text-align:justify; } #Label1 li { display:inline; }
- 搜寻 </head>,在上一行加入:
<script> function parseTag(){ var tagA = document.getElementsByTagName('a'); for(var i=0; i<tagA.length; i++){ if(tagA[i].id == 'tag'){ var tag = tagA[i]; var width = tagA[i].title; tag.style.fontSize = 14 + parseInt(width/5); tag.style.color = 'rgb(0,0,' + width*5 + ')'; } } } </script>
其中的第 8 行可用来调整字体大小,第 9 行用来调整颜色变化。
- 继续搜寻 <body>,在标签内的 onload 事件加入:
parseTag();
- 继续搜寻:
<li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url'><data:label.name/></a> </b:if> (<data:label.count/>) </li>
取代成:
<li> <b:if cond='data:blog.url == data:label.url'> <a id="tag" expr:title='data:label.count' expr:href='data:label.url'><u><data:label.name/></u></a> <b:else/> <a id="tag" expr:title='data:label.count' expr:href='data:label.url'><data:label.name/></a> </b:if> </li>
- 存盘完成。
No comments yet.