Z-Blog实现Flash 3D滚动标签云的方法

当前位置：首页 > 网站运营 > Z-Blog实现Flash 3D滚动标签云的方法

Oct22th

Wordpress 3D旋转标签云是一个很帅的功能，但是Zblog的用户一直没能很简单的使用该功能，之前鸟儿发布的标签云插件使用起来有点麻烦，还得使用PS，大家有兴趣的可以去看看：http://bbs.rainbowsoft.org/thread-36307-1-1.html。今天我在学习jQuery的时候发现出了标签云的JS代码，于是我就在自己的博客里调试了下效果，还算不错，而且该JS插件要比WP上的小的多，基本上不会影响到网页的加载速度！鼠标在不同的方向上滑动，3D标签云就向那个方向滚动。

下面给大家介绍一下使用方法：

首先，大家要下载压缩包，下载地址：http://u.115.com/file/t1b5713881，将3d.js上传到你主题所在文件中的SCRIPT文件夹中，如果没有，就建一个该文件夹，并将以下CSS代码添加到你的主题的CSS代码中，CSS代码控制着标签的颜色：

#flash-tags {position:relative; width:240px; height:250px; margin: 5px auto 0; }
#flash-tags a {position:absolute; top:0px; left:0px; font-family: Microsoft YaHei; color:#fff;
font-weight:bold; text-decoration:none; padding: 3px 6px; }
#flash-tags a:hover {border: 1px solid #eee; background: #000; }
#flash-tags .blue {color:blue;}
#flash-tags .red {color:red;}
#flash-tags .yellow {color:yellow;}

在你需要添加标签云的页面代码的<head></head>中添加以下代码调用JS代码：

<script type="text/javascript" src="<#ZC_BLOG_HOST#>THEMES/<#ZC_BLOG_THEME#>/SCRIPT/3d.js"></script>

下面就是在侧栏调用了，调用代码为：

<div id="flash-tags">
<a href="http://www.zhengchaoyue.com">电子商务</a>
<a href="http://www.zhengchaoyue.com" class="red">网络营销</a>
<a href="http://www.zhengchaoyue.com">网站建设</a>
<a href="http://www.zhengchaoyue.com" class="red">网站运营</a>
<a href="http://www.zhengchaoyue.com" class="blue">应用研究</a>
<a href="http://www.zhengchaoyue.com" class="red">互联网谈</a>
<a href="http://www.zhengchaoyue.com" class="yellow">JavaScript</a>
<a href="http://www.zhengchaoyue.com">jquery</a>
<a href="http://www.zhengchaoyue.com" class="red">CSS</a>
<a href="http://www.zhengchaoyue.com">www.zhengchaoyue.com</a>
<a href="http://www.zhengchaoyue.com">jquery特效</a>
<a href="http://www.zhengchaoyue.com" class="blue">CSS技巧</a>
<a href="http://www.zhengchaoyue.com">网站优化</a>
<a href="http://www.zhengchaoyue.com" class="blue">SEM</a>
<a href="http://www.zhengchaoyue.com">推一把</a>
<a href="http://www.zhengchaoyue.com" class="blue">郑超越</a>
</div>

附上演示地址：http://19451.4k4k.info/ 在ZB上的演示：http://beyond-001-site1.site4future.com/字体颜色我没有更改，你们可通过CSS代码修改……

记得替换自己的Tags和链接哦！这样，你的页面就会显示标签云了！有不会使用或者使用中有什么问题的可以在下面留言，我会尽最大努力帮助你！

本文作者：郑超越，地址：http://www.zhengchaoyue.com/post/Zbbqy.html

« “郑超越电子商务应用研究”成功备案巧用问答系统带来上万流量和效益 »

或许你会感兴趣的文章：

to "Z-Blog实现Flash 3D滚动标签云的方法"

#1 广州SEO 回复该留言 2010-10-26 22:42:01

来看看博主啦。
麻烦博主把我链接http://www.xiaojunseo.com的关键词改成广州SEO吧，谢啦。
#2 广州SEO 回复该留言 2010-10-26 22:42:32

要博主改了几次关键词了，都不好意思了，呵呵，这次还要麻烦你改下啦。
郑超越于 2010-10-26 23:32:57 回复
太客气了，我已经给你改过来了，呵呵……
#3 电子商务博客回复该留言 2010-10-27 15:23:24

我搞过WordPress的3D标签，之前因为网站被降权，所以去掉了，时间越久就越觉得这些小东西没啥用，重要的还是博客的质量
郑超越于 2010-11-3 13:48:00 回复
嗯，是啊，这些小玩意儿确实没多少用，呵呵……
所以我把演示地址都放外面了，但是还是有些朋友喜欢的，所以我还是放出来了，呵呵……
#4 博客之家回复该留言 2010-11-10 7:49:16

我要用zblog，学习了
#5 广州seo 回复该留言 2010-11-19 15:36:15

谢谢分享
#6 mtr 回复该留言 2010-12-7 15:48:09

非常不错找了好久呢写过先
#7 电子商务博客回复该留言 2010-12-16 17:27:43

已经很久没玩这种花俏的东西了
#8 寇铈鑫回复该留言 2011-1-2 22:48:07

博主你网站里面的几个展示链接都不能用了
郑超越于 2011-1-3 11:01:32 回复
嗯，谢谢……发现了，主要是那些都是免费空间，我没上传到我自己的空间里，呵呵……
回头我传到自己的空间里！
#9 菏泽seo 回复该留言 2011-1-4 17:33:43

过来学习下
郑超越于 2011-1-5 10:48:37 回复
欢迎常来，呵呵……
菏泽seo 于 2011-1-6 17:01:01 回复
呵呵！好的
#10 淘宝考试答案回复该留言 2011-1-9 2:04:16

演示地址打不开了呀，装上去能用吗我想在我的淘宝通 z-blog上做一个贼的漂亮呵呵要是可以的话真是谢谢博主了辛苦
#11 古月木公回复该留言 2011-1-18 16:37:09

谢谢博主分享，正在找这个呢。
#12 上海seo 回复该留言 2011-2-10 16:53:52

学习下我也想要这个功能
#13 东莞SEO 回复该留言 2011-3-7 11:07:55

感谢博主前来拜访学习了
#14 天宇回复该留言 2011-3-30 12:07:21

插件很不错，但是文件不能下载了，不知博主能否提供一份发到给我，邮箱ccuniverse@163.com,谢谢！
#15 东莞SEO 回复该留言 2011-4-3 11:54:26

很牛B的插件哈哈
#16 晨光博客回复该留言 2011-4-4 17:40:53

效果确实很棒
#17 网站优化回复该留言 2011-4-9 14:31:07

来学习下
#18 fldxw001 回复该留言 2011-4-10 16:02:13

博主写得好，支持一下！
由郑超越于 2011-4-10 21:23:14 最后编辑
#19 返现宝回复该留言 2011-4-14 11:51:39

不错，支持你。18
#20 淘店铺回复该留言 2011-5-7 11:01:06

卢松松博客看到贵站，过来看看，支持一下!欢迎回访我的博客！
由郑超越于 2011-5-7 15:19:39 最后编辑
#21 奶粉回复该留言 2011-5-7 12:44:21

写的真不错，学习了．有机会向你学习
由郑超越于 2011-5-7 15:16:42 最后编辑
#22 谭大双博客回复该留言 2011-5-11 22:37:13

嗯，来学习下了。
#23 爆米花回复该留言 2011-5-18 9:17:13

第一次来，博主的文采不错。18
#24 湖南seo 回复该留言 2011-5-18 15:57:31

过来学习程序
#25 线锯机回复该留言 2011-5-19 9:23:40

博主的文章学习了，我要不断看优秀博客，学习经验，然后慢慢开始写自己的。18
#26 tt束胸回复该留言 2011-5-26 21:19:10

你的博客我收藏了呵呵没事就来学习学习
#27 读者回复该留言 2011-6-15 19:39:38

来看看内容不错啊
由郑超越于 2011-6-15 22:05:59 最后编辑
#28 淘宝代销回复该留言 2011-6-16 20:47:07

第一次来，多看看
#29 广州SEO 回复该留言 2011-6-17 11:34:17

来支持下，不知道能否与贵站交换链接，广州SEO：www.seoren.org
#30 苏州电动门回复该留言 2011-6-23 10:08:23

比较实用
#31 11选5之家回复该留言 2011-8-19 11:05:18

下载的提取码是什么？
#32 oa办公系统回复该留言 2011-8-21 10:10:48

正在找这个，多谢博主贡献，先试试，高深的地方可能还要请教博主啊
#33 oa办公系统回复该留言 2011-8-28 22:19:23

博主你好，插件没法下载，请问还有没有其它的地址呢

郑超越网络营销研究