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

Wednesday, September 8, 2010

朋友,暂时不更新。

对不起。
我已经很久没更新了。
说真的,一篇HTML教学真的不容易写。
况且,我要准备即将来临的PMR。
我的责任重大。
所以暂时不更新。

考完PMR,我再回来更新。
再见。我会准时回来的。

Saturday, July 31, 2010

替你的部落格换字体

想替你的部落格换字体?
不需要下载字体^^

CatholicSchoolGirls BB

Cute Text

Curlz MT
Cute Text

Bradley Hand ITC
Cute Text

Agent Orange
Cute Text

很好看,对吧?
可是要怎样放进去部落格里???

这里有两个方法:
Method 1:
(有些麻烦)
加以下code帖子里



把your font该去你要的font
参考网站: http://www.dafont.com/

Method 2:
(简单又方便)
Dashboard控制台>Design模板>Edit HTML编辑模板

按Ctrl+F找这个


Georgia, Serif
Trebuchet, Trebuchet MS, Arial, sans-serif

把这些换去你要的字体

例子;



然后按Save完成

=end=
Easy???
^^

Sunday, June 20, 2010

Back To Top教程

Back To Top教程







Dashboard控制台>Design模板>Add a Gadget添加>HTML/Javascript第三方

加以下code









怎样看到 ♡ You Click, I Fly ♡

title="Fly To Top"

你可以随便改,可以改成其他的
如果不要,那么就删掉从title到"





http://img687.imageshack.us/img687/7435/564.jpg







http://img249.imageshack.us/img249/7289/465f.jpg








http://img541.imageshack.us/img541/7817/topfi.gif








http://img704.imageshack.us/img704/6996/top3.gif








http://img704.imageshack.us/img704/9735/top1s.gif

Thursday, June 10, 2010

Css Selection (highlight colour)

Css Selection
highlight颜色教程

首先到Edit Html
把以下code放入的前面

::selection {
background:#FFA8A8;
color:#FFFFFF;
}
::-moz-selection{
background:#FFA8A8;
color:#FFFFFF;
}
code::selection {
background: #FFD5D5;
color:#FFA8A8;
}
code::-moz-selection {
background: #FFD5D5;
color:#FFA8A8;
}



::selection {
background:#FFA8A8;
color:#FFFFFF;
}

::-moz-selection{
background:#FFA8A8;
color:#FFFFFF;
}

background是背景颜色
color是字的颜色
selection & moz selection 的 background和color要一样
参考颜色值地址
http://html-color-codes.info/

code::selection {
background: #FFD5D5;
color:#FFA8A8;
}

code::-moz-selection {
background: #FFD5D5;
color:#FFA8A8;
}

跟上面一样
background是背景颜色
color是字的颜色
code selection & code moz selection 的 background和color要一样
给你们看看Demo
Demo>>>
highlight以下的字

This is my blog.

很特别对吧!

“This is my”是属于
::selection {
background:#FFA8A8;
color:#FFFFFF;
}

::-moz-selection{
background:#FFA8A8;
color:#FFFFFF;
}

“blog”是属于
code::selection {
background: #FFD5D5;
color:#FFA8A8;
}
code::-moz-selection {
background: #FFD5D5;
color:#FFA8A8;
}

要改变highlight颜色一定要加些code 例子:


要记得
:selection { 和 code::selection {
的颜色值是不一样的,才可以呈现

这个Css Selection
在Firfox 3.5、Opera 9.64、Chrome 3、Safari 4上测试有效,IE下无效。

=end=
Easy???
^^

Sunday, May 2, 2010

Sparkling cursor (鼠标特效)

上次,我教了cursor教程
这次我就教鼠标特效

鼠标特效:







这是我部落格的
↓↓↓          ↓↓↓          ↓↓↓















Demo



将以上的code放入你的部落格



把颜色值换掉
Example :白色背景的话就换去(#000000『黑色』)
Example 2 : 黑色背景的话就换去(#FFFFFF『白色』)

下面是颜色值的参考网页
去找你适合的颜色值吧!
http://www.computerhope.com/htmcolor.htm

=end=
Easy???
^^