2007年1月27日星期六

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="http://2.bp.blogspot.com/_9Utt_HMuw_4/Ra3eM_jXPzI/AAAAAAAADd8/sch5s0BJ_2U/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之类~~~

希望大家喜欢:)

6 评论:

发表评论: ☆欢迎灌水☆言论自由☆交流快乐☆