Let's whisper » 知识技巧 http://www.whisperer.name Let's whisper. Thu, 02 Feb 2012 05:52:40 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 解决Gravatar头像不显示 http://www.whisperer.name/2011/07/recall-gravatar/ http://www.whisperer.name/2011/07/recall-gravatar/#comments Thu, 28 Jul 2011 08:38:16 +0000 whisperer http://www.whisperer.name/?p=92 　　今天一上来Gravatar头像不能显示，应该是被墙了。然后发现我的图片地址是以0.gravatar.com"和"1.gravatar.com"这种类型开头的，换成"www.gravatar.com"还是能打开的。看来只是Gravatar的分发服务器月经性被墙，主站没问题的。于是就想办法把头像直接从主站加载吧，所幸这点是可以办到的。

　　修改在wp-includes文件夹下的pluggable.php，搜索"gravatar.com"，WP3.2.1的话是在1706和1708行。

if ( !empty($email) )
    $host = sprintf( "http://%d.gravatar.com", ( hexdec( $email_hash[0] ) % 2 ) );
else
    $host = 'http://0.gravatar.com';

　　把 http://%d.gravatar.com 和 http://0.gravatar.com 都改成 http://www.gravatar.com，保存覆盖原文件。

　　懒人，还可以用插件gravatar fixed。

　　OK，头像回来了，速度貌似会慢一点，不过，又是美好的一天！

Related Posts

]]> http://www.whisperer.name/2011/07/recall-gravatar/feed/ 34 Signs http://www.whisperer.name/2009/10/signs/ http://www.whisperer.name/2009/10/signs/#comments Tue, 27 Oct 2009 18:31:01 +0000 whisperer http://www.whisperer.name/2009/10/%e5%b0%8f%e8%af%81%e6%98%8e%e4%b8%8b%e5%84%bf/ 一个用A4纸和麦克笔谱写的无声却美丽的爱情故事。已收录到我的Video页面。

这个视频引用自vimeo，国庆后被GFW掉的一个非常优秀的视频分享网站。所以同学们如果看到上面只是一个白色的框，是正常的。可以到我的Video页面看优酷版，或下载此视频（signs.mp4，63.9MB），或继续阅读本文。

好吧，没有走开的同学，让我们开始这篇文章真正的话题：

其实我想分享一个很好用的美国VPN代理。这几天我一直在用，主要用来看vimeo和YouTube的视频，速度非常赞。唯一的不足是过几分钟会断线一次，不过没关系，我设置成断线重连，所以可以接受。不知道用的人多了之后会不会被GFW盯上，所以低调些，大家自己用就可以了。 ;-)

免费VPN服务器信息
VIN建立与连接教程，老手请自动飘过


一切搞定之后看看，上面这个视频是不是可以正常播放了呢？ :arrow:

另外，推荐 A-shun 同学推荐的好用的在线代理（第二期、第三期），翻墙看一些网页很方便，只是我用它们不能播放视频。

[PS：通过Feed阅读本文的同学，请到文章原文阅读完整内容]

Related Posts

]]> http://www.whisperer.name/2009/10/signs/feed/ 70 网页渐变效果 http://www.whisperer.name/2009/10/gradual-change/ http://www.whisperer.name/2009/10/gradual-change/#comments Sun, 11 Oct 2009 07:17:08 +0000 whisperer http://www.whisperer.name/?p=64 　　用IE进出小博时有种渐变效果，这两天连续有同学问到这个问题，我就顺便介绍一下，免得我每次都要贴代码解释，虽然我很喜欢解释，我喜欢别人从我这里获得满足感。 ;-)

　　在meta标签里用 blendTrans 和 RevealTrans 这两种滤镜可以产生渐变效果。滤镜嘛，IE专用，所以其他浏览器现在都可以回家吃饭去了。把下面其中一段代码放到网页的<body>和</body>之间，WordPress的话放 header.php 就好:

No.1

<meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.2)"></meta>
<meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.2)"> </meta>

No.2

<Meta http-equiv="Page-Enter" Content="revealTrans(duration=x, transition=y)">
<Meta http-equiv="Page-Exit" Content="revealTrans(duration=x, transition=y)">

　　其中，Page-Enter和Page-Exit分别表示进入和离开网页。用No.2的同学把x和y换成你的参数。

　　Duration  　表示滤镜特效的持续时间(单位：秒)
　　Transition　滤镜类型。表示使用哪种特效，取值为0-23。

0 矩形缩小
1 矩形扩大
2 圆形缩小
3 圆形扩大
4 下到上刷新
5 上到下刷新
6 左到右刷新
7 右到左刷新
8 竖百叶窗
9 横百叶窗
10 错位横百叶窗
11 错位竖百叶窗
12 点扩散
13 左右到中间刷新
14 中间到左右刷新
15 中间到上下
16 上下到中间
17 右下到左上
18 右上到左下
19 左上到右下
20 左下到右上
21 横条
22 竖条
23 以上22种随机选择一种

　　我比较低调，所以用的是No.1 ;-)    感兴趣的同学可以回去自己试试No.2的效果。

PS：

　　今天把顶部的面板去掉了，原因是我觉得它有些影响整体的美观。呃，和功能相比，我更加重视外观。而且貌似除了我之外，几乎没人会用到那个地方。

　　去掉面板之后把订阅按钮安排在了导航栏的右侧，正宗的E7的订阅图标位置，呵呵。没订阅的同学可以顺便点点 ;-)

PS1：

　　最近增加了两个页面，不知道有同学发现没有，Joke  和 Video。

　　Joke，其实是安装的另外一个WordPress，新的模板，用来收集一些好玩儿的文字，成人内容居多，小朋友请自行绕道。

　　Video，是我的视频收集页面，一些只看一遍觉得不过瘾的视频。

PS2：

　　应该也同学有这样的感受，时不时会有人来问“你这里、这里和这里怎么实现的啊”之类的问题。我是一个小小菜鸟，不懂什么php、js，甚至连css、html都没真正学过。可恨的是，我对别人的新奇功能还特别感兴趣，这时我会首先翻翻他的文章，看看有没有相关的介绍教程，或者查看下他js、css，找点相关线索，实在没办法才会请教。

　　从上篇文章列出我的使用的插件后，加上我陆陆续续介绍过的功能，现在我的博客已经没有秘密了。另外如果你对这个主题的功能感兴趣的话，请参考iNove，如果你喜欢它的外观的话，请移步E7  :razz:

　　当然了，有问题还可以随时问我，只要我知道的，保证也会让你知道。话说，我喜欢别人从我这里获得满足感。


呃，其实这篇文章好水。

Related Posts

]]> http://www.whisperer.name/2009/10/gradual-change/feed/ 63 伟大的墙 http://www.whisperer.name/2009/09/great-friend-wall/ http://www.whisperer.name/2009/09/great-friend-wall/#comments Thu, 24 Sep 2009 23:54:10 +0000 whisperer http://www.whisperer.name/?p=58

欢迎围观GFW。

你们别想歪了哦，我知道你们怎么想的，你们肯定以为我在说GirlFriend Wall，女友站成墙是不？想得挺美，我才不像你们这些重色轻友的，我说的是 Great Friend Wall...我可是正宗的重友轻色，不信你色诱我试试...

……

很早之前就看到有同学博客上有帅帅的GFW（为了迎接祖国60年大庆，以下用读者墙代替），非常羡慕，但是因为我是新来的人生地不熟，还不好意思直接向别人要。于是就自己动手做了个 Links 页面，效果还不错，我很喜欢。昨天突然从菠萝那儿得知有个读者墙插件，狠狠地刺激了我重友轻色（你不信？再色诱我试试）的神经。马上查到居然是著名缓存插件 cos-html-cache 的作者 cosbeta 的作品：读者墙插件。

拿来试用一番，美化了一下外观，稍稍改动了一下，居然还实现了头像缓存。效果你也看到了，是不是和我的 Links 页面可以乱真了？以下是这个插件的简单介绍和我的使用小技巧。

1、插件功能及使用

功能：列出最近一周或者一个月或者一个季度或者一年的评论人员头像；

下载及使用：要不，去cosbeta网站上去看吧？

以下是cosbeta没有讲到的：

2、鼠标悬浮显示评论的条数

这个在IE和Chrome（没看Firefox的效果所以拿Chrome开刀了）下表现得不太一样，在IE下默认不显示评论条数。需要改一个地方才行。
打开 wp-reader-wall.php ，在52行左右，
有一句title='".$comment->comment_author." (".$comment->comment_nums.")' ，
还有一句 alt='".$comment->comment_author."' ，
前者在Chrome下有效，后者在IE下有效，这下你该明白怎么改了吧。
当然了，你还可以改成 (".$comment->comment_nums." 条评论)' ，就是我现在的效果。

3、用css控制外观

可以这么写，具体根据你自己风格去定义：

div#readerswall a{padding:3px}

div#readerswall img {
background:#F4F4F4;
border:1px solid #CCC!important;
padding:1px;
}

div#readerswall a:hover img {
border-color:#0085eb !important;
}

 

4、实现山寨版的gravatar头像缓存

为什么叫山寨版的头像缓存呢，想想我都想笑，因为我这个方法实在是太简单太BT了。我这里所有的gravatar头像都实现了缓存，详细可以看我这篇全面启用gravatar头像缓存，用了一个很简单而且有效的方法实现了评论列表，以及wp-recentcomments的头像缓存。所以说现在我已经有了一个avatar目录，存放缓存的头像。

再来看看这个读者墙调用头像的代码：

<img width='".$imgsize ."' height='".$imgsize ."' src='http://www.gravatar.com/avatar.php?gravatar_id=".md5($comment->comment_author_email)."&size=".$imgsize ."&d=identicon&r=G' alt='".$comment->comment_author."' />

这不是太简单了么，我直接改成：

<img width='".$imgsize ."' height='".$imgsize ."' src='http://www.whisperer.name/avatar/".md5($comment->comment_author_email)." .jpg' alt='".$comment->comment_author."(".$comment->comment_nums." )' />

居然就这样轻松实现了读者墙的gravatar头像缓存~~

5、遇到的另外一个BT问题

本来以为大功告成之时，鼠标移到 MuMu's 同学的头像上时，发现只显示一个 MuMu，请注意是 MuMu，既少了's又没有评论数量。我想可能是MuMu同学换过域名换过邮件换过名字的原因，到后台把所有内容改成一致，结果还是如此。怪了。

然后用Chrome查看页面源文件时才发现问题所在，为什么用Chrome，因为它查看源文件时有代码高亮，帮助我发现了问题。

再来看上面提到的第52行中的代码：

title='".$comment->comment_author." (".$comment->comment_nums.")'

源文件中的相关部分：

title='MuMu's (18)'

看出问题了吧？浏览器读取了title中前两个英文单引号之间的内容，MuMu's的那个 ' 把后面那个 ' 的饭碗抢了，人家当然不会给你显示了。

我解决办法是，在后台找到MuMu's在本博客的第一条评论，把名字改成MuMu。MuMu's，我也是被逼的啊，你知道我是最重友轻色（还有人不信？再色诱我试试）的啦。

Related Posts

]]> http://www.whisperer.name/2009/09/great-friend-wall/feed/ 110 在博客侧栏添加flash mp3 player http://www.whisperer.name/2009/09/insert-a-flash-mp3-player-in-your-sidebar/ http://www.whisperer.name/2009/09/insert-a-flash-mp3-player-in-your-sidebar/#comments Fri, 18 Sep 2009 18:30:47 +0000 whisperer http://www.whisperer.name/?p=54 　　自从我建博开始就陆续有帅哥来问：whisperer同学，你主页的音乐播放器怎么弄的哇？我每次都会说用flash-mp3-player插件...bla bla bla...也不知道有人回去设置满意过没。mp3player是一个很不错的网络播放器，在百度空间的时候我就已经用上了，转战到WordPress之后，幸运地发现了一个不错的插件依然可以实现。今天我就较详细的介绍一下，我是如何在WordPress的侧栏放置一个flash mp3 player。

　　首先自我批评一下，很多情况下，我喜欢鱼胜过渔，不管是别人给还是给别人，这样不好，不好……

　　我用的 Charles 做的 flash-mp3-player 插件，这个插件最新版本是10.0.7，如果你喜欢，可以用这个版本。我用的是9.3.31。这个两个版本差别巨大。

1、安装flash-mp3-player插件

普通插件的安装方法，此处省略XX字。

启用插件。

2、配置播放器和添加播放列表

进入WordPress的管理页面，“设置”一栏中，应该有一个“Flash Mp3 Player”。下面就是一些选项了，很好理解，也很好配置。

Player Properties：

Show upper panel, yes or no?  是否显示头部的面板，建议填yes

Show play list, yes or no?  是否显示播放列表，建议填yes

Auto start, yes or no?  是否自动播放，可填参数yes，no，random，5。分别是自动播放（第一首开始按顺序播放）、不自动播放、自动随机播放、自动从5首开始播放，当然了，第几首开始你来决定。注意一下后台这个播放列表的序号0其实是第一首。

播放列表编辑很方便，支持从后台直接编辑。这也是我选用插件而不是直接嵌入flash的原因之一。如果你不怕麻烦，可以去编辑那个 playlist.xml ，位置在 /wp-content/fmp_my_playlist/ 下。仅支持mp3格式的音乐。

3、在sidebar调用flash mp3 player

方法一：在WordPress的后台widget里，有一个flash mp3 player的widget，添加到侧栏就可以了。填写一下mp3player.swf的宽度和高度。设置播放器标题（最好把标题留空，美观嘛）。

这个方法的缺点是在每个页面都会有播放器，很明显没有必要。我用的是下面的方法二，只在首页显示播放器。

方法二：直接在sidebar.php里调用。在你的sidebar.php中合适的位置添加以下代码：

<?php if (is_home()) : ?>
    <div class="widget widget_flash_mp3player">
        <ul>
     <?php widget_flash_mp3player(array()); ?>       
        </ul>
    </div>
<?php endif; ?>

所谓合适的位置，除了你想要显示播放器的位置外，还有，要确保你在用后台其他widget时依然可以正常显示播放器。比如在iNove主题中，你需要把上面代码放到 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('north_sidebar') ) 以外的部分。

4、调整css

对外观要求比较高的同学用在style.css里调整一下就可以了。

比如，调整位置，隐藏标题：

.widget_flash_mp3player {
line-height:0 !important;
padding-left:0 !important;
}
.widget_flash_mp3player h3{
display:none;
}

5、定制播放器外观

这个插件自带的 mp3player.swf （作者不是Charles）既窄又长还丑。我们可以自己设计一下这个播放器，更改配色，宽度，高度等等。下面我提供3种不同的款式，包含源文件提供下载。只要会一点点flash就可以修改，相信同学们都展示自己的个性来。设计好之后覆盖原来的mp3player.swf即可。

 

这仅仅是我目前是用的方法，并不代表是唯一或者最好的，如果你有更好的方法，请告诉我一下。另外我还是刚刚接触WordPress、php、js等等，有错误的地方很正常，恳请指正。  

最后做一个小小调查，关于是否自动播放的问题。昨天有N个同学让我关闭自动播放，在第N+1个同学要求的时候，我给关了。

[poll id="4"]

相关下载：

 flash-mp3-player.zip

 3种样式的mp3player及其源文件.zip

Related Posts

]]> http://www.whisperer.name/2009/09/insert-a-flash-mp3-player-in-your-sidebar/feed/ 78 全面启用gravatar头像缓存 http://www.whisperer.name/2009/09/cache-gravatar/ http://www.whisperer.name/2009/09/cache-gravatar/#comments Sun, 13 Sep 2009 16:19:32 +0000 whisperer http://www.whisperer.name/?p=52

    把Gravatar头像缓存到本地服务器，避免访客每次都从gravatar.com下载头像，有效提升了博客访问速度。因为我用的是国内空间，所以启用头像缓存有一个更重要的意义：让用教育网的同学也可以看到头像。Let's whisper有两个地方用到了gravatar头像：评论列表和最新评论（启用了wp-recentcomments插件），所以这两处都要进行缓存。

    我用的启用gravatar头像缓存的方法来自willin，取名为“小g”，也许这是世界上最小巧的gravatar头像缓存方案。下面我就介绍一下这个方法，特别是iNove用户，往下看咯。

1、对评论列表里的gravatar头像启用缓存
先在你的网站 wp-content 的同级目录 建立文件夹: /avatar　权限:755, 这是准备 gravatar 缓存的路径。
找到原来的 comments.php 或是在 functions.php 里的 function mytheme_comment($comment, $args, $depth) 会有一段像这样:

<?php echo get_avatar($comment,$size='50',$default='<path_to_url>' ); ?>

如果你用的iNove主题，在functions.php里会有下面的一段：

<?php if (function_exists('get_avatar') && get_option('show_avatars')) { echo get_avatar($comment, 32); } ?>

把这个换成：

<?php
$p = 'avatar/';
$f = md5(strtolower($comment->comment_author_email));
$a = $p . $f .'.jpg';
$e = ABSPATH . $a;
if (!is_file($e)){    //当头像不存在就更新
$d = get_bloginfo('url'). '/avatar/default.jpg';
$s = '50';
$r = get_option('avatar_rating');
$g = 'http://www.gravatar.com/avatar/'.$f.'.jpg?s='.$s.'&d='.$d.'&r='.$r;
copy($g, $e);
if ( filesize($e) == 0 ){ copy($d, $e); }
};
?>
<img src='<?php echo $a ?>' alt='' />

预设头像 default.jpg, 放在刚刚建立的 avatar 文件夹内，当访客不是gravatar用户时就会调用这个头像。 上面的变量名顺便解释一下: $p 是 path(路径), $f 是 filename(档案名), $a 是 avatar(缓存档案), $e 是服务器路径, $d 是 default(预设头像), $s 是 size(尺寸), $r 是 rate(分级), $g 是 gravatar(原始档案)。

如果想要更新头像，去ftp里把 /avatar 路径下的头像文件删除就可以了。

2、对wp-recentcomments插件的头像启用缓存

在 /wp-recentcomments 路径下找到 core.php，其中有这么一段：

function rc_get_avatar($show, $position, $size, $default, $email) {

    $avatar = '';
    if ($show == 'true' && function_exists('get_avatar') && get_option('show_avatars')) {

        // 当默认头像来自 Internet 时
        if (substr(strtolower($default), 0, 7) == 'http://') {
            $file = attribute_escape($default);
            $avatar = '<div class="rc_avatar rc_' . $position . '">' . get_avatar($email, $size, $file) . '</div>';

        // 当默认头像来自 "/wp-recentcomments/avatars/" 目录时
        } else if ($default != '') {
            $file = 'wp-content/plugins/wp-recentcomments/avatars/' . $default;
            if (file_exists($file)) {
                $file = get_bloginfo('siteurl') . '/' . $file;
                $avatar = '<div class="rc_avatar rc_' . $position . '">' . get_avatar($email, $size, $file) . '</div>';
            }

        // 当不包含默认头像时
        } else {
            $avatar = '<div class="rc_avatar rc_' . $position . '">' . get_avatar($email, $size) . '</div>';
        }
    }

    return $avatar;
}

改成：

function rc_get_avatar($show, $position, $size, $default, $email) {

    $avatar = '';
    if ($show == 'true' && function_exists('get_avatar') && get_option('show_avatars')) {

$p = 'avatar/';
$f = md5(strtolower($email));
$a = $p . $f .'.jpg';
$e = ABSPATH . $a;
if (!is_file($e)){
if ($default){$d = $default;} else {$d = get_bloginfo('url'). '/avatar/default.jpg';}
$r = get_option('avatar_rating');
$g = 'http://www.gravatar.com/avatar/'.$f.'.jpg?s='.$size.'&d='.$d.'&r='.$r;
copy($g, $e);
if ( filesize($e) == 0 ){ copy($d, $e); }
};
    $avatar = '<div class="rc_avatar rc_' . $position . '"><img src="'.$a.'" style="width:'.$size.'px;height:'.$size.'px;" alt="" /></div>';

    }
    return $avatar;
}

完成。

重要提示：  如果采用这个方法后，文章页面无法显示头像，而且头像地址变成形如www.whisperer.name/cache-gravatar/avatar/...的样子，请把上面代码中的$p = 'avatar/'改成$p = '/avatar/'

Related Posts

]]> http://www.whisperer.name/2009/09/cache-gravatar/feed/ 62 美化iNove的Google自定义搜索 http://www.whisperer.name/2009/09/improve-the-google-custom-search-results-of-inove/ http://www.whisperer.name/2009/09/improve-the-google-custom-search-results-of-inove/#comments Tue, 01 Sep 2009 11:56:54 +0000 whisperer http://www.whisperer.name/?p=42 iNove主题在后台的“主题选项”中设置了一个定制Google自定义搜索的功能，以优化WordPress的搜索结果。我一直没有启用这个功能，直到看到A-shun同学折腾后的搜索页面，恍然大悟，原来我也是想要搜索结果在当前主题内展示，而不是跳转到Google的页面。我也做出了一些改变，把搜索结果页面整合到了主题中，具体的效果，可以到NeoEase和Let's whisper随便搜索些东西来比较一下。 [比较这里吧：前 | 后]

其中参考了我爱水煮鱼的教程，如果你不是用iNove，可以直接看那篇教程。以下我就针对iNove，开始：

1、登陆到Google自定义搜索，创建你的自定义搜索。（此处略去x百字）

2、创建一个搜索结果模板。把下面代码保存为cse.php，上传至iNove主题的文件夹。（cse意为custom search engine，你可以换成其他）

<?php
/*
Template Name: cse
*/
?>

<?php get_header(); ?>
<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth =600;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>
<?php get_footer(); ?>

var googleSearchFrameWidth =605为搜索结果页面的宽度，iNove默认的宽度是605。

3、在WordPress中创建一个页面，比如我的，地址为http://www.whisperer.name/cse，标题为Search Result，模板选择刚刚创建的cse。

然后在导航栏隐藏这个页面，在iNove的文件夹找到templates/header.php，找到下面一行：

wp_list_pages('title_li=0&sort_column=menu_order');

改成，

wp_list_pages('title_li=0&sort_column=menu_order&exclude=41');

其中exclude=41意思是在导航栏隐藏这个cse页面，41是这个页面的ID，在/wp-admin/edit-pages.php页面，鼠标悬浮在页面的标题上，在下面状态栏就可以看到post=41。

4、定义搜索框。仍然是templates/header.php，找到下面代码:

<form action="http://www.google.com/cse" method="get">
    <div class="content">
        <input type="text" class="textfield" name="q" size="24" />
        <input type="submit" class="button" name="sa" value="" />
        <input type="hidden" name="cx" value="<?php echo $options['google_cse_cx']; ?>" />
        <input type="hidden" name="ie" value="UTF-8" />
    </div>
</form>

改成，

<form action="<?php bloginfo('wpurl') ?>/cse" id="cse-search-box">
  <div class="content">
    <input type="hidden" name="cx" value="<?php echo $options['google_cse_cx']; ?>" />
    <input type="hidden" name="cof" value="FORID:11" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" class="textfield" id="searchtxt" name="q" size="24" />
    <input type="submit" class="button" id="searchbtn" name="sa" value="" />
  </div>
</form>

其中第一行的< ?php bloginfo('wpurl') ?>/cse是刚刚你创建的搜索结果页面的地址。

5、在iNove的主题选项中，勾选使用Google自定义引擎，填上你的CX值。

这样，所有的工作都做完了。你可以随时在WordPress默认搜索和Google自定义搜索之间进行切换。并且不需要再另外用css定义搜索框了，已经沿用原来的搜索框样式了。

PS：这个是可以在后台切换两种搜索模式，应该可以在搜索框旁边定义一个按钮，让访客可以自行选择。刚入WP的时候在某个博客上看到过，谁知道怎么定义的话不妨共享出来。

2009/09/24  update: 在IE6下出现错位的同学，请更新一下第4步中的代码，感谢bigyang 。


Related Posts

]]> http://www.whisperer.name/2009/09/improve-the-google-custom-search-results-of-inove/feed/ 108 文章中插入8-box音乐 http://www.whisperer.name/2009/08/insert-single-music-in-your-posts-from-8-box/ http://www.whisperer.name/2009/08/insert-single-music-in-your-posts-from-8-box/#comments Fri, 28 Aug 2009 09:24:10 +0000 whisperer http://www.whisperer.name/?p=37 8-box是国内一个很不错的音乐分享网站。在线播放音乐的速度挺不错，这么好的资源咱们得好好利用一下。
网上有很多教程，教你如何在博客中插入自定义的播放列表，不过我要介绍是插入单曲，而且播放器也不是他们主流的样式。好，先看看下面的效果，相信你肯定会爱上它。

 

这首音乐是Lady Gaga的Lovegame，两种样式，点击按钮可以播放。

很mini吧？下面是方法，非常非常简单。

1、获取音乐的ID

在8-box中每首歌曲都有一个固定的ID，一般可以在地址栏中找到。比如，

http://www.8box.cn/a/share/s/493274

其中493274就是这首Lovegame的ID。

还可以在这个地方看到：

 

2、在文章中插入Flash

http://www.8box.cn/feed/e92400_493274/p.swf

把红色的部分换成你的音乐ID。
Flash的大小为50×18或18×18。你可以把Flash背景设成透明，以适应你的主题。

好了，就这么简单。方法适用于任何可以插入flash的网站。

PS：文章中插入MP3音乐的话，我特别喜欢Dewplayer，播放器有3种外观模式，还可以插入多首音乐。效果看这里。

Related Posts

]]> http://www.whisperer.name/2009/08/insert-single-music-in-your-posts-from-8-box/feed/ 10 去除IE和Firefox中链接的虚线框 http://www.whisperer.name/2009/08/removing-the-dashed-box-around-links/ http://www.whisperer.name/2009/08/removing-the-dashed-box-around-links/#comments Mon, 24 Aug 2009 09:13:36 +0000 whisperer http://www.whisperer.name/?p=34 在IE和Firefox下，点击超链接时会产生一个虚线框，
虽然几乎所有的网站都会有，
可是个人觉得非常影响美观（在Chrome和Opera中没有）

细心的同学可能早就发现了，点击whisperer.name上所有的链接是没有这个恶心的虚线框的。
下面我就介绍一下如何在WordPress中实现消除链接元素周围的虚线框。

Firefox中的虚线框很好去除。对于IE浏览器，我们用.htc的脚本文件来解决这个问题。

1、把下面代码保存为一个扩展名为.htc的文件（或者直接下载我的文件）：

<public:attach event="onfocus" onevent="example()"/>
<script language="javascript">
    function example()
            {
            this.blur();
}
script>

把这个文件上传到你的网站上，得到一个地址。

2、修改你当前主题的style.css文件，追加以下代码：

a {behavior:url(你的.htc文件地址)}  /*去除IE中的链接虚线框*/
a:focus{outline:0;}  /*去除Firefox中的链接虚线框*/

保存之后就可以了，享受没有虚线框束缚的美感吧。

PS：后来发现这个方法有一个很大的缺点，具体见下面8#的评论。

这里还有另外一个方法，用jQuery实现，方法来自willin

$('a,input[type="submit"]').bind('focus',function(){if(this.blur){ this.blur();}});

顺便说，如果用 noConflict, $ 要还原 jQuery, 不能用 $，$(’a,input[type="submit"]‘)…..要改成 jQuery(’a,input[type="submit"]‘)…..

Related Posts

]]> http://www.whisperer.name/2009/08/removing-the-dashed-box-around-links/feed/ 22