蚊子博客看到这个可爱的博客宠物精灵,最后找到了宠物的主人木木,又后来微酷也领养了一只宠物到微酷网志,很可爱的小东东,感谢木木。@VCOO

先来看看博客宠物的效果:

当然最直观的效果就是现在看到的页面上也许能看到微酷的博客宠物,如果看不到说明已经离这日志过去好长时间网站更新了。

是不是非常可爱的小东东,下面讲解如何在Wordpress博客中添加博客宠物:

 1、下载博客宠物精灵脚本和素材文件:博客宠物.RAR

2、WP后台编辑模板footer.php添加以下代码:

<div id=”spig” class=”spig”>
<div id=”message”>加载中……</div>
<div id=”mumu” class=”mumu”></div>

3、编辑模板风格CSSS文件添加以下样式文件:

/* 博客宠物 */
.spig {display:block;width:150px;height:190px;position:absolute;top: -200px;left: 160px;z-index:9999;}
#message{color :#191919;border: 1px solid #c4c4c4;background:#ddd;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;min-height:1em;padding:5px;top:-30px;position:absolute;text-align:center;width:auto !important;z-index:10000;-moz-box-shadow:0 0 15px #eeeeee;-webkit-box-shadow:0 0 15px #eeeeee;border-color:#eeeeee;box-shadow:0 0 15px #eeeeee;outline:none;}
.mumu{width:150px;height:190px;cursor: move;background:url(http://www.vcoo.cc/web/pet/spig.png) no-repeat;}

4、编辑模板头部文件header.php添加以下代码,注意原来已有Jquery的就不用再加了。

[php]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><script type="text/javascript">
<?php if(is_home()) echo ‘var isindex=true;var title="";’;else echo ‘var isindex=false;var title="’,  get_the_title(),’";’; ?>
<?php if((($display_name = wp_get_current_user()->display_name) != null)) echo ‘var vistor="’,$display_name,’";’; else if(isset($_COOKIE[‘comment_author_’.COOKIEHASH])) echo ‘var vistor="’,$_COOKIE[‘comment_author_’.COOKIEHASH],’";’;else echo ‘var vistor="童鞋";’;echo "\\n"; ?>
</script>
<script type="text/javascript" src="http://www.vcoo.cc/web/pet/spig.js"></script>[/php]

5、注意几点:
①把上面代码中vcoo.cc的路径换成你的 ②宠物说的话在spig.js修改 ③ 无效果请检查js冲突。

目前有10 条留言

  1. 2013年01月02日 12:31 晴刃   |  引用  |  #1     

    这个博客宠物挺好的~

  2. 2012年12月25日 22:06 野蛮人   |  引用  |  #2     

    不显示啊大哥。难道冲突了。。

  3. 2012年12月25日 20:57 野蛮人   |  引用  |  #3     

    这个很好玩。转载走了哦。

  4. 2012年12月10日 16:55 爱扒饭   |  引用  |  #4     

    请问楼主,我的报这个错,是冲突吗?还是我的操作不对?
    Uncaught TypeError: Cannot read property ‘top’ of null spig.js:59
    (anonymous function) spig.js:59
    e.resolveWith jquery.min.js:16
    e.extend.ready jquery.min.js:16
    c.addEventListener.z

  5. 2012年09月11日 16:59 傻小懿   |  引用  |  #5     

    呜呜。JS冲突了。。泪奔,基础不太好不知道如何解决。。

  6. 2012年07月01日 01:11 Normal   |  引用  |  #6     

    你好,我按照你文章中的步骤一步一步做的。但是首页还是无法显示。网址已经改过了的。

    • 2012年07月01日 05:25 微酷   |  引用  |  #7     

      可能是代码冲突了,先把其它代码删除掉看看是哪里有问题。

  7. 2012年06月29日 14:41 Normal   |  引用  |  #9     

    ~来看下。回头就整个!

  8. 2012年05月15日 00:04 曹杰seo博客   |  引用  |  #10     

    今天 才发现 这个 挺好玩的 明天在自己的博客 里添加 一个小蛇 在博学到了 好多

发表评论

/ 快捷键:Ctrl+Enter
加载中……