四有新人

本站不支持IE,谢谢

RSSRSS twitterTwitter FacebookFacebook Google+Google+ eMaileMail

仿人人网底部“返回顶部”按钮实现

9 Comments

最近上人人网的时候,发现页面的底部有一个“返回顶部”的按钮,于是在自己的网站上也搞了一个,其实非常简单。

首先,修改主题模板的footer.php文件,</body>上面加入如下代码:

<div id="toolBackTo" style="display: none;">
    <a title="返回顶部" onclick="window.scrollTo(0,0); return false;" 
        href="#top">返回顶部</a>
</div>

上面这段代码是完全Copy自人人网的源代码。返回页面顶端的代码很简单。

接下来修改style.css文件,加入上面div和链接的样式:

.back-to {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 999;
    width: 110px;
    overflow: hidden;
    zoom: 1;
    -ie6-position-fixed-delay: 200;
}

.back-to .back-top:hover {
    background-position: -50px 0
}

.back-to .back-top {
    float: right;
    display: block;
    width: 50px;
    height: 50px;
    background: url(http://a.xnimg.cn/imgpro/button/back-top.png) no-repeat 0 0;
    margin-left: 10px;
    outline: 0 none;
    text-indent: -9999em;
}

非常不好意思,这些代码也是原样copy自人人网。

.back-to就是div的样式,它的position设为fixed。这样它就会固定在页面的某个地方。在这里它的位置是bottom: 10px; right: 10px,就是右下角距离浏览器边角各10px的位置。

到这一步,基本功能已经实现了,当我们把页面滚动到下方的时候,点击这个按钮,就会自动跳到页面的顶端。

不过,当页面在顶端的时候,这个按钮其实没有存在的必要,我们可以用javascript来控制它。

再回到footer.php文件,在刚刚的代码下面加上如下代码。

<script type="text/javascript">
$(function(){
    var bt = $('#toolBackTo');
    var hl = $.browser.webkit ? $('body')[0] : $('html')[0];

    $(window).scroll( function() {
        var st = hl.scrollTop;
        show = (st>30);
        if( show ){
            bt.show("slow");
        }else{
            bt.hide("slow");
        }
    });
});
</script>

这段代码用到了jQuery,所以需要先检查一下当前模板有没有引用jQuery,如果没有的话要在header.php里引用它。

我们给window对象绑上了scroll方法,在页面滚动的时候触发来控制返回按钮所在div的隐藏和显示。

代码非常简单。

WordPress Mobile Pack插件使用简介

8 Comments

WordPress Mobile Pack插件是WordPress上的一个著名的手机插件,它会自动识别手机浏览器,给手机访问的用户提供一个友好的界面。以前就装过,苦于以前空间的限制,移动域名一直无法配置,其实可以不用配置,但是我是一个追求完美的人啊!

使用其实很简单,没什么配置的话装上就能用,这里着重解释一下它的几个访问模式。

1. Browser detection: 这个模式下不需要配置移动域名,插件会自动识别浏览器选择显示手机版网站或者桌面版网站。

2. Domain mapping: 这个模式下插件根据访问的域名来选择显示网站版本。需要配置一个移动域名。

3. BOTH: browser detection and domain mapping: 顾名思义,兼容以上两种模式。同样也需要配置移动域名。不同的是当用手机访问的时候会让你自己选择需要访问的版本。第二次访问的时候就会自动选择上次所访问的版本。

下面就是怎么配置移动域名:

按我的例子,主站是www.wangwenhao.net,移动域名是m.wangwenhao.net。

在空间的DNS配置里新建一个子域名m,将它定向到和www.wangwenhao.net相同的目录下就可以了,关于这个我纠结了很久,网上的资料也很少,尝试了很多次才成功的……

让你的WordPress评论显示头像

5 Comments

先介绍一下Gravatar,(Globally Recognized Avatar的缩写) 是一项用于提供在全球范围内使用的头像服务。只要你在Gravatar的服务器上上传了你自己的头像,你便可以在其他任何支持Gravatar的博客、论坛等地方使用它。

那它和WordPress有什么关系呢?其实在早期的时候它是附属于WordPress服务的,现在还应用到了其他Web2.0应用。

首先要设置一下你的WordPress,在评论选项中有关于头像的设置,好像2.5以后就有了。这个设置的头像会在你留言评论过的各个博客空间显示,经常看到博客评论人的名字旁边会有一个头像。

然后你还需要一个Gravatar账号,当然这是免费的,通过你所留的邮箱绑定你的头像。

1. 进入Gravatar 官方注册网址:http://www.gravatar.com 。点击”Get your Gravatar today”开始注册;

2. 在打开的新页面中输入你在WordPress 中用的(或者是在别人的博客上留言时填写的)email地址。提交。

3. 进入填写的邮箱进行验证。点击右键中的验证网址的超级链接。

4. 在打开的新页面中输入用户名和密码。设置好提交。

5. 上传头像,有4个选项:从本地计算机,网络上的图片,电脑摄像头,以前上传的图片,选择一种上传。

6. 将图片剪裁成合适的尺寸。

7. 给自定义头像设置等级,有4个等级:G, PG, R, S. 什么意思在管理后台的WordPress头像设置那里写得很明白了,一般选G等级。提交后就OK了,一般等待几分钟,在WordPress博客你留言名字的旁边就会出现设置的自定义头像了。

8. 另外在Gravatar 管理后台还能进入新增邮件地址,新增头像等操作。注意头像是和邮件地址绑定的。如果你想要同时拥有两个同时在用可供选择的头像,就新增加邮件地址设置头像,在留言的时候想显示哪个头像就设置哪个email 地址。

WordPress.com推新功能:打个电话就能写博客

No Comments

博客服务提供商WordPress(Wordpress.com) 日前推出了拨打电话发布语音博客的新功能“Phone Your Blog”(打电话写博客)。其使用非常简单,Wordpress.com网站的注册用户只需拨打一个特定号码然后对着电话讲话,就能把内容录下来并发布在自己的博客上。WordPress.com 目前支持多种博客撰写方式,比如登录网站直接写博客、通过电子邮件和桌面客户端发布博客等。此外,Wordpress.com还支持iPhone、 Andorid和黑莓等智能手机设备。不过,新的打电话写博客功能有所不同。

WordPress用户在博客设置中开启语音博客发布项并进行设定后即可使用电话语音博客功能。

用户只需要登录Wordpress.com网站,在控制面板里点击“我的博客”标签,并启用“通过语音发布博客”选项就能使用该功能。用户将得到一个特定的电话号码和一段代码,拨打该电话并提供代码后,你对着电话讲述的所有内容将录制为音频文件并发布到你在Wordpress.com注册的博客上。

这项功能完全免费,用户惟一要掏的就是电话费。不过,目前只有在Wordpress.com网站 注册的博客才能使此功能。用Wordpress软件自建博客的用户还需要等上一段时间,Wordpress或将通过更新软件或是发布插件来支持该功能。

不过打电话写博客并非Wordpress首创,美国另一博客服务商Live Journal(livejournal.com/voicepost) 早已提供了类似服务。

日历

2012 年二月
« 十    
 1234
567891011
12131415161718
19202122232425
26272829  

分类目录