目前最好的热门文章输出:无觅热门文章Widget

但凡网站或者博客都喜欢弄个热门文章的widget，我也不例外，曾经尝试过许多种方式，比如通过WP-PostViews插件提供的widget等，但效果均不是很理想，要么依据评论数要么依据浏览数，且不是实时数据，前两天尝试了无觅提供的热门文章Widget（效果见右侧边栏今日热门），觉得非常不错，在这里推荐给大家，并手把手的教你如何使用。

无觅热门文章widget的优势

首先来看看效果预览：

1.数据是实时的，最新的，用来输出最新热门或者当日热门最为合适不过了；

2. 根据“喜欢”和“阅读数”综合排名，而不单纯依靠浏览或者评论数；

3.多平台使用，无论你是使用wordpress还是其他站点，都可以使用；

4.方便的修改代码，来调整字体、颜色、背景色等；

5.高亮显示排名，显示“喜欢”数和“浏览”数。

手把手教你修改和输出热门文章

1.首先，你得来到无觅网站管理中心，注册并添加你的网站，并且使用无觅相关文章插件，这样这个应用才能读取你的数据；

2.进入管理中心，选择热门文章Widget，进入设置。

3.然后就出现如下图的局面了：

1）模板选项直接忽视，自己取个名字好了；

2）建议侧边栏选择单列文本，大块的位置的话选择双列文本，图片的话还是算了吧，除非你忽视速度的影响；

3）进入设置自定义代码。

4.自定义样式风格，其实这里是最为核心的了，如果你和我一样对CSS一无所知，那么就看下去，否则，直接忽略吧。

在开始之前，你需要一个吸色器，这里推荐capturecolor，用来查看你放widget的地方的颜色，以便修改widget的底色。

需要修改的CSS样式大概是这个样子：

.hots {
overflow: hidden;
margin: 0 0 20px;
padding: 0 10px;
background: #EAF4FE;（这里改为你添加widget地方的背景色）
}

.hots .textItem {
overflow: hidden;
margin: 0 0 5px;
color: #535353;（“喜欢”和阅读次数的文字样色）
list-style-type: none;
_clear: both;
}

.hots .textItem p {
margin: 0;
padding: 0;
}

.hots .textItem .itemTitle {
overflow: hidden;
float: left;
display: inline;
height: 20px;
line-height: 23px;
}

.hots .itemTitle span {
float: left;
display: inline;
width: 15px;
background: url('/images/icon_square.gif') no-repeat 0 10px;
}

.hots .textItem .analytics {
clear: both;
margin-left: 15px;
color:#cccc;
font-size: 12px;
}

.hots .textItem a {
color: #000000;（文章标题颜色）
cursor: pointer;
outline: none;
text-decoration: none;
font-size: 14px;（字体大小调节）
}

.hots .textItem a:hover {
color: #ef4b4b;
}

5.点击安装指南，修改widget高度和宽度以满足你的需求，并且设置显示的热门文章数量。

大功告成！