blogger 3.0:为博客链接 添加最详细得富文本解释跳出栏

原作者不详，我对做网页的标准词语翻译不是很清楚，所以就尽我所能通俗的讲给大家听。

就是给你博客上的链接词汇 增加一个跳出框，当鼠标移动到上面的时候，就会出现。这个跳出框跟那个我博客上本身有的预览框有点像，只不过这个是可以自己设定内容的：）

要看具体什么样，请上测试博客，那个第一篇文章，返回GG派，鼠标悬停在GG派上的样式就是了：）
整个hack/扩展 不大，脚本文件只有5k，所以基本不会影响博客速度。

安装方法： 第一步，把下面的代码加入你的xml模板里的</head>上边，]]<>/b:skin>下边：


<script src='http://ggpi.008.net/balloontip.js' type='text/javascript'/>

第二步，把下面的css代码放进你的博客]]<>/b:skin>上边的css区域，这是调整跳出框样式的：

.balloonstyle{
position:absolute;
top: -500px;
left: 0;
padding: 5px;
visibility: hidden;
border:1px solid black;
font:normal 12px Verdana;
line-height: 18px;
z-index: 100;
background-color: white;
width: 200px;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135,Strength=5);
}

#arrowhead{
z-index: 99;
position:absolute;
top: -500px;
left: 0;
visibility: hidden;
}


然后保存模板。

第三步，其实你已经把hack/扩展装好了，这一步告诉大家怎么使用这个hack，我这里给出一个基本例子的代码，大家可以先测试一下，然后举一反三：

<a href="http://ggpi.blogspot.com" rel="balloon1">GG派</a>，<a href="http://ggpi.blogspot.com" rel="balloon2">http://ggpi.blogspot.com</a>


<div id="balloon1" class="balloonstyle" style='width: 260px;'>
<a href="http://ggpi.blogspot.com/"><img style="float: right; margin-left: 5px; border:0px solid black" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-kCJ495xuBp8QdEf8YPJwH4035zQr5dgS35MsEKyALcnTXo6mvYx6xK0GXHqfIS5XPtXw5tSpKAzs2V3SdPGRKwzNIsvCU8cnFivWxZJ_bBTIyh1tdHsaNNAhBcl1wHFAMaq5B-oIcQ/s320/2063.png"/></a>欢迎光临GG派!最新的blogger hack讲解！
</div>

<div id="balloon2" style="width: 350px; background-color: lightyellow" class="balloonstyle">
欢迎光临GG派!最新的blogger hack讲解！点击此处访问：）.
</div>


很简单吧，另外说一下，上面的 div id="balloon2"的这个代码是控制每个跳出框配对的，理论上是不允许重复的，否则就是第一个被读的代码作为默认的balloon2号跳出框，不过既然用这个hack，有时可以在帖子里注释我们的文章链接，那么这个号码文章多了，不是要朝9999以上发展！？ 当然不必这样，你只需要确定单一html页，文章页，标签页，首页之间的1、2、3、4号码不重复即可。所以可以给所有会在每个页面都出现的页面元素独立的编号，如a1、a2、a3等，而文章页帖子里的编号就用1、2、3、4、5，到99轮换一次之类，基本上应该不会出现重复了。或者b1、b2之类~~~

希望大家喜欢：）