前加入如下HTML代码:
1 2 3 4 |
<div id="spig" class="spig"> <div id="message">加载中……</div> <div id="mumu" class="mumu"></div> </div> |
2、接着在你的style.css里面添加如下css代码:
1 2 3 4 |
/* 博客宠物 */ .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(images/spig.png) no-repeat;} |
注意要把下载得到的spig.png放在主题的images文件夹里,当然了,修改路径也是可以的。
3、然后,加载jQuery库,如果你已经加载过直接无视!在你的</body>前添加代码:
1 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> |
4、对于WordPress用户,在上面的代码下面添加如下代码,非WordPress版的我不清楚:
1 2 3 4 |
<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 visitor="',$display_name,'";'; else if(isset($_COOKIE['comment_author_'.COOKIEHASH])) echo 'var visitor="',$_COOKIE['comment_author_'.COOKIEHASH],'";';else echo 'var visitor="游客";';echo "\n"; ?> </script> |
4、然后在上面代码下面添加代码即可:
1 |
<script type="text/javascript" src="你的spig.js的路径"></script> |
OVER!就是这么弄的,大家都可以用了,赶紧上手吧
关于怎么自定义显示的消息,用jQuery选择器加上showMessage('信息')即可
这个效果不是我原创的,最初是谁弄的不知道了,木木,乱了感觉,然后是……
每个使用都有一次修改,不断改善……
希望用了的留个印,仅此而已,不愿的也不强求,只是想知道有多少人真想要的,也不枉我发出来!
原文连接
的情况下转载,若非则不得使用我方内容。