枫林无线

 

1.前言介绍

书带草最近看到伪春菜的插件比较火热，不仅wp,emlog,dz上也能看到。

我也放一款自己一直在用的添加宠物功能的无插件方法。比伪春菜功能要多要全。

宠物部分功能：（文字均可以自己修改，宠物图片可以自己修改）

1.鼠标hover，显示“努力加载。。”

2.显示天气预报

3.无动作状态碎碎念

4.无动作瞬间漂移

5.显示欢迎光临

6.右键显示订阅和首页

7.评论提示

8.可以鼠标自由拖动。

9.鼠标点击会隐身

10.鼠标焦点锁定文章标题，有提示信息

 

演示暂时不放啦~以前来过枫林博客的人肯定都见过。

 

下面告诉大家怎么修改。以wordpress为例，其他程序依据步骤一样可以成功。

2.添加css样式

/***宠物样式***/
.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;font-size:11px}
.mumu{width:150px;height:190px;cursor: pointer;background:url(“img/spig.png”) no-repeat}

#loading-comments{display:none;background:none!important;height:50px;text-align:center;font-size:18px!important;color:#fff!important;margin:30px 0px 0px 0px}
.commentnavgation{font-family:”Microsoft YaHei”,Trebuchet MS,Arial,Verdana,Tahoma,sans-serif;font-size:12px;margin-bottom:30px;margin-top:10px}
.commentnavgation a {color:#888888;}
.commentnavgation a:hover{color:#383838;}
.commentnavgation .page-numbers{background:#FFF;font-size:12px !important;text-decoration:none;border-radius:8px 2px 8px 2px;-webkit-border-radius:8px 2px 8px 2px;-moz-border-radius:8px 2px 8px 2px;-khtml-border-radius:8px 2px 8px 2px;margin:10px 2px;padding:2px 7px}
.commentnavgation span.current{background:rgb(114,114,114);color:#FFF;font-weight:700}
#comments a{color:#000000;text-decoration:none;border:0;-webkit-transition:color .3s linear;-o-transition:color .3s linear}
#comments .commentinfo a{color:#DD965E}
#comments a:hover{color:#E38383;text-decoration:none}
#comments{padding-top:40px;list-style:none}
#comments .comment{zoom:1;padding-bottom:13px}
#comments .comment:first-child{zoom:1}
#comments .comment:after{visibility:hidden;display:block;font-size:0;content:” “;clear:both;height:0}
#comments .comment > .info{float:left}
#comments .comment > .info .comment-reply-link{color:#FFF;display:block;text-align:center;padding-left:5px;-webkit-text-shadow:0px 1px 1px rgba(0,0,0,0.5);-moz-text-shadow:0px 1px 1px rgba(0,0,0,0.5);-o-text-shadow:0px 1px 1px rgba(0,0,0,0.5);text-shadow:0px 1px 1px rgba(0,0,0,0.5)}
#comments .comment > .info .comment-reply-link:hover{color:#ca1c39;-webkit-text-shadow:0px 1px 1px rgba(0,0,0,0);-moz-text-shadow:0px 1px 1px rgba(0,0,0,0);-o-text-shadow:0px 1px 1px rgba(0,0,0,0);text-shadow:0px 1px 1px rgba(0,0,0,0)}
#comments .comment > .info .avatarcontainer .avatar{width:55px;height:55px;overflow:hidden;-webkit-border-radius:22px 4px 22px 4px;-moz-border-radius:22px 4px 22px 4px;border-radius:22px 4px 22px 4px;box-shadow:1px 1px 2px rgba(0,0,0,0.35);-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.35);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.35);margin-bottom:4px}
#comments .comment .content{position:relative;background:white;color:#5c5c5c;float:left;width:450px;padding:10px;margin-left:30px;font-size:11px;-webkit-border-radius:22px 5px 22px 5px;-moz-border-radius:22px 5px 22px 5px;border-radius:22px 5px 22px 5px;box-shadow:1px 1px 2px rgba(0,0,0,0.15);-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.15);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.15)}
#comments .comment .content .meta{display:block;color:#909090;margin-top:-5px}
#comments .comment .content .meta .comment-reply-link:before{content:” – “;font-weight:bold}
#comments .comment.author{font-weight:bold}
#comments .comment .content:after,#comments .comment .content:before{content:””;position:absolute;z-index:1000;top:15px;left:1px;margin-left:-6px;border-top:6px solid transparent;border-left:0;border-right:6px solid white;border-bottom:6px solid transparent}
#comments .children{list-style:none}
#comments .children .comment > .info{float:right}
#comments .children .comment .content{margin-left:0px;margin-right:30px;float:right;width:415px}
#comments .children .comment .content:after,#comments .children .comment .content:before{content:””;position:absolute;z-index:1000;top:15px;left:auto;right:1px;margin-left:0px;margin-right:-6px;border-top:6px solid transparent;border-left:6px solid white;border-right:0;border-bottom:6px solid transparent}
#comments .children .comment #respond{margin-right:85px;clear:both}
#comments .children .comment #respond input{width:102px}
#comments .children .comment #respond textarea{width:393px}
.datet{font-family:”Georgia”,’Microsoft Yahei’;color:#181107;float:right}
#content p{word-break:break-all;color:#33383D}
#comments #respond{font-family:”Trebuchet MS”,Helvetica,”Microsoft YaHei”,Georgia,sans-serif;margin-left:0px;float:right;margin-top:20px}
#comments #respond .info{margin-top:-4px}
#comments #respond .content{float:none;clear:both;margin:0px 0px 20px 0px}
#comments #respond .label{font-weight:normal;display:none}
#comments #respond textarea{width:475px}
#comments #respond input{width:131px}
#respond .content{margin-bottom:20px;background:white;padding:15px;margin-top:0px;font-family:”Trebuchet MS”,Helvetica,”Microsoft YaHei”,Georgia,sans-serif;font-size:13px;line-height:22px;color:#7a7a7a;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;-webkit-border-radius:50px 10px;-moz-border-radius:50px 10px;border-radius:50px 10px;box-shadow:1px 1px 2px rgba(0,0,0,0.15);-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.15);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.15)}
#respond label{display:block}
#respond .label{display:block;text-align:center;font-family:”Trebuchet MS”,Helvetica,”Microsoft YaHei”,Georgia,sans-serif;font-size:24px;-webkit-text-shadow:0px 1px 1px rgba(0,0,0,0.3);-moz-text-shadow:0px 1px 1px rgba(0,0,0,0.3);-o-text-shadow:0px 1px 1px rgba(0,0,0,0.3);text-shadow:0px 1px 1px rgba(0,0,0,0.3);padding-bottom:20px;color:white}
#respond input,#respond textarea{width:140px}
#respond textarea{margin-top:16px;width:500px;padding:10px;height:150px;resize:vertical}
#respond p{padding-bottom:0px}
#respond p.submit{padding-top:15px;padding-bottom:5px}
#respond p.submit input{width:90px}
#respond .details{padding-bottom:15px;zoom:1}
#respond .details:first-child{zoom:1}
#respond .details:after{visibility:hidden;font-size:0;content:” “;clear:both;height:0}
#respond .details p{padding-bottom:0px;float:left;margin-right:20px}
#respond .details p.last{margin-right:0px}
#respond p.message{margin:0px;float:none;clear:both;position:relative}
#respond p.message .placeholder{margin-top:16px;position:absolute;top:10px;left:10px}
#respond .reply,#respond .info{font-size:11px;font-family:”Trebuchet MS”,Helvetica,”Microsoft YaHei”,Georgia,sans-serif;padding-bottom:5px;padding-left:5px;margin-top:-5px;zoom:1}
#respond .reply:first-child,#respond .info:first-child{zoom:1}
#respond .reply:after,#respond .info:after{visibility:hidden;display:block;font-size:0;content:none;clear:both;height:0}
#respond .reply span.reply,#respond .info span.reply{float:right}
#respond .reply{margin:0px;float:right;padding:5px 5px 0px 0px}
.author{font-size:13px;line-height:80%;font-weight:normal;font-family:Arial,”Microsoft YaHei”,Georgia,sans-serif;color:#5F5F5F}
.author a{text-decoration:none;color:#CF0505}
label{padding-left:3px}
input[type=submit],.button{width:80px;background:#f4f4f4;font-size:12px}
input[type=submit]:hover,.button:hover{box-shadow:inset 0px 0px 0px rgba(0,0,0,0);-webkit-box-shadow:inset 0px 0px 0px rgba(0,0,0,0);-moz-box-shadow:inset 0px 0px 0px rgba(0,0,0,0);box-shadow:0px 1px 3px rgba(0,0,0,0.12);-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.12);-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.12)}
input,textarea{background:white;border:1px solid #d5d5d5;height:24px;line-height:24px;padding:0px 10px 0px 10px;margin:0px;font-family:”Trebuchet MS”,Helvetica,”Microsoft YaHei”,Georgia,sans-serif;font-size:11px;color:#7a7a7a;box-shadow:inset 0px 1px 3px rgba(0,0,0,0.12);-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.12);-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.12);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}
input:focus,textarea:focus{color:black}
input.error,textarea.error{border-color:#ff8c8c}
input#s{width:89%}
textarea{height:150px}
#s{float:left;width:65px;-webkit-transition-duration:400ms;-webkit-transition-property:width,background;-webkit-transition-timing-function:ease;-moz-transition-duration:400ms;-moz-transition-property:width,background;-moz-transition-timing-function:ease;-o-transition-duration:400ms;-o-transition-property:width,background;-o-transition-timing-function:ease}
input#s{border-radius:9px 1px 9px 1px;background:url(img/search.png) no-repeat 5px 1px;font-size:12px;height:15px;line-height:1.2em;padding:4px 10px 3px 28px}
#s:focus{background-color:#f9f9f9;width:150px}
#searchform{float:right;width:80px;height:26px;margin-top:-15px;margin-right:10px;-webkit-transition-duration:400ms;-webkit-transition-property:width,background;-webkit-transition-timing-function:ease;-moz-transition-duration:400ms;-moz-transition-property:width,background;-moz-transition-timing-function:ease;-o-transition-duration:400ms;-o-transition-property:width,background;-o-transition-timing-function:ease}
#searchform:hover{width:150px;margin-right:10px}
#archivebox{float:left;clear:bone;margin-top:-15px;margin-left:30px}
#archivebox select{border-radius:9px 1px 9px 1px;background:#ffff;width:100px;border:1px solid #999;color:#666;font-size:12px;font-weight:200}
#pagenavi{font-family:”Microsoft JhengHei”;line-height:22px;margin-bottom:20px;padding-top:10px;padding-left:30px;text-decoration:none}
#pagenavi span.pagescout{float:left;display:block;width:120px;padding-left:35px;margin-right:35px;background:url(img/milestone.png) 0 0px no-repeat;color:white}
#pagenavi .page-numbers{margin:0 3px;padding:0 3px;text-decoration:none}
#pagenavi .current{background-color:white;border-radius:8px 0px 8px 0px;-moz-border-radius:8px 0px 8px 0px;padding:2px 3px;margin:0 2px;color:black}
#pagenavi .kong{color:white}
#shangxia{left:50%;position:fixed;top:80%;display:block;margin-left:317px}
#shang{background:url(“img/up.png”) no-repeat scroll 0 0 transparent;position:relative;cursor:pointer;height:75px;width:75px}
#shang:hover{opacity:0.69}
.box{opacity:1;background:#FFF;padding:23px 28px 30px 25px;line-height:22px;color:#4A4A4A;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;overflow:hidden;box-shadow:1px 1px 2px rgba(0,0,0,0.15);-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.15);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.15);margin-bottom:25px;-webkit-border-radius:70px 10px 50px 2px;-moz-border-radius:70px 10px 50px 2px;border-radius:70px 10px 50px 2px;-webkit-transition:all 1s ease-in-out;-moz-transition:all 3s ease-in-out;-o-transition:all 3s ease-in-out;transition:all 3s ease-in-out}
.box:hover{box-shadow:0 0 30px rgba(255,255,255,.6),inset 0 0 20px rgba(255,255,255,1)}
.lahuan{position:fixed;position:absolute;right:50%;margin-right:-360px;top:-20px;+top:0px;overflow:hidden;width:60px;height:290px}
.lahuan_zi{position:fixed;position:absolute;top:-190px;left:0;width:55px;height:290px;background:url(img/lahuan.png) no-repeat;cursor:pointer}
.my-archive li{font-size:12px;margin:0px;border-bottom:1px dashed #CCC;background:url(img/sidebarli.gif) no-repeat 0px 2px;padding:1px 0px 1px 0px}
#youyou{padding-bottom:20px}
#youyouh3 h3{margin:0 auto;font-size:17px;font-weight:500;clear:left;color:#000000;padding:24px 0px 10px 0px}
#youyou ul li a{color:#494949;font-size:13px;display:block;text-decoration:none;float:left;height:22px;overflow:hidden;width:100px;border:1px solid white;background:#F9F9F9;-moz-box-shadow:0 0 3px #AAA;-webkit-box-shadow:0 0 3px #AAA;box-shadow:0 0 3px #AAA;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;margin:4px 12px}
#youyou ul li a:hover{border-bottom:#FF5708 2px solid;color:#FF5708;font-weight:bold;height:21px}
#navbar{position:fixed;right:-89px;bottom:0px;background:url(img/navbar.png) no-repeat;width:113px;height:250px;cursor:pointer}
.navbarmenu{opacity:0.59;width:80px;height:190px;padding-top:25px;padding-left:26px;-webkit-transition-duration:2800ms;-webkit-transition-timing-function:ease;-moz-transition-duration:2800ms;-moz-transition-timing-function:ease;-o-transition-duration:2800ms;-o-transition-timing-function:ease}
.navbarmenu:hover{opacity:1}
.navbarmenu li{list-style:none;float:none !important;margin:1px;padding-left:5px}
.navbarmenu li a{font-size:12px;color:#ffffff;text-decoration:none;background:#5A5A5A;padding:0px 4px;margin:0 8px 8px 0;display:inline-block;-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1);-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.1);box-shadow:0px 1px 1px rgba(0,0,0,0.1);border-radius:11px 2px 11px 2px;-webkit-border-radius:11px 2px 11px 2px;-moz-border-radius:11px 2px 11px 2px;-khtml-border-radius:11px 2px 11px 2px}
.navbarmenu li a:hover{font-size:12px;color:#5A5A5A;text-decoration:none;background:#ffffff;padding:0px 4px;margin:0 8px 8px 0;display:inline-block;-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1);-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.1);box-shadow:0px 1px 1px rgba(0,0,0,0.1);border-radius:11px 2px 11px 2px;-webkit-border-radius:11px 2px 11px 2px;-moz-border-radius:11px 2px 11px 2px;-khtml-border-radius:11px 2px 11px 2px}
::-webkit-scrollbar-track-piece{background-color:#15212F;-webkit-border-radius:0}
::-webkit-scrollbar{width:15px;height:8px}
::-webkit-scrollbar-thumb{height:50px;background-color:#999;-webkit-border-radius:8px;outline:2px solid #15212F;outline-offset:-2px;border:2px solid #15212F}
::-webkit-scrollbar-thumb:hover{height:50px;background-color:#ffffff;-webkit-border-radius:8px}
::selection,*::-moz-selection{background:#466119;color:white;text-shadow:none}
#bg{position:fixed;left:0;top:0;overflow:hidden;z-index:0}
.error{background:url(img/error.png) 100% 4px no-repeat}
.valid{background:url(img/valid.png) 100% 4px no-repeat}
.widget_tabcontent_post{margin-bottom:15px;clear:both;overflow:hidden}
.widget_tabcontent_post .selected{border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;background:#8A8A89;color:white}
.widget_tabcontent_post h4{color:#2A4102;height:24px;font-size:13px;text-align:center;margin-bottom:7px;font-weight:normal;border-bottom-color:#E9E9E9;border-bottom:1px dotted #CFCFCF;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;cursor:pointer}
.widget_tabcontent_post h4:hover{color:rgba(167,81,2,0.85);text-shadow:#F9D597 0px 0px 5px;-webkit-transition:color .3s linear;-o-transition:color .3s linear}
.widget_tabcontent h4 span,.widget_tabcontent_post h4 span{cursor:pointer;padding:3px 6px}
.widget_tabcontent_post .hide{display:none}
#ph_lay,#ph_zoom{top:0;left:0;width:100%;z-index:9999;display:none;text-shadow:none}
#ph_lay{position:fixed;height:100%;_height:expression(Math.max(documentElement.clientHeight,body.scrollHeight)+’px’);_position:absolute}
#ph_zoom{overflow-x:hidden;position:absolute}
#ph_zoom span{margin:0;padding:0 9px;float:right;color:inherit}
#ph_lay,#ph_cap,#ph_nav span{background:#000}
#ph_cap,#ph_nav{cursor:pointer;font-size:14px;line-height:21px;position:absolute}
#ph_nav #ph_prev,#ph_cap #ph_txt{float:left}
.zoomed{margin:0;padding:0;max-width:none;cursor:pointer;position:absolute}
.phzoom{position:relative;display:inline-block;max-width:100%;margin-left:auto;margin-right:auto}
.phzoom img{display:block}
.ph_hover{top:0;left:0;width:100%;height:100%;display:block;position:absolute;background:rgba(0,0,0,0.3) url(img/imghover.png) no-repeat 50% 50%}
.phzoom .loading{background:url(img/loading.gif) no-repeat 50% 50%}

.hover-comment .vcard { height:35px; width:35px; float:left; }
.hover-comment .louceng, .hover-comment .commentmetadata { display:none; }
.hover-comment { position:absolute; list-style:none; display: block; z-index:3; border: 5px #000 solid; background-color: white; max-width:600px; }
.hover-comment .commentmetcontent { padding:10px; margin-left:35px; border: none; }
.hover-comment .fn { display:none; }
.hover-comment .avatar { width:28px; height:28px; border: none; padding:5px 0 5px 5px; }
.hover-comment-left{ line-height: 0; position: absolute; left: -40px; border-width: 20px; border-style:dashed solid dashed dashed; border-color: transparent #000 transparent transparent; }
#circle{background-color:rgba(0,0,0,0);border:5px solid rgba(0,183,229,0.9);opacity:.9;border-top:5px solid rgba(0,0,0,0);border-left:5px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 35px #2187e7;width:30px;height:30px;margin:0 auto;-moz-animation:spin .5s infinite linear;-webkit-animation:spin .5s infinite linear;position:fixed;left:20px;bottom:20px}
#circle1{background-color:rgba(0,0,0,0);border:5px solid rgba(0,183,229,0.9);opacity:.9;border-top:5px solid rgba(0,0,0,0);border-left:5px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 15px #2187e7;width:10px;height:10px;margin:0 auto;position:fixed;left:30px;bottom:30px;-moz-animation:spinoff .5s infinite linear;-webkit-animation:spinoff .5s infinite linear}
@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(360deg)}
}@-moz-keyframes spinoff{0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(-360deg)}
}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
}@-webkit-keyframes spinoff{0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(-360deg)}
}

注意第7行”img/spig.png”

这是图片路径，如果wp的话放入主题文件夹中的img文件夹就好。其他程序请修改。

 

把以上样式添加到自己的主题样式中，wp直接修改主题文件的style.css，其他程序放入主题调用的主css。

css样式点击下载1

css样式点击下载2

 

3.添加js文件

 

防止一下伸手党，这里我只提供下载好了。

其中的文字与链接都可以修改。

[reply]pet.js点击下载1[/reply]

[reply]pet.js点击下载2[/reply]

 

4.在页面添加调用代码

wordpress可以选择在header 或者footer 中添加都可以。

 <script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/js/pet.js”></script>

<script type=”text/javascript”>
var isindex = false;
var title = ”;
var visitor=”<?php if (!$user_ID) {if($_COOKIE[“comment_author_” . COOKIEHASH]!=””){echo $_COOKIE[“comment_author_” . COOKIEHASH]; } else { echo “”; } } else { echo “”; } ?>”;
</script>
<div id=”spig” class=”spig”>
<div id=”message”>加载中……</div>
<div id=”mumu” class=”mumu”></div>

注意第一行为调用的js路径，wp直接把js放到主题文件夹的js下面，如果是其他程序，请自行修改。

调用代码点击下载1

调用代码点击下载2

 

5.添加宠物图片文件

 

我也提供一张狗狗图片下载，修改图片最好请按照这种图片的大小进行替换。

[reply]spig.png点击下载1[/reply]

 

[reply]spig.png点击下载2[/reply]

 

哈哈，书带草的分享希望对大家有用。特别是一些喜欢小功能的同学。

 

 

依旧音乐：