逛了不少博客网站，这功能也算是比较常见的，效果看起来也不错，挺炫的。不过暂时来说本站还没加上这功能，或许迟点会给加上吧，现在先记录一下，以后需要用到的时候就方便多了。

1、jQuery加载

优点：兼容所有游览器，包括IE哦~

缺点：需要加载jQuery库文件（话说现在有哪个程序或者模版什么的没有用到jQuery的？），所以这不算缺点~

第一步：先加载jQuery库文件，上面也说了，基本没什么主题没加载的，但例外还是有的，所以有加载了的这步就略过，没有的话先加载。

新浪CDN提速，也可以下载到本地再引入：
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js"></script>

第二步：将下面代码粘贴在主题加载的其中一个js里面，也可以用<script>包裹起来放在jquery后面。

jQuery(document).ready(function($){
$('.post-title a').hover(function() {
//.post-title a 改成你要这个效果显示的链接样式名称,可以多个链接,用英文状态下的逗号隔开
$(this).stop().animate({'marginleft': '10px'}, 200);
//鼠标移动到链接上的平滑效果,效果时间是200毫秒,可以自行修改
}, function() {
$(this).stop().animate({'marginleft': '0px'}, 200);
//鼠标离开链接后的平滑效果,效果时间是200毫秒，同上
});
});

2、CSS3效果

优点：效果和上面一样 = 没优点

缺点：不兼容IE游览器，虽然在IE游览器下也能右移，只是没有平滑效果，IE并不支持CSS3

第一步：先给你要显示这个效果的a链接添加下面CSS属性：（例如：.post-title a）

-webkit-transition: margin 0.2s ease-out;   
-moz-transition: margin 0.2s ease-out;   
-khtml-transition: margin 0.2s ease-out;

第二步：为要显示这个效果的a链接添加hover，然后添加下面CSS属性即可，例如：.post-title a:hover

margin-left:10px;  /*移动距离可以自己调*/

The End..

上面两种方法改完后都能看到效果，两张方法效果都一样。但第一种方法兼容性比较好，而且现在大多网站和主题都用到jQuery，所以建议使用第一种方法。