泪划痕
Best viewed in Google Chrome

2011年5月29日星期日

隐藏聊天室方法 (给yikmei

早上11点,这是预计时间自动发布的,现在的我可能还在梦乡中……=_=||
给yikmei的教程 =D

就是将聊天室隐藏在旁边,按了click图片就会弹出聊天室来……



信息中心 - 设计 - 添加小工具 - HTML/JAVASCRIPT

copy以下的代码粘帖到HTML/JAVASCRIPT

<style type="text/css">

#gb{
position:fixed;
top:150px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:600px;
width:319px;
float:left;
cursor:pointer;
background:url('http://3.bp.blogspot.com/-Abrs6kM3ZRA/TeFEiWr8wBI/AAAAAAAAAEs/fT4rwa5RHW8/s1600/458.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:0px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 150-w) : moveGB(170-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">

你的CBOX聊天室 / SHOUTMIX聊天室代码CODE

<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 = (90-gb.offsetWidth).toString() + "px";
</script>


蓝色字体那里是《Click》的图片网址哦……如果你不喜欢的话可以自行修改……
红色字体就是你的Cbox代码 =)

Cbox代码如下图……
拿Cbox代码只需要到设计那里copy隐藏聊天室的代码哦=)再粘帖到红色字体部分

《Click》图片网址
http://2.bp.blogspot.com/-aZ-aLUqHtoY/TeFKsNm2LLI/AAAAAAAAAFI/jLAukxRiZ5s/s320/%253B%253B%253B%253B%253B%253B%253B.png
这是另作的-0- 要的话copy替换蓝色字体部分那里

70 道泪痕:

Katherine 说...

可不可以教我怎麽把页面背景弄成图片么?

ßοωιε﹏Vγεε 说...

有更多选择么? :)

独泪 说...

Katherine
你是说像我那种(关于我)(教程列表的)等的页面吗?
(我想问清楚点=D呵呵)

ßοωιε﹏Vγεε
你是说Click图片吗?好的,我会做更多出来X)
做好了我发布出来后再去通知你X)

XiaoMui ♥ 说...

我想问,要怎么改那个图片离聊天室的距离,我的差距好大
还有怎么改掉聊天室外面你给的border的高度?

J ying ♥ 说...

我做不到的><

J ying ♥ 说...

我已经照你的方式放上去了可是没有东西的
erm..
请问下哦~
你附带的那个chatbox的code有关系到的么?
我只是把你给的那个代码copy去html罢了噢
还有噢~
我的是新模板的
弄得到么?

独泪 说...

XiaoMui
CTRL+F 在那个代码里面找Border 2px 那个
数目越大,border厚度越厚 =)

J ying
paste去HTML后,在红色字体那里放上你的Cbox代码 =)
这样才会显示……

HuiYee Teoh 说...

我的图片与cbox的距离好大哦,怎样改呢?

独泪 说...

paste了隐藏聊天室的代码后,CTRL+F找里面的“ 319 ”
调小那个数字就可以了 =)
(哈哈,很马虎的解释,不懂明白吗xD 不明白可以再问 =DD

+❤永爱❤+ 说...
此评论已被作者删除。
''[BY_NicKy((Li3G]'' 说...

有更多Click图片吗?^^

独泪 说...

http://dulei-mylife.blogspot.com/2011/05/clickcomment-here-v-himiko.html

在这里有更多哦 ^^

尐媚 说...

请问..可以帮我弄那个轻音少女的图片酱的吗?但我要的是会长是女仆大人 可以吗?^.<

кυ вιι 说...

聊天室外的那个灰白色的框框可以彻底弄掉嚒?

独泪 说...

尐媚
可以用美图秀秀制作哦,我是用那个的 xD
我也很爱会长是女仆大人~

找 border:2px solid #666666;
删掉它 =)

кυ вιι 说...

删了、可是还在 @@

独泪 说...

@@,
可是我看到你成功了,没有黑色框框了地说@@

кυ вιι 说...

真的?我看不到 @@
改天去朋友家看看
谢谢你吖 :)

独泪 说...

кυ вιι
@@是吗@@
哦,你在你朋友家上网吗@.@?

Vxing 说...

爲什麽我的會跑出來的?

独泪 说...

可以调的哦
CTRL+F找 gb.style.right = (90-gb
调小90那个 =D

紫柔 ♥ 说...

淚姐姐 ~~ 我的chatbox按出來後只看得到message 、發表message的那部分完全看不到 =3=

Vxing 说...

有了 :D 謝謝你!!! XD

Vxing 说...

但是 爲什麽我Click出來了、Click回去的時候 會卡著一半進不回去到晚

Vxing 说...

請問你都是在那裡設計有些圖片、很可愛

独泪 说...

也是要更改代码的
CTRL+F找 B(0, 150-w) : moveGB(170-w, 0)
调小更改150或者170号码 =)

独泪 说...

紫柔 ♥
看到你已经成功解决问题了 =)

shilim ♥ 说...

抱走你的教程和click图案了哦~
谢谢你丫 ^^ 帮我省了很多空间 ><

独泪 说...

不客气地说 ^^

BoBo Michelle 说...
此评论已被作者删除。
BoBo Michelle 说...

请问下
为什么我的 click here 和cbox 相差酱远的 ?

独泪 说...

更改
width:319px;
这里的数字

Jasmine THX 说...
此评论已被作者删除。
Jasmine THX 说...

谢楼主的分享~弄好了~不过我的留言版貌似有点偏低可以调吗?

独泪 说...

在 聊天室那里的代码 CTRL+F找 background: url
background: url 前面会有 height:...px;
调大 height 那里的数字 :)

布丁 .Pɛɢɢʏ ♥ 说...

独泪、

可以给我选 Cbox 的网址吗 ? :)

我没有 Cbox ><

独泪 说...

当然可以 :)
这是shoutmix 的,容易注册也容易用 =)
http://www.shoutmix.com/main/create.php

这是cbox的,也是我现在用的,可以看看我现在 cbox的 例子
http://cbox.ws/getone.php

=)

布丁 .Pɛɢɢʏ ♥ 说...

谢噜 =)

αн ϰιи 说...

我做不到的??

BoBo Michelle 说...

为什么只看到 Click图 一半罢了的??
帮忙我看看能吗^^?

http://bobo-michelle.blogspot.com

要按1次进出 才可以完完整整 在外面的 >< ?

мs.muii 筱妹 说...

为什么我的CLICK 图只有一半=(

独泪 说...

布丁 .Pɛɢɢʏ ♥
不客气^^

αн ϰιи
少了步骤么,详细说明问题方便替你解决

BoBo Michelle
可以调的
CTRL+F找 gb.style.right = (90-gb
调大90那个

樱桃♥ 芷环♥ 说...

可以把Chatbox 放在左边吗?

BoBo Michelle 说...

弄到了 :D 谢谢你 ^^!

独泪 说...

樱桃♥ 芷环♥
能 CTRL+F 找 right

把里面的right 都换取 left

BoBo Michelle
不客气,恭喜成功 ^^

Xllao Jun 说...

请问下想把它缩小,好大个
做么一直跑出来><

独泪 说...

嗯,你想要缩小什么地说 @@? 那个框框么

Xllao Jun 说...

不是那个框框,click 出来的时候
那个chatbox很大个,可以缩小的吗?

♥蕙♥ 说...

拿走了~谢谢

筱丑=]❤閑 说...

打扰一下~要把聊天那个外面的框框弄掉、
border:2px solid #666666;
background:#F5F5F5;《《删掉就可以了^^

敏♥ 说...
此评论已被作者删除。
敏♥ 说...

可以了~谢谢吖~^^

梦想奇迹 说...

代码不正确,我这里显示不出来……
只出现代码的字,还有Cbox而已(并没有影藏起来)

是因为什么原因呢?

∵靖Γινε∵ 说...

我不会0.0

夏郡 说...

绑架走咯~

Wendy Chew 说...
此评论已被作者删除。
loving joey 说...
此评论已被作者删除。
iм.Mei Jing ジ 说...

我弄不到 ,,

♥ 心仪 说...

怎样把它弄去左边?

♥ 心仪 说...

怎样把它弄去左边?

ʷᴱᶰ ټ ᵞᴱᴱ 说...

thx =')

jiamin 说...

我弄不到 :(
弄出来的结果是变了FOLLOWERS -.-

坏蛋萱♥ 说...

我做不到的 /__\

YεзΗυeγ 说...

謝謝

Arh Miilk 说...

没有东西出现 :'(

我就是我 獨一無二的我 说...

我的不会动?

winona ennie 说...

请问一下哦~怎样把图片的背景放在cbox?<3

晴。天。 说...

终于成功了,谢啦!

茗怡 说...

成功了!谢谢:D

珞希 说...

你好 带走了谢谢:)

发表评论