公告:
最近有些帖子的评论,我没去回复。对此,我感到非常抱歉。
最近课业很多,加上开电脑都是先上Facebook和打理网店,已经没有足够的时间让我去写教程。
在未来,我有时间的话,我会再写多些教程。

Saturday, November 20, 2010

Shout Box 教程

『ONLY FOR SHOUTBOX』

>>>DEMO在这里<<<

Shout Box 教程
Dashboard控制台>Design模板>Edit Layout编辑模板>Add Gadget>HTML/Java Script

把下面的code放进HTML/Java Script

<style type="text/css">
#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???
^^

22 comments:

  1. ChatBox的其中一种。
    大部分的Blogger都是在用Cbox和Shoutmix(shoutbox)

    而这教程是给shoutbox用的。

    ReplyDelete
  2. 哦哦,明白了,谢谢讲解 …………^^

    ReplyDelete
  3. ermm..第二次用ctrl+F search的那段字根本search不到阿
    那段字跟你在最上面给的那个html code里面的字不大一样也
    我用大概一样的那段去改 可是不行哦
    是什么问题呢? ><

    ReplyDelete
  4. 对不起,是我写错了。
    谢谢告诉我!
    我再重新Check过了。
    已经改了,现在在试试看吧~
    如果还是不行的话,
    再告诉我哦~
    啊!对了,
    我再加了些东西,你可以去看看^^

    ReplyDelete
  5. 还是不可以也
    不知道为什么 那个东西就是不会在旁边
    图片也没有出来 T.T
    会不会是有些模板的不能用? ><

    ReplyDelete
  6. yalor yalor...i oso cannot make it leh...please help us leh...

    ReplyDelete
  7. 我已经重新Check了,也改了。
    还有任何问题的,
    再告诉我哦~

    ReplyDelete
  8. Yeah XD
    我成功了 ! ^^
    谢谢你呀 =]
    你的教程写得很好呢 =D

    ReplyDelete
  9. 谢谢!
    要不是你一直告诉我弄不到,
    我也不回去改。
    =]

    ReplyDelete
  10. 如果我已經有了shout box,怎樣copy那code呢?=(

    麻煩幫我看看下我的部落格:
    http://michi-barbie-eye.blogspot.com

    謝謝=)

    ReplyDelete
  11. 你的code应该有些错了。
    像你用这张图片
    图片height: 108px
    图片width: 56px
    图Link :http://img196.imageshack.us/img196
    /2081/banner2gif.gif
    你应该把图片的高度和宽度改成上面的。

    还有iframe那里,也要改。
    改去你shoubox的code。
    上面已经写教程了。=]
    可以去看看怎么改哦~

    ReplyDelete
  12. 謝謝你,我遲早都需要的:)

    ReplyDelete
  13. 我找不到怎么换颜色 . ><

    ReplyDelete
  14. Ling,你要换什么颜色哦?

    ReplyDelete
  15. 你login shoutbox后,去找Display。
    然后在Style & Color 那边换颜色。=)

    ReplyDelete
  16. 有些遊覽器看不到這聊天室的圖片的~ >< ~所以我都換回普通了的~

    ReplyDelete
  17. This comment has been removed by the author.

    ReplyDelete
  18. 哎哟,,,还是失败啊!=(

    ReplyDelete