这篇文章最初发表于2008年
介绍的技巧和技术可能过时。

我最近决定给上面的RSS图标添加一点酷感。博客.spoonggraphics通过显示当前的订户数量。_在网上看到了大量的javascript工具提示示例,我认为这是最好的解决方案,当用户将鼠标悬停在图标区域上时显示相关信息。_使用极其简单的jquery脚本和一个php片段的组合,按照本演练了解如何在自己的酷工具提示中显示RSS计数。

已经在中使用了jquery博客.spoonggraphics在可折叠注释区域的形式中,我开始寻找一个预构建的工具提示脚本,它可以很容易地实现。
学习jquery是我近期计划的,但幸运的是,我们的javascript noobs有现成的下载功能,如最简单的jquery工具提示CSS地球仪.
从下载捆绑包CSS地球仪或者从演示中提供的源代码创建一个新的javascript文件。
您还需要下载最新版本的JQuery.

将这两个文件放在网站结构的相关目录中,使用WordPress,我将这些文件保存在自己的“js”目录下的主题文件夹中。你网站的部分,wordpress用户修改header.php文件的方式如下:


也,在样式表中粘贴CSS Globe提供的CSS样式。

下一步是使用FeedBurners API生成进料计数,如果你还没有使用饲料燃烧器要管理你的RSS源,你只需从头到脚创建帐户使用来自45 N5.com,我们可以复制PHP代码把它粘贴到我们的网页头上,在'uri='下输入您自己的feedburner id。

通过添加来修改RSS源链接类=“工具提示”要将其与jquery脚本集成,工具提示中显示的实际文本放在标题标记中,输出feedCount,后跟单词'subscribers'或'readers',如下所示:

标题= 用户“

现在,整体链接应该如下所示:

用户>通过RSS订阅

通过创建半透明的背景,为工具提示添加一个画龙点睛的效果,使底层网站可以显示出来。_在Adobe Photoshop中创建一个178x46px文档,beplay足球画一个圆角矩形,使用您选择的颜色填充,并将不透明度降低到60%,使图像显示Photoshop的支票透明模式。_转到“文件>另存为”,然后从下拉列表中选择PNG。beplay足球

更改文本样式以匹配网站内容,并参考css._中的png背景。在我的例子中,css如下所示:

工具提示{
位置:绝对;
填料:10px;
显示:无;
字体系列:“Times New Roman”,时代,衬线;
字体大小:22px;
字体:斜体;
字体粗细:粗体;
颜色:×707070;
背景:url(images/tooltip bg.png)无重复;
}

上传文件并测试。现在我们都知道ie6不喜欢使用alpha透明的png文件,如果您需要迎合史前浏览器,请不要忘记添加IE6 PNG修复.

请随时查看此处的实时示例博客.spoonggraphics把鼠标悬停在标题的RSS按钮上。_当你在那里的时候,你可能想继续订阅;-)

在Pinterest上共享
没有图像。
27评论 提交 加上你的!
订阅接收spoon图形通讯beplay全方位手机移动娱乐平台

订阅我的时事通讯,成为第一个听到新文章的人

27评论

  1. 当工具提示被激活时,我看到一种奇怪的行为。

    标题,在主内容区域和侧边栏中,以及侧边栏链接将权重从粗体更改为粗体。如果你知道我的意思的话,有点像真黑体和假黑体。beplay足球
    我还观察了主内容区域中的链接是如何改变颜色的。不过,并没有影响谷歌广告中的链接。
    这些变化是暂时的,更像是长时间的闪烁。

    在火狐2.0.0.14中发现了这些问题,卡米诺1.6-1Flock 1.2.2和Seamonkey 1.1.10。
    另一方面,Safari 3.1.2和Opera 9.5.1没有显示这种闪烁。

    所有的一切都在Mac上(OSX 10.4.11),因为我太懒了,没法启动Vaio,看看它在PC机上的表现如何;-p

评论现已关闭