隐藏版Chat Box
7.31.2011, 7/31/2011 - Permalink | 0 Comments
什么是隐藏版Chat Box?
就是我的blog 旁边可以Chat 的那个Chat Box
怎样弄?
很简单
1.copy 了Code, 就去设计-->页面元素-->添加小工具-->HTML/Java Script
把刚才copy的代码paste出来
copy this code:
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSEhOrkojLXOJH2SdUn46hHFh7BgALaJIwzd0VBcZ987obeA1Og8L9utwWnBqA5qI9gfYHxfzTEYtloAQZQxj_lfgCzWiNtHghw-VNIHYDhotqXNrtVckmSyu-X_cx1gLRoQ7nhmIytFSF/s320/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
放你们的chat box代码在此
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
红色的,要改...
怎样改?
就是copy 你的Chat Box Code
然后放进去.
保存即可.
是不很简单?
如果不喜欢这个'click me' 的图案,
请看:
Code:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxN7ABW_rpWxCsPP6snrxr6vIa8gvrRJoJZ31ltaD56bgsM9xy4W_ZUj9WXBZgrO7RRbmsvjSsXivFC1ZBb04BYz5vOD0zBznIZNrWLd_-LeaH3Z-K3SBXyyqo4ZL3vVDrs6DaN2smEgo/s1600/click+me+2.png
以上,纯属转载(图片)
还有1个问题.
怎样换图片?
请看:
1.去code 那里,找 .gbtab{
你会找到
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSEhOrkojLXOJH2SdUn46hHFh7BgALaJIwzd0VBcZ987obeA1Og8L9utwWnBqA5qI9gfYHxfzTEYtloAQZQxj_lfgCzWiNtHghw-VNIHYDhotqXNrtVckmSyu-X_cx1gLRoQ7nhmIytFSF/s320/tabs.png') no-repeat;
}
请改:
浅蓝是高度。
蓝色是宽度。
粉色是图片网址。好咧,
隐藏版Chat Box
告一段拉___
是不很简单?
不明请留言在Chat Box ...或者
在这里留言,再去Chat Box 通知我哦!博主最后再碎碎念下
记得留言+关注+赞下Facebook Like.
标签: 博客教学