Reset

在ZK中使用CSS樣式表

2009-08-31T19:06:00.012+08:00

若要在 ZK 的 zul 檔案格式中使用 CSS 樣式表
不能使用 XHTML 的
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
與
<?xml-stylesheet href="mystyle.css" type="text/css"?>
必須使用 ZK 自己所定義的標籤
請參見
ZK - Customizing Look and Feel, Part I - CSS - Documentation

說明
<style src="欲引入的 css 檔案.css"/>

範例
<zk>
<style src="Reset.css"/>
</zk>

CSS圖片群組

2009-07-17T16:28:00.013+08:00

CSS Sprites 是 2005 年就提出來的優秀技術
把眾多小圖片變成一整張圖片
再用 CSS 來控制顯示範圍
可減少 HTTP 圖片請求數
整張圖片檔案大小也比總合圖片來得小
在檔案管理上也比較方便
請參見
A List Apart: Articles: CSS Sprites: Image Slicing’s Kiss of Death

<!--

背景 CSS 圖片群組

在之前的 CSS 滑鼠換圖有應用過
-->

Jennifer Semtner.com :: Web Designer / Developer » Blog Archive » Extending CSS Spriting

<!--

前景 CSS 圖片群組

由於列印背景圖片需要在使用者端做設定
否則無法列印出來
如果考慮到列印問題
改用前景 CSS 圖片群組是比較理想的方式
-->

<!--
前景 CSS 圖片群組比較麻煩的地方在於 clip: rect 的計算

說明
.img_clip{ position: absolute; clip: rect(上右下左); }

範例
.img_clip{ position: absolute; clip: rect(20px 68px 52px 35px); }

不過對照圖片之後便一目瞭然
　
-->

讓網站的SEO結構更加良好

2009-07-05T16:56:00.025+08:00

使用 Canonical Link Element 可讓網站的 SEO 結構更加良好
請參見
Learn about the Canonical Link Element in 5 minutes
關於 rel="canonical" - 網站管理員 / 網站擁有者說明

<!--

Canonical Tag：集中你的SEO戰力

說明
<link rel="canonical" href="網頁的網址"/>

範例
<link rel="canonical" href="http://www.reset-info.com/2009/07/limkis.html"/>

提供各個分類的訂閱

2009-06-24T21:42:00.006+08:00

有時候部落格的文章主題可能是分散又毫無相關的
雖然可以用標籤當作文章分類讓瀏覽者自由選擇
但由於訂閱者是訂閱整個網站的文章
因此仍不可避免地會讀到沒興趣的文章
此時可以提供各個分類的訂閱
讓訂閱者也能自由選擇

1.勾選展開小裝置範本

2.找到 (<data:label.count/>)
　在其後方加上

<a expr:href='"/feeds/posts/default/-/" + data:label.name'>連結文字或圖片</a>

<!--
基本上用相對網址的方式就可以了
當然也可以用絕對網址的方式

<a expr:href='"部落格網址/feeds/posts/default/-/" + data:label.name'>連結文字或圖片</a>

-->

IE中
換行顯示有問題

2009-03-20T06:07:00.012+08:00

發現文章的 <br /> 換行在 IE 中顯示不正確
必須要兩個 <br /> 才能顯示出自己所需要的斷行形式
而在火狐中的顯示則是正確的
最後找到這個錯誤是因為定義了 letter-spacing 產生的
letter-spacing 可以細微調整字元與字元之間的距離
所以第一個 <br /> 可能被 IE 加上了 letter-spacing
以致於判斷成是一個字元
故而沒有換行
到了第二個 <br /> 才開始真正的換行
解決方式就是把 <br /> 的 letter-spacing 恢復成預設值就好

.post br {
letter-spacing:normal;
}

<!--
.post 是本 blog 的內文範圍的 CSS 樣式名稱
限制在內文部分是因為我在其他地方也有使用到 <br />
避免發生不必要的錯誤又要多作修正的緣故
如果也有相同考量的人
請修改內文範圍的的 CSS 樣式名稱即可
沒有這種考量的人可以直接寫成

br {
letter-spacing:normal;
}

-->

CSS的id跟class

2009-03-15T12:10:00.032+08:00

#id

id 是不可重複的
在 CSS 中用 # 表示
優先權比 class 大

.class

class 是可重複的
在 CSS 中用 . 表示
優先權比 id 小
可多重使用

多重使用的範例
<div class="ResetClassA ResetClassB">生まれ変わろうよ人生を初期化(りせっと)しよう</div>

CSS的優先順序

2009-03-15T12:04:00.024+08:00

CSS 優先權有一個固定的計算法
網路上有許多教學文章
但我覺得這個計算法有點太複雜
而且其實可以不用理會
因為優先權的邏輯性很簡單
就是指定的層級越高或是越清楚越優先

<!--
舉個例子
詳解CSS的優先權 - 網頁製作 - 藍色理想所提到的

html > body table tr[id=」totals」] td ul > li {color: maroon;}
/* 7個普通元素、一個屬性選擇符、兩個其他選擇符，結果是0,0,1,7 */
li#answer {color: navy;}
/* 一個ID選擇符，一個普通選擇符，結果是0,1,0,1 */
——後者勝出

li#answer 可以看成是直接指定某個 id
只是這個 id 在 li 這個元素中
雖然一堆子選擇符寫得很清楚
但直接指定 id 的層級比較高
當然會比較優先
根本就不需要去計算
-->

以下為 CSS 優先權的幾個簡單要點說明

頁面設定為優先

直接設置在元素內的樣式為最優先
<div class="ResetCssTest" style="width:300px;height:40px;background:#645930;">生まれ変わろうよ人生を初期化(りせっと)しよう</div>

設置在頁面內的 CSS 為第二優先
<style type="text/css">
.ResetCssTest {
width:200px;
height:20px;
background:#645930;
}
</style>

外部載入為次

在頁面內以 @import 方式載入
<style type="text/css">
@import url("ResetCssTest.css");
</style>

在頁面內以 link 方式載入
<link type='text/css' rel='stylesheet' href='ResetCssTest.css' />

最後設定的樣式將蓋過之前設定的樣式

<style type="text/css">
.ResetCssTest {
width:300px;
height:40px;
background:#ffffcc;
width:200px;
height:20px;
background:#645930;
}
</style>

!important 為最高優先

!important 的作用為強制提高優先權
照理說越後面設定的越優先
但這個範例使用了 !important
使得最前面的設定變成了最優先
用了這個的 CSS 樣式等於無敵狀態
除非遇到另一個 CSS 樣式也使用了 !important
這時就按照上面所提到的優先權邏輯再重新比較一次

<style type="text/css">
.ResetCssTest {
width:300px!important;
height:40px!important;
background:#ffffcc!important;
width:200px;
height:20px;
background:#645930;
}
</style>

id 大於 class

由於 id 具有不可重複性
而 class 則是可重複的
故 id 層級上大於 class
若一個元素同時有 id 跟 class 兩種屬性
且樣式有所衝突時
id 優先權大於 class

<style type="text/css">
#ResetCssTestID {
width:200px;
height:20px;
background:#645930;
}
.ResetCssTestClass {
width:300px;
height:40px;
background:#ffffcc;
}
</style>

<div id="ResetCssTestID" class="ResetCssTestClass">生まれ変わろうよ人生を初期化(りせっと)しよう</div>

jQuery Smart Tooltips

2009-02-22T11:18:00.018+08:00

jQuery Smart Tooltips - Part 1
jQuery Smart Tooltips - Part 2
以 jQuery 為核心的工具提示功能
檔案小
使用方式也簡單
只要在連結中加入 title 屬性即可

套用到 HTML 與 Blogger
(方法一樣不需做個別調整)
1.請先下載 jquery.smart-tooltips 檔案
　由於是以 jQuery 為核心
　所以同時也要記得引用 jQuery
　目前最新的版本是 jQuery1.3.2
　不過在此我使用的版本是 jQuery1.2.6
　然後在 <head> 跟 </head> 裡插入以下程式碼
　( Blogger 則是找到 </b:skin> 跟 </head> )

<script type="text/javascript" src="上傳到網路空間的jquery-1.2.6.pack.js" ></script>
<script type="text/javascript" src="上傳到網路空間的jquery.small-tooltip.js" ></script>

2.在 <head> 跟 </head> 或是 CSS 樣式檔案中插入以下 CSS 程式碼
　然後修改成自己想要的 CSS 樣式

.tooltip{
position:absolute;
z-index:999;
left:-9999px;
background-color:#dedede;
padding:5px;
border:1px solid #fff;
width:250px;
}

.tooltip p{
margin:0;
padding:0;
color:#fff;
background-color:#222;
padding:2px 7px;
}

3.在連結內加上 title 屬性即可

<a href="連結網址" title="說明文字" ></a>

target="_blank" & target="_new" & rel="external"

2009-02-20T09:58:00.030+08:00

原本想趁著加上 jQuery Smart Tooltips 所需要的 title 屬性時
把文章的 target="_blank" 改成 target="_new"
後來想一想還是決定改成 rel="external" 好了

target="_new" 與 target="_blank"
這兩個一樣是開新視窗
但有著些許的不同
而 rel="external" 則沒有任何作用
以下是簡略的說明

target="_blank"

在開啟新視窗的同時不會賦予名稱
按下多個 target="_blank" 連結時
也將打開多個新視窗

target="_new"

在開啟新視窗的同時則會賦予一個名稱("_new")
所以按下多個 target="_new" 連結時
依舊會在同一個新視窗

rel="external"

只是表示連結是一個不屬於自身網站的外部連結而已
但也有的人利用 JavaScript 與這個屬性
達成開啟新視窗以通過 W3C 的檢驗
請參考網路上關於 rel="external" 開新視窗的教學

FeedBurner引起Google Webmasters Sitemap錯誤

2009-01-26T12:06:00.008+08:00

用了 FeedBurner 自訂訂閱網址之後
在 Google Webmasters 發現 Sitemap 出現錯誤
找到了一個解決方法
FeedBurner搞鬼？解決Blogger提交Sitemap之錯誤 | Wraecca

說明
http://網址/atom.xml?redirect=false

範例
http://www.reset-info.com/atom.xml?redirect=false

SQL查詢特別字

2008-12-14T12:27:00.011+08:00

詳細說明請參見
在 SQL Server 中處理 Unicode 字串常數時，必需為所有的 Unicode 字串加上前置詞 N

說明
select 欄位 from 資料表 where 篩選欄位 = N'篩選條件'

範例
select artist from reset where artist = N'野田凪'

文字輸入框內的提示文字

2008-09-28T09:08:00.014+08:00

在 The Art of Daniel Merriam
看到一個實用的技巧
就是在搜尋框的地方有個提示文字
要輸入時便會自動消失
看了原始碼之後
發現並不難

說明
<input type="text" name="文字框名稱" size="長度" onfocus="if (this.value=='消去提示文字') this.value='';" onblur="if (this.value=='') this.value='如果輸入框無文字則復原提示文字';" value="提示文字" />

範例

<input type="text" name="Reset" size="25" onfocus="if (this.value=='請輸入關鍵字') this.value='';" onblur="if (this.value=='') this.value='請輸入關鍵字';" value="請輸入關鍵字" />

修正PNG背景圖片在IE的錯誤顯示

2008-09-10T06:30:00.047+08:00

上一篇修正 PNG 圖片在 IE 的錯誤顯示中
所提到的 pngfix
雖然可以修正 PNG 格式的圖片
但是並不支援 PNG 格式的背景圖片
以下有幾種方法
可以修正 IE 中 PNG 背景圖片的錯誤顯示

CSS 濾鏡

在欲修正的元素或樣式中
(#ID 或 .Class )
加入 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='圖片.png', sizingMethod='scale');

說明
欲修正的元素或樣式 {
width:寬度px;
height:高度px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='圖片.png', sizingMethod='scale');
}

範例
#ResetIEpng {
width:120px;
height:50px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='
http://www.reset-info.com/reset.png', sizingMethod='scale');
}

Sleight of hand
請先下載 bgsleight
然後在 <head> 跟 </head> 之間
( Blogger 則是找到 </b:skin> 跟 </head> )
貼入下列程式碼

HTML

Blogger

IE PNG Fix v1.0 / 2.0 Alpha 3
請先下載 iepngfix
基本上只會用到 iepngfix.htc 以及 blank.gif
然後在欲修正的元素或樣式中
(#ID 或 .Class )
加入 behavior: url(上傳到網路空間的iepngfix.htc)

說明
欲修正的元素或樣式 {
behavior: url(上傳到網路空間的iepngfix.htc)
}

範例
#ResetIEpng {
behavior: url(http://www.reset-info.com/iepngfix.htc)
}

完全不要用 PNG 圖片

修正PNG圖片在IE的錯誤顯示

2008-08-26T21:41:00.013+08:00

使用 JavaScript 修正透明 png 圖片在 IE 中的錯誤顯示
使其可在 IE 瀏覽器底下正常顯示的簡單方法
請下載 pngfix 並上傳至網路空間
然後在 <head> 跟 </head> 之間
貼入下列程式碼

Page Lab : PNG test

<!--
2009/6/14 更新
使用以下語法
便可直接套用在 Blogger 範本中

-->

Blogger自訂域名引起Picasa圖片連結錯誤

2008-08-22T23:50:00.033+08:00

買了一個網址 reset-info.com
沒想到竟然出現了一個始料未及的錯誤
那就是找不到 Picasa 網路相簿的連結圖片
但輸入圖片的網址卻可以正常瀏覽
使用 Blogger 提供的 blog-reset.blogspot.com 觀看也沒問題...
完全不知道到底是怎麼一回事

後來試著改變圖片大小
發現圖片的數值只要超過 800px 以上就不能正常顯示
就算原始圖片超過 800px 也一樣
譬如說

<img src="http://reset-info.com/s1600/Reset.jpg" />

只要改成

<img src="http://reset-info.com/s800/Reset.jpg" />

便可正常顯示了

聽不懂人話的IE要用HACK

2008-08-18T22:53:00.017+08:00

有許多的網頁設計師不建議使用 IE HACK
因為這並不符合標準
而且在檔案的管理上也會造成不便

將鬼話IE HACK * 跟 # 還有 _ 直接寫在 CSS 樣式檔中

說明
元素或樣式 {
color:#645930;
*color:#F6F6F6; *為所有的 IE
color:#F6F6F6\9; \9為 IE8
#color:#D3B95E; #為 IE7
_color:#999999; _為 IE6
}

範例
#Reset {
color:#645930;
*color:#F6F6F6;
color:#F6F6F6\9;
#color:#D3B95E;
_color:#999999;
}

將鬼話IE HACK 寫成獨立的 CSS 樣式檔
檔名為自由命名
重要的只有開頭的 的結尾
若獨立寫成 CSS 樣式檔的話
可以不用在前頭加 * # _

說明

範例

IE6中背景圖片閃爍的問題

2008-05-29T13:26:00.018+08:00

在前一篇有提到如何使用 CSS 滑鼠換圖這個方便的作法
但是在 IE6 瀏覽器下卻會一直閃個不停
這是因為 IE6 並不會對背景圖片作暫存的動作
要終止這種惱人情形
只要使用以下 JavaScript 程式碼即可解決

<script type="text/javascript">
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(e) {}
</script>

CSS滑鼠換圖

2008-04-05T09:54:00.037+08:00

一般的滑鼠換圖做法都是使用 Dreamweaver 內建的 JavaScript 功能
在此只使用簡單的 CSS 就能實現
只要妥善運用 a 的屬性即可

1.插入以下 CSS 程式碼

CSS 程式碼
.mouse_btn {
width: 215px;
height: 90px;
background: url(圖片) no-repeat 0px 0px;
display:block;
}
a.mouse_btn:hover {
background-position: 0px -90px;
}

2.直接引用樣式

HTML 程式碼
<a href="網址" class="mouse_btn"></a>

Page Lab : CSS 滑鼠換圖
下載 CSS 滑鼠換圖範例壓縮檔

jQuery lightBox plugin

2008-04-02T11:50:00.032+08:00

jQuery lightBox plugin
．使用方式簡單
　不用再像 lightbox 一樣要逐個加 rel="lightbox"　
．載入效果更加流暢

1.請至 jQuery lightBox plugin 網站下載檔案後
　上傳到自己的空間

2.然後在 <head> 跟 </head> 裡插入以下程式碼
　( Blogger 則是找到 </b:skin> 跟 </head> )

<script type="text/javascript" src="上傳到自己的空間的jquery.js"></script>
<script type="text/javascript" src="上傳到自己的空間的jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="上傳到自己的空間的jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function() {
// 連結圖片若有加 lightbox 的 rel="lightbox" 便會執行
$('a[@rel*=lightbox]').lightBox();
// 執行區塊 id 為 gallery 的連結圖片
$('#gallery a').lightBox();
// 執行樣式為 lightbox 的超連結
$('a.lightbox').lightBox();
// 執行所有超連結(不建議使用因為 jQuery lightBox plugin 無法顯示網頁)
$('a').lightBox();
});
</script>

3.單張圖片請直接沿用 rel="lightbox"

<a href="大圖片" rel="lightbox"><img src="小圖片" /></a>

多張圖片只要在區塊內直接連結大圖片就可以了
如

<div class="gallery">
<a href="大圖片1"><img src="小圖片1" /></a>
<a href="大圖片2"><img src="小圖片2" /></a>
<a href="大圖片3"><img src="小圖片3" /></a>
</div>

執行的結果請參見 Reset : memo(artist)

<!--
補充說明一
如果不是把整個 jQuery lightBox plugin 檔案按照原先路徑上傳時
jquery.lightbox-0.5.js 的圖片路徑要記得作修改

imageLoading:　'i上傳到自己的空間的lightbox-ico-loading.gif',
imageBtnPrev:　'上傳到自己的空間的lightbox-btn-prev.gif',
imageBtnNext:　'上傳到自己的空間的lightbox-btn-next.gif',
imageBtnClose:　'上傳到自己的空間的lightbox-btn-close.gif',
imageBlank:　'上傳到自己的空間的lightbox-blank.gif',

-->

<!--
補充說明二
原本使用 lightbox rel="lightbox" 語法的人
也不需再做修改
只要有加入上述 JavaScript 的一小段判斷
便可直接使用

// 圖片若有加 lightbox 的 rel="lightbox" 便會執行
$('a[@rel*=lightbox]').lightBox();

-->

<!--
補充說明三
預設為 #gallery
可依需求修改

預設為id　　　　$('#gallery a').lightBox();
改為class　　　 $('.gallery a').lightBox();

-->

Mootools Demos - Tips

2008-01-06T12:05:00.014+08:00

Mootools Demos - Tips
移過圖片與連結浮現提示說明的效果
和ㄧ般的提示說明相比之下精緻許多

．mootools.js 是 Mootools Demos 的必備通用檔案
　請先下載並上傳到自己的空間
．不可同時使用兩種效果
．可重覆使用同一效果

套用到 HTML 與 Blogger
(方法一樣不需做個別調整)
1.下載 mootools.js 後
　上傳到自己的空間
　然後在 <head> 跟 </head> 裡插入以下程式碼
　( Blogger 則是找到 </b:skin> 跟 </head> )

<script type="text/javascript" src="上傳到自己的空間的 mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
/* Tips 1 */
var Tips1 = new Tips($$('.Tips1'));

/* Tips 2 */
var Tips2 = new Tips($$('.Tips2'), {
initialize:function(){
this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
},
onShow: function(toolTip) {
this.fx.start(1);
},
onHide: function(toolTip) {
this.fx.start(0);
}
});

/* Tips 3 */
var Tips3 = new Tips($$('.Tips3'), {
showDelay: 400,
hideDelay: 400,
fixed: true
});

/* Tips 4 */
var Tips4 = new Tips($$('.Tips4'), {
className: 'custom'
});
});
</script>

</b:skin>
套用到 Blogger 的程式碼插入處
</head>

2.請先下載 bubble.png
　上傳到自己的空間之後
　然後在 <head> 跟 </head> 裡插入以下 CSS 程式碼
　若要更改 .tool 樣式的寬度
　必須連同圖片一起修改

<style type="text/css">

</style>

3.選擇所要呈現效果的程式碼
　Tips 1 圖片說明 - 圖片式直接浮現

<img src="圖片網址" alt="替代文字" class="Tips1" title="提示說明標題 :: 提示說明" />

　Tips 2 圖片說明 - 圖片式淡入淡出浮現

<img src="圖片網址" alt="替代文字" class="Tips2" title="提示說明標題 :: 提示說明" />

　Tips 3 連結說明 - 圖片式直接浮現

<a href="連結網址" onclick="return false;" class="Tips3" title="提示說明標題 :: 提示說明">連結名稱</a>

　Tips 4 連結說明 - 色塊式直接浮現

<a href="連結網址" onclick="return false;" class="Tips4" title="提示說明標題 :: 提示說明">連結名稱</a>

Mootools Demos - Tips 在 Blogger 執行的結果請參見 Page Lab : Tips test

<!--
雖然替代文字與提示說明效果相近
但卻是不同的屬性

alt 属性(替代文字)

主要是圖片尚未顯示或是無法顯示時使用的文字替代形式
所以圖片無效時會出現
有的人誤認此屬性為額外說明
所以也將其設置在文字連結上或是當做圖片的補充說明之用
不過除了 IE 瀏覽器和早期的 Netscape 4(windows版本) 之外都不會出現

title 屬性(提示說明)

為圖片或文字連結提供補充說明的訊息
-->

Mootools Demos - Fx.Slide

2008-01-06T11:29:00.015+08:00

Mootools Demos - Fx.Slide
可讓使用者將內容收合起來
有兩種效果
第一種效果 - 直向收合(Fx.Slide Vertical)
第二種效果 - 橫向收合(Fx.Slide Horizontal)

．照著網站所提供的程式碼去做會發現沒辦法順利執行
　那是因為還需要額外呼叫一個 JavaScript 腳本才行
．如果覺得四個選項太多想減少
　請使用 CSS 語法將其隱藏
　若直接拿掉 slideout 跟 slidein 的連結選項便無法正常執行
．同一元素不可同時使用兩種效果
．可重覆使用同一效果(需改寫內嵌的 JavaScript 參數)

套用到 HTML
1.下載 mootools.js 後
　上傳到自己的空間
　然後在 <head> 跟 </head> 裡插入以下程式碼

<script type="text/javascript" src="上傳到自己的空間的mootools.js"></script>
<script type='text/javascript'>
window.addEvent('domready', function(){
//-vertical

var mySlide = new Fx.Slide('test');

$('slidein').addEvent('click', function(e){
e = new Event(e);
mySlide.slideIn();
e.stop();
});

$('slideout').addEvent('click', function(e){
e = new Event(e);
mySlide.slideOut();
e.stop();
});

$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});

$('hide').addEvent('click', function(e){
e = new Event(e);
mySlide.hide();
e.stop();
});

//--horizontal

var mySlide2 = new Fx.Slide('test2', {mode: 'horizontal'});

$('slidein2').addEvent('click', function(e){
e = new Event(e);
mySlide2.slideIn();
e.stop();
});

$('slideout2').addEvent('click', function(e){
e = new Event(e);
mySlide2.slideOut();
e.stop();
});

$('toggle2').addEvent('click', function(e){
e = new Event(e);
mySlide2.toggle();
e.stop();
});

$('hide2').addEvent('click', function(e){
e = new Event(e);
mySlide2.hide();
e.stop();
});
});
</script>

2.在 <head> 跟 </head> 裡插入以下 CSS 程式碼

<style type="text/css">

</style>

3.在 <body> 跟 </body> 裡插入以下 HTML 程式碼

<h3 class="section">Fx.Slide Vertical</h3>

<a id="slideout" href="#">slideout</a> | <a id="slidein" href="#">slidein</a> | <a id="toggle" href="#">toggle</a> | <a id="hide" href="#">hide</a>

<div id="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<h3 class="section">Fx.Slide Horizontal</h3>

<a id="slideout2" href="#">slideout</a> | <a id="slidein2" href="#">slidein</a> | <a id="toggle2" href="#">toggle</a> | <a id="hide2" href="#">hide</a>

<div id="test2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

執行的結果請參見原本的網站 Mootools Demos - Fx.Slide

套用到 Blogger
1.下載 mootools.js 後
　上傳到自己的空間
2.展開小裝置範本
3.找到 </b:skin> 跟 </head> 並在中間插入步驟4的程式碼

</b:skin>
步驟4程式碼插入處
</head>

4.程式碼

<script src='上傳到自己的空間的 mootools.js' type='text/javascript'/>
<script type='text/javascript'>
window.addEvent('domready', function(){
//-vertical

var mySlide = new Fx.Slide('test');

$('slidein').addEvent('click', function(e){
e = new Event(e);
mySlide.slideIn();
e.stop();
});

$('slideout').addEvent('click', function(e){
e = new Event(e);
mySlide.slideOut();
e.stop();
});

$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});

$('hide').addEvent('click', function(e){
e = new Event(e);
mySlide.hide();
e.stop();
});

//--horizontal

var mySlide2 = new Fx.Slide('test2', {mode: 'horizontal'});

$('slidein2').addEvent('click', function(e){
e = new Event(e);
mySlide2.slideIn();
e.stop();
});

$('slideout2').addEvent('click', function(e){
e = new Event(e);
mySlide2.slideOut();
e.stop();
});

$('toggle2').addEvent('click', function(e){
e = new Event(e);
mySlide2.toggle();
e.stop();
});

$('hide2').addEvent('click', function(e){
e = new Event(e);
mySlide2.hide();
e.stop();
});
});
</script>

5.插入以下 CSS 程式碼

#test {
background: #222;
color: #fff;
padding: 10px;
margin: 20px;
border: 10px solid pink;
}

#test2 {
background: #222;
color: #fff;
padding: 10px;
margin: 20px;
border: 10px solid pink;
}

6.選擇要套用的網頁元素
　以標籤元素做範例
　找到 <b:widget id='Label1' locked='false' title='標籤' type='Label'>
　並在 </b:if> 下方插入以下程式碼
　(請任意選擇一個)
　第一種效果 - 直向收合(Fx.Slide Vertical)

<a href='#' id='slideout'>slideout</a> | <a href='#' id='slidein'>slidein</a> | <a href='#' id='toggle'>toggle</a> | <a href='#' id='hide'>hide</a>

　並將<div class='widget-content'>改成

<div class='widget-content' id='test'>

　第二種效果 - 橫向收合(Fx.Slide Horizontal)

<a id="slideout2" href="#">slideout</a> | <a id="slidein2" href="#">slidein</a> | <a id="toggle2" href="#">toggle</a> | <a id="hide2" href="#">hide</a>

　並將<div class='widget-content'>改成

<div class='widget-content' id='test2'>

Mootools Demos - Fx.Slide 在 Blogger 執行的結果請參見
Page Lab: Mootools Demo - Fx.Slide test

Reset

在ZK中使用CSS樣式表

CSS圖片群組

背景 CSS 圖片群組

前景 CSS 圖片群組

讓網站的SEO結構更加良好

Canonical Link Element

提供各個分類的訂閱

IE中換行顯示有問題

CSS的id跟class

#id

.class

CSS的優先順序

頁面設定為優先

外部載入為次

最後設定的樣式將蓋過之前設定的樣式

!important 為最高優先

id 大於 class

jQuery Smart Tooltips

target="_blank" & target="_new" & rel="external"

target="_blank"

target="_new"

rel="external"

FeedBurner引起Google Webmasters Sitemap錯誤

SQL查詢特別字

文字輸入框內的提示文字

修正PNG背景圖片在IE的錯誤顯示

CSS 濾鏡

完全不要用 PNG 圖片

修正PNG圖片在IE的錯誤顯示

Blogger自訂域名引起Picasa圖片連結錯誤

聽不懂人話的IE要用HACK

IE6中背景圖片閃爍的問題

CSS滑鼠換圖

jQuery lightBox plugin

Mootools Demos - Tips

alt 属性(替代文字)

title 屬性(提示說明)

Mootools Demos - Fx.Slide

IE中
換行顯示有問題