WordPress优化：为博客边栏添加小宠物-阿里云开发者社区

WordPress优化：为博客边栏添加小宠物

2017-11-27 1413

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

一简单介绍

如题所示，给博客的边栏添加一个小宠物，可以有效地提高网站的灵动性，比如说我的博客上是这样的：

这些小宠物实际上是一个个flash动画，来源于这个网站：http://abowman.com/google-modules/

可以看到，这个网站提供了多个flash小工具，我们可以根据自己的喜好在相应的详情页面中通过“审查元素”找出flash的URL，然后再用迅雷下载到本地

比如说在这个Fish页面，我们可以先通过个性化设置，然后将flash下载下来，并且把相应的代码也复制下来。

二在网站边栏添加小工具

（1）将flash上传到我们网站的一个目录中，然后替换刚才复制的代码中对应的swf文件链接

（2）给网站添加一个边栏小工具–文本框。标题随便，内容就是刚才复制的代码

（3）根据自己网站的主题情况，再调节其宽高即可

三参考flash及其配置代码

（1）我现在正在使用的宠物鱼，这里我定义的是10条颜色不同的鱼

文件链接：http://www.zifangsky.cn/wp-content/uploads/abowman/fish.swf

配置代码：

 
  
    
      
      
        <
        object 
        type
        =
        "application/x-shockwave-flash" 
        style
        =
        "outline:none;" 
        data
        =
        "http://www.zifangsky.cn/wp-content/uploads/abowman/fish.swf?up_fishColor5=FA1D00&up_fishColor9=728A13&up_fishColor10=2B227D&up_numFish=10&up_fishColor7=163EF0&up_fishColor4=450309&up_foodColor=F59302&up_backgroundColor=FFFFFF&up_fishColor8=B01747&up_fishColor3=EBE315&up_fishName=Fish&up_fishColor1=F45540&up_fishColor2=241715&up_backgroundImage=http://&up_fishColor6=22F522&" 
        width
        =
        "300" 
        height
        =
        "200"
        ><
        param 
        name
        =
        "movie" 
        value
        =
        "http://www.zifangsky.cn/wp-content/uploads/abowman/fish.swf?up_fishColor5=FA1D00&up_fishColor9=728A13&up_fishColor10=2B227D&up_numFish=10&up_fishColor7=163EF0&up_fishColor4=450309&up_foodColor=F59302&up_backgroundColor=FFFFFF&up_fishColor8=B01747&up_fishColor3=EBE315&up_fishName=Fish&up_fishColor1=F45540&up_fishColor2=241715&up_backgroundImage=http://&up_fishColor6=22F522&"
        ></
        param
        ><
        param 
        name
        =
        "AllowScriptAccess" 
        value
        =
        "always"
        ></
        param
        ><
        param 
        name
        =
        "wmode" 
        value
        =
        "opaque"
        ></
        param
        ><
        param 
        name
        =
        "scale" 
        value
        =
        "noscale"
        /><
        param 
        name
        =
        "salign" 
        value
        =
        "tl"
        /></
        object
        > 
       
 
    

   
 

（2）不少博客都在使用的小老鼠

文件链接：http://www.zifangsky.cn/wp-content/uploads/abowman/hamster.swf

配置代码：

 
  
    
      
      
        <
        object 
        type
        =
        "application/x-shockwave-flash" 
        style
        =
        "outline:none;" 
        data
        =
        "http://www.zifangsky.cn/wp-content/uploads/abowman/hamster.swf?" 
        width
        =
        "325" 
        height
        =
        "235"
        ><
        param 
        name
        =
        "movie" 
        value
        =
        "http://www.zifangsky.cn/wp-content/uploads/abowman/hamster.swf?"
        ></
        param
        ><
        param 
        name
        =
        "AllowScriptAccess" 
        value
        =
        "always"
        ></
        param
        ><
        param 
        name
        =
        "wmode" 
        value
        =
        "opaque"
        ></
        param
        ></
        object
        > 
       
 
    

   
 

对个性化要求不是很高的小伙伴可以直接从我的博客下载，因为我博客上的这两个文件通过反编译flash把页面中的aBowman字样给去除掉了，不然画面中总是显示一点文字看起来总觉得有点别扭O(∩_∩)O~

本文转自 pangfc 51CTO博客，原文链接：http://blog.51cto.com/983836259/1740103，如需转载请自行联系原作者

WordPress优化：为博客边栏添加小宠物

热门文章

最新文章

相关课程

相关电子书

相关实验场景