在自己的博客里养一只saber吧

其他技术 myhloli 5746次浏览 已收录 42个评论

起先是闲逛到anotherhome,发现博客里有个浮动的芽衣子萌萌哒,遂想自己也在博客里养点什么。于是借(chao)鉴(xi)了他的代码,自己找了张萌萌的狮子saber扣了图,做了自己博客的这个小(rou)宠(bian)物(qi)。
教程anotherhome里有,我再贴一下。下载下面的脚本和素材文件,下载解压后放在网站相应目录下
素材文件
这个脚本需要jQuery库,必须先加载jQuery库(有可能是原来已经加载了,这样就不用设置),您可能需要修改spig.js里面的一些东西,比如里面的一些域名网址提示等。然后把下面代码加到footer.php底部文件body里。

<!--.浮动小人-->    
<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>
<script type="text/javascript" src="http://myhloli.com/spig.js"></script>
<style>
.spig {display:block;width:130px;height:170px;position:absolute;bottom: 300px;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:-45px;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:130px;height:170px;cursor: move;background:url(https://myhloli.com/wp-content/themes/loveloli/img/spig.png) no-repeat;}
</style>
<div id="spig" class="spig">
    <div id="message">加载中……</div>
    <div id="mumu" class="mumu"></div>
</div>
<!--.end浮动小人-->

其中这两行代码换成你的路径

<script type="text/javascript" src="http://myhloli.com/spig.js"></script>
.mumu{width:130px;height:170px;cursor: move;background:url(https://myhloli.com/wp-content/themes/loveloli/img/spig.png) no-repeat;}

弄完之后再看下你的博客,是不是出现了奇迹呢 :biggrin:

  萝莉社,版权所有丨如未注明,均为原创丨本网站采用BY-NC-SA协议进行授权,转载请注明转自:https://myhloli.com/feed-a.html
喜欢 (22)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(42)个小伙伴在吐槽
  1. 萌萌的saber等你来养
    myhloli2015-02-10 02:01 回复
  2. 必须留言。。感谢分享
    超级_施2015-02-19 11:55 回复
  3. 按照这么做了以后,只有字在飘来飘去,没有小人,图片路径都没有错啊。。
    超级_施2015-02-19 13:31 回复
    • 能把博客地址留下么,我看一下
      myhloli2015-02-19 16:17 回复
      • 图片问题已经解决了了www.pin-g.cn 还在建设中······
        超级_施2015-02-19 16:25 回复
        • 恩,恭喜了,可以看下我的另两篇文章接入一言和天气查询功能
          myhloli2015-02-19 18:55 回复
  4. 这个代码高亮用的是什么插件,过长的代码如何自动换行
    超级_施2015-02-19 15:39 回复
    • 代码高亮是主题自带的,代码换行是本地文本编辑器里就换好了的
      myhloli2015-02-19 16:18 回复
      • anotherhome的博主给了我推荐了Crayon Syntax Highlighter代码高亮插件
        超级_施2015-02-19 16:27 回复
  5. 请问在footer.php里要放的代码中,<?php ……?>这两段的作用是什么?其实我想在jekyll搭建的静态博客里试试能不能用,但是看到有php代码就觉得疑惑了。
    鹏总V52015-06-04 22:59 回复
    • 获取当前文章标题和当前登录用户名称,小人会说欢迎xxx登录,欢迎查看xxx文章之类的,你再spig,js里把相关的东西删了也没关系
      myhloli2015-06-04 23:13 回复
      • 好的,我去试试
        鹏总V52015-06-05 10:49 回复
      • 顺便问一下,博主有没有研究一下多说怎么显示IP或者根据IP显示的地址?多说后台能看到评论人的地址
        鹏总V52015-06-05 10:56 回复
  6. 做好了后演示一直在加载中 加载中…… 什么情况!
    慕浟佳2015-07-20 07:14 回复
    • 链接网络问题,js没加载好。。。。。看看服务器网络或者你本地网络有没有问题,清除下缓存啥的再试试
      myhloli2015-07-21 00:29 回复
      • 不是本地问题,我试着手机看还是不行。服务器应该没什么问题啊,其他东西都好好的!
        慕浟佳2015-07-21 02:04 回复
      • 我测试用你js链接就没事,但是把你文件下载下来无论修改不修改,放我空间和放到七牛都不行!右键保存你js多了些 这种符号,是不是这个影响的?能不能发一分js文件呢?
        慕浟佳2015-07-21 04:37 回复
        • 你右键我网站源码,里面有js的下载地址啊直接复制地址进迅雷不就好了
          myhloli2015-07-21 23:07 回复
  7. 一直卡在加载中。。。怎么回事
    24501893342015-08-15 22:40 回复
    • js没有加载出来,请检查是否正确设置js加载路径
      myhloli2015-08-17 14:58 回复
  8. 路过支持一下_(:зゝ∠)_
    VIPME2015-09-04 19:05 回复
  9. 我在想能不能做成TYPECHO的插件。。。目前已经在动手中。。。
    磬馨雅致2015-09-05 13:42 回复
  10. 看这篇文章的注意啦!那个js必须放在根目录!
    skipper2015-11-09 00:47 回复
  11. 不一定要在根目录,但是js的地址一定要改对 这个只是示例,实际在哪里就要改到对应位置。
    myhloli2015-11-09 01:23 回复
  12. 不知道为什么。本鹅必须放在根目录。。。
    skipper2015-11-10 21:42 回复
加载中……