>>>DEMO在这里<<<
Shout Box 教程
Dashboard控制台>Design模板>Edit Layout编辑模板>Add Gadget>HTML/Java Script
把下面的code放进HTML/Java Script
#hitsukeFX{ position:fixed; top:80px; z-index:+1000; } * html
#hitsukeFX{position:relative;} .hitsukeFXtab{ height:125px; width:40px; float:left; cursor:pointer; background:url('http://url.gif') no-repeat; }
.hitsukeFXcontent{ float:left; border:2px solid #d9e3ff; background:#ffffff; padding:10px; } </style>
<script type="text/javascript">
function showHidehitsukeFX(){ var hitsukeFX = document.getElementById("hitsukeFX");
var w = hitsukeFX.offsetWidth; hitsukeFX.opened ? movehitsukeFX(0, 40-w) : movehitsukeFX(40-w, 0);
hitsukeFX.opened = !hitsukeFX.opened; } function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX");
var dx = Math.abs(x0-xf) > 10 ? 8 : 1; var dir = xf>x0 ? 8 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} }
</script>
<div id="hitsukeFX">
<div class="hitsukeFXtab" onclick="showHidehitsukeFX()"></div>
<div class="hitsukeFXcontent">
Leave Some Messages Here!<br /><br />
<iframe title="721" src="http://shoutmix.com/" width="200" height="400" frameborder="0" scrolling="auto">
<a href="http://shoutmix.com/">View shoutbox</a><br /><div style="text-align:right"><br />
</div></iframe>
<a href="javascript:showHidehitsukeFX()"><br /> [close] </a>
</div>
</div>
<script type="text/javascript">
var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px";
</script>
然后,按Ctrl+F
找
#hitsukeFX{position:relative;} .hitsukeFXtab{ height:125px; width:40px; float:left; cursor:pointer; background:url('http://url.gif') no-repeat; }把 http://url.gif 换去你的图片link。
height和width的意思是图片的高度和宽度。
这是依照你自己的照片高度和宽度。
我这里有些例子。
下面已经写了高度和宽度了
根据照片的高度和宽度改,
不要随便改,改错了
就看不到图片了。
图片height: 80px
图片width: 40px
图Link :http://img709.imageshack.us/img709/3490/capture1241.gif
图片height: 70px
图片width: 40px
图Link :http://img819.imageshack.us/img819/1935/capture124.jpg
图片height: 108px
图片width: 56px
图Link :http://img196.imageshack.us/img196/2081/banner2gif.gif
图片height: 112px
图片width: 58px
图Link : http://img521.imageshack.us/img521/5003/banner1gif.gif
图片height: 110px
图片width: 60px
图Link : http://img8.imageshack.us/img8/6226/bannergifb.gif
如果要的,拿去用吧~
不用跟我讲的=]
OK,回到主题。
然后,按Ctrl+F
把这整段该去shoubox给你的code。
这里的height和width是指shoutbox的高度和宽度,不要和上面的混乱。
shoutbox的height和width是根据你喜好更改的,
你喜欢它多宽就多宽,你喜欢它多高就多高。
**注意:只是从 “iframe title” 到 “/iframe” 而已,不要搞错。只要这段而已。
然后找这段。
Leave Some Messages Here!把 “Leave Some Messages Here!” 改去你喜欢的欢迎词,不改也行。
然后再找这段。
[close]把 “[close]” 随你喜好而改,加些可爱符号也行,不改也行。
Google搜索 - 特殊符号
随后好了,
按Save保存
这个教程暂时只是给Shoutbox用的。
我之前试过用在Cbox上,
可是失败了。
等我有时间在研究看看,
可不可以用在Cbox。
呃,还有谁不明白的告诉我。
因为最近收到妹妹投诉,
说看不明白我写些什么。
所以不明白的告诉我,
不然我每次在这里傻傻地更新,
就不好了。
=end=
Easy???
^^