很多朋友喜欢在博客的右侧安排一个区块放置网站的热门tag标签,可以起到很好的聚合作用和seo作用。但是想要更漂亮怎么办呢?一般就是用多彩tag或者球形滚动tag来美化下。本文为大家介绍下zblog里多彩tag的做法。
事先说明下:zblogphp有多彩tag插件,不会html和css的朋友建议直接用插件实现。动手能力较强而又想要自定义的朋友可以尝试按照本文方法修改。
实现多彩tag一共有3个部分。
js部分,代码如下:
<script type="text/javascript"> $(document).ready(function() { var tags_a = $("#tags a"); tags_a.each(function(){ var x = 9; var y = 0; var rand = parseInt(Math.random() * (x - y + 1) + y); $(this).addClass("tags"+rand); }); }) </script>
需要注意是:var tags_a = $("#tags a");这一行,#tags为你网站放置tag区块的id属性,zblog一般都是tags不需要另外修改。此js代码放置的header头部模板的</head>之前即可。
css部分:
#tag a{height:20px;line-height:20px;padding-right:9px;font-size: 14px;padding-top: 3px;padding-bottom: 3px;padding-left: 9px;background-color: #66CCFF;color: #FFFFFF;} #tag .tags0{background-color: #CC3300;} #tag .tags1{background-color: #CC3300;} #tag .tags2{background-color: #339900;} #tag .tags3{background-color: #FF9933;} #tag .tags4{background-color: #0099CC;} #tag .tags5{background-color: #00CCCC;} #tag .tags6{background-color: #99CC66;} #tag .tags7{background-color: #339999;} #tag .tags8{background-color: #FF6699;} #tag a:hover{color:#FFFFFF;text-decoration:none;background-color: #18c1a0;}
css部分比较好理解,js控制了tag区块的a属性随机显示为tags1、tags2之类的,我们只需要修改tags1、tags2...等为自己想要的样式即可。
html代码部分
html代码部分如果模板支持自定义侧栏的话直接在zblog后台--模块管理,找到“tags列表”拖到右侧栏即可。如果你的模板不支持自定义侧栏,那么就需要自己加代码了,把以下代码加入到自己想放置的位置:
<dl id="tags"><dt>热门标签</dt> <dd><ul> zblogphp为“{module:tags}”/zblogasp为“<#CACHE_INCLUDE_TAGS#>”<div class="clear"></div> </ul></dd> </dl>
文件重建或者更新缓存,ok大功告成,多彩tag就是这么神气。
相关推荐
取消回复欢迎 你 发表评论:
- 最新文章
- 热文排行
- 最多评论
- 1wordpress在国内无法更新升级的解决办法03-02
- 2天兴工作室2021年春节放假通知02-08
- 3zblogphp1.7版本正式上线,附zblogphp1.7升级指南和注意事项02-08
- 4主题的暗黑模式是什么?怎么设置和使用暗黑模式?01-19
- 5zblog判断插件是否安装或者启用的代码介绍01-16
- 6translate3d和z-index冲突导致z-inde值无效的解决办法01-10
- 7zblogphp提示“ Call to undefined function openssl_pkey_get_public()”的原因和解决办法12-25
- 8zblogphp1.6版本报错“非法访问”的原因和解决办法12-23
- 9wordpress导航栏自定义添加class和rel="nofollow"的步骤12-13
- 标签聚合
- ×1什么是T×1分页条×0黑色系列×1半年包×1html5模板×1自定义模块×1什么值得买×13G流量包×1网龄回馈×1三星I9308×1A60刷机包×1灰名单×1稀烂×1在线预订×1武汉联通套餐×1ie浏览器测试工具×1天翼套餐资费×1校园WLAN×1wap插件×1存100送30元
最新评论
-
访客
来个限时优惠 -
天兴工作室
不还价的 -
小马过河
能不能便宜点啊 -
中加达移民
个人买过这个网站的主题,可以付责任的说,主题很好好用。另外我不是托! -
吸料机
已经解决
有 1 位网友评论:
欢威 4年前 (2017-08-06) 回复
按你说的,把js代码放置的header头部模板的之前,然后css代码也复制到了style.css文件中,而且#tags也修改成我网站放置tag区块的id属性,没任何变化。。。大神能加你Q吗