关于Tag显示的改进

| 暂无评论 | 暂无引用通告

从MovableType实现Tags功能以后,写文章的时候添加个Tag的习惯大有人在吧我想。这里说一下用CSS文法来给添加的Tag cloud按数量的多少来自动改变它的颜色和大小的方法。

在CSS那里追加下面文法


.module-tagcloud .module-content a {text-decoration: none; }
.module-tagcloud .module-content { text-align: left; }
.module-tagcloud .module-content .module-list { list-style: none; }
.module-tagcloud .module-content .module-list .module-list-item { display: inline; }
.module-tagcloud .module-content .module-list li.taglevel1{ font-size: 20px; } 
.module-tagcloud .module-content .module-list li.taglevel2{ font-size: 18px; }
.module-tagcloud .module-content .module-list li.taglevel3{ font-size: 16px; }
.module-tagcloud .module-content .module-list li.taglevel4{ font-size: 14px; }
.module-tagcloud .module-content .module-list li.taglevel5{ font-size: 12px; }
.module-tagcloud .module-content .module-list li.taglevel6{ font-size: 10px; }
.module-tagcloud .module-content .module-list li.taglevel1 a{ color: #99ffff; }
.module-tagcloud .module-content .module-list li.taglevel2 a{ color: #ccff33; }
.module-tagcloud .module-content .module-list li.taglevel3 a{ color: #ffcc00; }
.module-tagcloud .module-content .module-list li.taglevel4 a{ color: #FF0000; }
.module-tagcloud .module-content .module-list li.taglevel5 a{ color: #CCCCFF; }
.module-tagcloud .module-content .module-list li.taglevel6 a{ color: #0000FF; }

上面设定的颜色等都是可以自由修改的。
然后将改为下面的形式就可以了。

       <ul class="module-list">
            <MTTags>
                <li class="module-list-item taglevel<$MTTagRank$>">
                    <a href="<$MTTagSearchLink$>"><$MTTagName$></a> (<$MTTagCount$>)
                </li>
            </MTTags>
        </ul>

暂无引用通告

发送引用通告网址: http://www.ikias.com/mt-tb.cgi/206
如果您想引用这篇日记到您的Blog,请复制上面的链接,放置到您发表文章时的相应界面中。

发表评论

关于此日记

此日记由 ikias 发表于 2006年12月31日 12:30

此Blog上的上一篇日记复原被关闭了的Tab分页:Undo Closed Tabs Button

此Blog上的下一篇日记新年快乐

首页归档页可以看到最新的日记和所有日记。