公告:
最近有些帖子的评论,我没去回复。对此,我感到非常抱歉。
最近课业很多,加上开电脑都是先上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???
^^

I'm Back !!!

我回来了!

最近要打理网店,
还有其他琐碎的事情。
所以真的很抱歉
一直没更新。

预告:
下一篇教程:Shoutbox教程
这个之前很多人在问我怎么弄得。
先看看Demo吧~
http://shopper-fashion.blogspot.com/

看旁边的shoutbox...
看不到的留言。
=]