我的Blogger標籤雲設計 - jQuery應用 - Tag Cloud

Blogger內預設的標籤通常都是如下表示:括號內的數字就代表文章的篇數,雖很清楚但覺得很凌亂很醜...
標籤雲(Tag Cloud)就是把括號跟數字都拿掉,將數字化為標籤字型的大小,如下圖所示,你可以看到字體越大的代表文章越多,是不是既直覺又美觀?


因為正在學習使用jQuery,於是就把這個當題目來練習了一下,你可以在Blogger的版面配置上開個JavaScript組件,將下面的程式碼複製貼上使用,雖不是太炫不過也有七分像了,請大家多指教。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("a ~ span").map(function(){
var w=$(this).html().replace("(","").replace(")","");
$(this).prev().css("font-size",12+parseInt(w)*1.5+"px");
$(this).html("");
});
});
</script>


P.S. 只適用於Blogger喔!! 其他部落格不支援....

沒有留言:

張貼留言