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 网页渐变效果 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 美化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 去除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