从蚊子博客看到这个可爱的博客宠物精灵,最后找到了宠物的主人木木,又后来微酷也领养了一只宠物到微酷网志,很可爱的小东东,感谢木木。@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冲突。
2013年01月02日 12:31 晴刃 | 引用 | #1
这个博客宠物挺好的~