我相信很多朋友都喜欢在博客的右侧安排一个区块来放置网站的tag标签,对于做SEO的博主们来说,这可以起到很好的SEO作用,但是想要tag标签更漂亮怎么办?一般普遍的做法是利用js+css来实现,以下以zblog为例。
例如:代码如下
<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>
#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: #4097db;}
以上方式能够实现多彩tag,但像小编这样懒的人,写这么多的css颜色样式,实在有点太为难,所以下面列出小编所用的方式
js代码
$('#tags a').each(function(){ var tagcolor=new Array("#C01E22","#0088cc","#FF5E52","#2CDB87","#00D6AC","#EA84FF","#FDAC5F","#FD77B2","#0DAAEA","#C38CFF","#FF926F","#8AC78F","#C7C183","#9370DB","#2f889a","#9e5ae2"); var cou=Math.floor(Math.random()*tagcolor.length+1)-1; $(this).css({ 'color':tabcolor[cou] }) })
此种方式是直接将css样式内联进HTML代码中,以上两种方式随意选择,不懂修改的小白请联系小编
邮箱:zbpblog626#163.com //发送邮件时请将#手动改为@
评论列表 :共有3人吐槽, 5787人围观