你也许注意到了在浏览本站时，鼠标移到链接上出现的气泡窗口吧！这东西是咋做出来？怎么移植到你的blog上？下面就很罗嗦的告诉你！我已经在我的blogbus上测试了，其他的blog系统应该大部分也能用，Q-zone和MSN Space我就不确定了啊！
我从网上发现了3种气泡窗口，它们是：
它们的显示效果分别如下：
我个人认为Arekore Popup最好看了，但是载入时间也最长了，像我们这种使用bluehost国外主机的，本来打开就够慢了，再加上这玩意…谁愿意等下去啊！ Bubble Tooltips也很漂亮，载入时间短；Sweet Title是本站目前正使用的，载入时间少，显示效果完全由CSS控制。 当然，具体还是看你的个人爱好，反正我3种都给你介绍，行吧，并相应介绍在blogbus下的做法
Arekore Popup
你可以在本站下载到此压缩包Arekore Popup 。解压后一大堆文件全部扔一个目录就行了，CSS也不需要你配置，默认的就是最好的！然后要做的是把这个javascript程序加进你的网页里。
在wordpress的模板编辑下，选择编辑header.php文件，在<head>和</head>中加入以下两段就行了
在blogbus下怎么做
blogbus没有提供固定地址文件空间，就是说你上传的文件都是随即生成文件名，所以这样以来即便是你把文件全部传到blogbus里也没法让js脚本调用这些文件。那怎么办呢?恐怕，你只能选择把文件上传到其他具有固定个人空间的服务器了，例如websamba。或者使用我为你提供的固定文件地址吧!我已经把Arekore Popup的相应文件都存放到了这个目录，你只要把css和js文件地址换成我目录里的就行了。然后编辑blogbus模板里的Header，同样是在<head>和</head>中加入以下两段就行了
ok,你的blogbus应该也能显示漂亮的Arekore Popup效果了
Bubble Tooltips
你可以在本站下载到此压缩包Bubble Tooltips 。解压后一大堆文件全部扔一个目录就行了，CSS也不需要你配置了，然后要做的是把这个javascript程序加进你的网页里。
还是在header.php里加入以下这段代码
在blogbus下怎么做
其实方法和上面说的Arekore Popup在blogbus下的配置方法是一致的，我提供的该文件存放在了这个目录，不过如果你实在讨厌使用我的空间，用blogbus下的空间也是可以做到的，麻烦点，我还是告诉你好了，寄人篱下的滋味毕竟不好受嘛!
先把解压包里的BubbleTooltips.js和bt.gif文件上传到你的blogbus下(注:blogbus不是提供了2M免费上传空间吗)，得到的文件名地址假设分别为http://username.blogbus.com/files/2145614571515.js和http://username.blogbus.com/files/14147126471571.gif。然后修改在模板编辑里修改head，添加这句
然后再修改模板编辑里的CSS文件，添加这段
.tooltip,.tooltip *{display:block} /*added by javascript*/
.tooltip{ width: 200px; color:#000;
font:lighter 11px/1.3 Arial,sans-serif;
text-decoration:none;text-align:center}
.tooltip span.top{padding: 30px 8px 0;
background: url(http://username.blogbus.com/files/14147126471571.gif) no-repeat top} /*填入你上传的bt.gif文件地址*/
.tooltip b.bottom{padding:3px 8px 15px;color: #548912;
background: url(http://username.blogbus.com/files/14147126471571.gif) no-repeat bottom} /*填入你上传的bt.gif文件地址*/
大功告成，你的blogbus总算能正常显示了
Sweet Titles
嗯，这个才是我的最爱!显示效果完全由CSS控制。这里下载压缩包Sweet Titles，其实就俩儿文件。照旧存放在一个目录下，然后还是在header.php里添加以下代码
然后在CSS文件里添加如下
body div#toolTip {
position:absolute;
z-index:1000;
width:220px; /*设定气泡窗口最大宽度*/
background:#000; /*设定气泡窗口背景颜色*/
border:2px double #fff; /*设定边缘线粗细,风格和颜色*/
text-align:left;
padding:5px; /*padding,margin你还要我讲一次?*/
min-height:2em;
-moz-border-radius:5px; /*这个是firefox专用D，用来圆弧划边缘的四角,很不错的效果*/
}
body div#toolTip p {
margin:0;
padding:0;
color:#fff; /*说明文字颜色*/
font:11px/12px verdana,arial,sans-serif;
}
body div#toolTip p em {
display:block;
margin-top:3px;
color:#f60; /*地址文字颜色*/
font-style:normal;
font-weight:bold;
}
body div#toolTip p em span {
font-weight:bold;
color:#fff;
}
在blogbus下怎么做
恐怕你还是得用我提供的文件存放目录了,全在这里了。然后方法还是照上面提到的做,我不想在冗述了 因为blogbus对js的支持有点问题，此sweet titles在blogbus使用会在页面上生成一大堆错误脚本，请勿在blogbus上使用此js。
我用的是blogcn的，怎么办啊?
其实实际上是一样的，只不过blogcn提供的模板编辑把所有的东西都放在一个html文件里了，所以只要切换到模板编辑的html代码模式，在<head>和</head>中添加<script>….</script>这部分，然后在<style></style>中添加css配置文件就行了。
小结
其实以上三种不同的气泡窗口所用的配置方法都是同一个道理，都是加载js脚本，用CSS文件进行风格控制，所以你应该能够举一反三的，况且我已经举了3个例子啊!
相关知识介绍:气泡窗口是如何显示描述性文字的
我们看到气泡窗口不至显示了链接地址，还有描述性文字(白色的文字，看到了不)，这是怎么实现的呢?
其实这是由html语法里的alt或title语句来实现的。平时我们添加链接，都不爱给链接加上个描述性文字，至少我看到的绝大部分博客都没有这么做。比如我们添加一个http://pp.punkid.cn的链接，通常在html下最基本的语句是
这样写的话，气泡窗口最多显示个地址而已，没有描述性文字，要添加描述性文字你还得加入alt或title，使代码变成这样的
这样才会出现描述性文字了，那么alt和title有什么区别呢?
alt本意是用来替代链接的文字，特别是针对图片链接，当图片没有载入进来时，alt里的描述性文字就会替代图片显示在图片框里，以便告诉浏览者这里没有载入一张什么样的图片;而title则是链接/图片链接的标题，就是你把鼠标移到链接上就会显示的提示性文字。然而在IE下，这两者的概念显然被混淆了，alt也起到了title的作用。所以最好两个都填上吧!
文章中的窗口风格也很新颖。
哦，那是用了个插件实现的，专门针对代码使用的，这样看起来代码更清晰。
疯了！！！太太太麻烦了！！！我一直追求的是“剪贴”===》“粘贴”的简单步骤啊……55
绝对要用，试试
btw,你这些是哪里学到的哦？
老外的网站！平时沉下来看看文档之类的，肯定会有收获的。
老实说，P肚子里面还是有货D。不象8，动不动就晕菜。当然8的音乐天赋也是值得称赞的，艺术嘛，也许灵感可以从晕而来。
我比他是自认不足哦
不过WINDOWS里边一般的问题还是能解决的,
其他的就是人懒不想去看
一般动手过就能明白了
A，相信我是聪明的吧T_T
总算配置好了.可是发现在页面出来气泡的过程很缓慢..要鼠标移上去1秒后,才逐渐显示完整.有解决的办法吗?
可能是载入慢的原因吧，如果你用的是sweet title的话就不存在逐渐显示了。