8 月 « 2013 « 枫林无线

25 8 月 2013

介绍

枫林博客的右侧的flash人体造型时钟，就是是著名的hone clock。

一开始是日本的一位博主提供的swf，访问原作者

后来因为效果很好，被许多人拿来用啦。

他提供了两种，背景透明和背景黑白的。

演示如下：


背景透明バージョン白とか薄い背景におすすめ	背景白バージョン黒とか濃い背景におすすめ

使用方法：

在html或者worpress小工具的文本中插入

1.js的用法(推荐使用)

<script charset=”Shift_JIS” src=”//js调用地址”></script>

js 下载地址：

背景透明

背景黑白

调用说明：js可以放在自己博客里，调用地址就行，

js是可以修改的，里面的最前面就是swf的地址，我默认设置的是日本原作者的，如果有同学嫌加载慢，自己下载sw文件（在下文有哟），然后修改地址。

以下文中调用说明同上。

2.embed的用法、单object用法、双object用法

embed的用法

<embed id=”forfunex” src=”//swf调用地址”
width=”400″
height=”300″
align=”middle”
quality=”high”
bgcolor=”#f0fff8″
menu=”false”<!–添加后,ff下才正常–>
play=”true”
loop=”false”
FlashVars=””
allowScriptAccess=”sameDomain”
type=”application/x-shockwave-flash”
pluginspage=”http://www.adobe.com/go/getflashplayer”>
</embed>

单object：这种方法的名字叫做 Flash satay，最早是2002年由 Drew McLellan 发表在 A List Apart 上，后来又经过了几次完善：

<object type=”application/x-shockwave-flash” data=”c.swf?path=movie.swf”
width=”400″ height=”300″>
<param name=”movie” value=”c.swf?path=movie.swf” />
<img src=”//swf调用地址” width=”200″ height=”100″ alt=”” />
</object>

双object用法

<object id=”exercises” classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=”214″ height=”144″>
<param name=”movie” value=”//swf调用地址” />
<param name=”wmode” value=”window” />
<param name=”flashvars” value=””/>
<!–[if !IE]><!–>
<object id=”exercisesEx” type=”application/x-shockwave-flash”
data=”${contextPath}/flex/photo.swf” width=”214″ height=”144″>
<param name=”flashvars” value=””/>
<!–<![endif]–>
<!–[if gte IE 6]>
<![endif]–>
<!–[if !IE]><!–>
<!–<![endif]–>
<a href=”http://www.adobe.com/go/getflashplayer”>
<img src=”http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif” alt=”Get Adobe Flash player” />
</a>
<!–[if !IE]><!–>
</object>
<!–<![endif]–>
</object>

swf下载地址：

透明swf

黑白swf

3.去掉swf超链接

原作者设置了版权性的超链接，是不是很碍眼，没事，书带草已经做了修改

效果如枫林博客右侧所示

书带草修改去掉超级链接的透明swf

[reply] 点击下载[/reply]

4不喜欢这个风格的可以添加：

<span id=”aa”>当前时间</span><script>setInterval(“aa.innerHTML=new Date().toLocaleString()+’ 星期’+’日一二三四五六’.charAt(new Date().getDay());”,1000);</script>

5.博客侧栏宠物代码

在别的博客看到侧栏有个可爱的小老鼠，有的是游来游去金鱼，有的是蜘蛛。其实就是flash动画，点击标志就可以进入作者博客。那里还有更多的样式，比如小游戏，时钟，企鹅什么的，想要的去看看吧。

地址，点击想要的样式，复制“embed code for wordpress.com”栏下的代码，添加到博客侧栏的“文本”小工具中即可。

演示：

4 Comments

22 8 月 2013

百度网盘1块钱获取1T网络硬盘/永久使用

看到标题再看看360送360G空间，或许就知道怎么回事了，而这次百度网盘破天荒的抛出了1T空间，而且还是永久使用的，什么100G，漏洞营销等等都弱爆了，一个个公司被360逼的不得不免费，这互联网的竞争不是一般的大的。

进入正题，上次360的免费360G分两个步骤，下载PC端和下载手机端就可以了，这次百度网盘，前两个步骤也是一样的，做完前两个步骤即可免费获取460G的空间，如果没什么需要，疯子不推荐大家使用快捷支付获取剩下的564G空间，虽然1块钱就能获取546G空间，但是你用的了这么多么？多注几个账号也是一样的，省的到时候银行卡那边钱莫名不见了，就该蛋疼了。

剩下的564G空间，可以使用网银支付，原先疯子没测试，以为只能绑定快捷支付才能开通。

活动地址：http://yun.baidu.com/1t

最后说一点，网络硬盘呢，容量适合自己就好了，百度的节操早就碎一互联网了，刚开始推广的话，做的非常好，现在下载大文件还需要下载客户端。

另外，领了几百G的空间，好像不用的话有点对不起百度啊，疯子先去把盘塞满看看（1300多G）。。。

转自：分享吧 http://sharebar.org/other/942.html

3 Comments

22 8 月 2013

js控制在网页中禁用右键和禁止另存为

来自网络

不用js也可以控制禁止右键!方法:

<!–禁止网页另存为： –>

omitformtags=omitformtags.join(“|”)

function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}

function reEnable(){
return true
}

if (typeof document.onselectstart!=”undefined”)
document.onselectstart=new Function (“return false”)
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}
// ]]></script>

<!– 禁用右键: –>
<script type=”text/javascript”>// <![CDATA[
function stop(){
return false;
}
document.oncontextmenu=stop;
// ]]></script>

2 Comments

21 8 月 2013

PHP获取域名方法及获取域名IP的方法

我最近在做的一个项目用到获取域名和IP的功能，大致有以下几种方法。

获取域名IP的方法可以使用内置的函数gethostbyname获取，例如：

echo gethostbyname(“www.baidu.com”);

以上则会直接输出域名所对应的的IP，当然各个地方测试的结果是不一样的，因为百度的服务器也不只有一台，我这边的ip是115.239.210.27;
下面是获取域名的方法，例如有一段网址是这样的：http://www.kakata.com/all-the-resources-of-this-blog.html

//则会输出www.kakata.com
//全局数组
echo $_SERVER[“HTTP_HOST”];

我在本地测试则会输出localhost
第二种获得域名的方法则是使用：parse_url函数；

$url =”http://www.kakata.com/index.php?referer=kakata.com”;
$arr=parse_url($url);
echo “<pre>”;
print_r($arr);
echo “</pre>”;

这段代码获得一个数组，当我们打印这个数组，你会一目了然；
Array
(
[scheme] => http
[host] => www.kakata.com
[path] => /index.php
[query] => referer=kakata.com
)
scheme对应着协议，host则对应着域名，path对应着执行文件的路径，query则对应着相关的参数；
第三种方法：
同样是这一段域名我们使用第三种方法获取域名，我们采用自定义函数获得。

<?php
$url =”http://www.kakata.com/index.php?referer=kakata.com”;
get_host($url);
function get_host($url){
//首先替换掉http://
$url=str_replace(“http://”,””,$url);
//获得去掉http://url的/最先出现的位置
$position=strpos($url,”/”);
//如果没有斜杠则表明url里面没有参数，直接返回url，
//否则截取字符串
if($position==false){
echo $url;
}else{
echo substr($url,0,$position);
}
}
?>

最后一种方法则是使用正则了，这一步比较复杂，要实现复杂的域名匹配就得更复杂的正则，我只是简单的提供一下思路，大家多尝试。

<?php
header(“Content-type:text/html;charset=utf-8″);
$url =”http://www.kakata.com/index.php?referer=kakata.com”;
$pattern=”/(http:\/\/)?(.*)\//”;
if(preg_match($pattern,$url,$arr)){
echo “匹配成功”;
echo “匹配到了”.$arr[2];
}
?>

4 Comments

19 8 月 2013

wordpress评论链接重定向

链接重定向

最近在不断一点点加工现在的主题。所以会不断写wordpress的一些常见小功能。

wp主题总是会有很多为了打广告和增加外链的评论者，虽然有ask的过滤，但是还是不够完美。

于是书带草就决定把所有的评论里的链接都重定向，加上自己的域名在每个链接的最前面。这样就不会有不必要的权重流失了。

下面是代码：

打开我们的主题目录，找到functions.php，在适当位置加上下面的代码（这个适当位置够模糊，我是加在评论回复部分前面的）：

//comments link redirect 
add_filter('get_comment_author_link', 'add_redirect_comment_link', 5);
add_filter('comment_text', 'add_redirect_comment_link', 99);
function add_redirect_comment_link($text = ''){
    $text=str_replace('href="', 'href="'.get_option('home').'/?r=', $text);
    $text=str_replace("href='", "href='".get_option('home')."/?r=", $text);
    return $text;
}
add_action('init', 'redirect_comment_link');
function redirect_comment_link(){
    $redirect = $_GET['r'];
    if($redirect){
        if(strpos($_SERVER['HTTP_REFERER'],get_option('home')) !== false){
            header("Location: $redirect");
            exit;
        }
        else {
            header("Location: http://www.blogfeng.com/");
            exit;
        }
    }
}

这样修改后，刷新下页面，我们的评论者链接已经被重定向了。

[reply]功能代码直接下载[/reply]

放一首歌：

4 Comments

18 8 月 2013

WP Greet Box访客问候信息WordPress插件

WP Greet Box 是一款可以根据访客来源URL显示不同的访客问候信息的WordPress插件。

比如一个用户从Digg来到你的一个网页，可以显示一个信息，提示他Digg你的文章。如果是从Twitter来，那可以提示它分享这篇文章为一条Tweet或订阅你的Twitter，如果是从Google搜索关键词而来，则可以提示它订阅你的RSS Feed, 并显示一份匹配搜索关键词的相关文章列表。

这些问候信息都支持自定义，插件集成支持的来源URL涵盖了国外大多的热门书签服务、搜索引擎和社会化网站。具体可以查看插件介绍里的支持列表介绍。更重要的是，你还可以添加任何自己需要的来源URL和给该URL来的用户定义个性化的提示信息。比如，你可以定义从枫林博客到你的网站的用户”欢迎你，来自枫林博客的朋友……”

插件下载页面

点击直达

20 Comments

16 8 月 2013

通用无插件添加宠物（原创）

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