底下這段 CSS 碼中的 line-height 可以使行與行中間隔開好看許多，但是連帶的也是 li 的行與行隔開太遠變得很難看。

.entry { position:relative; color: #000000; line-height: 1.6em; text-align: justify; margin:0px 0 0 0 ; }

所以只要加上 ul 及 li 的 line-height 設定即可。記得千萬不能只有設定 ul 的 line-height 參數，這樣會在 IE6 上顯示錯誤，一定要把 ul 的 line-height 設成 0em 才可以，還有 0 跟 em 中間不能有空格喔。

.entry { position:relative; color: #000000; line-height: 1.6em; text-align: justify; margin:0px 0 0 0 ; } .entry ul { line-height: 0em; } .entry li { line-height: 1.4em; }

底下是我收集來的 free icon 網站

1. http://iconeden.com/icon/category/free
2. http://www.ganato.com/free_icons/free_icons.php
3. http://e-lusion.com/design/greyscale/
4. http://somerandomdude.com/projects/bitcons/
5. http://somerandomdude.com/projects/sanscons/
6. http://www.freeiconsweb.com/
7. http://www.silvestre.com.ar/

1. funP 推推王
   需要加入會員才可以推薦文章，人氣很旺，有空多推文，多推文有錢。
2. MyShare 網路書籤
   需要加入會員才可以新增書籤，人氣還好。

一般來說，如果直接使用 <img src="xxx"> 後面再接上文字的話，文字會被強迫放在圖片下方。如果要讓文字看起來跟報章雜誌一樣，文字圍繞著圖片走，有二種方式可以達到此效果，一為 HTML 語法，一為 CSS 語法。

HTML 語法

<img src="xxx" align="left" hspace="5" vspace="5">

CSS 語法

<img src="xxx" style="float:left; margin: 5px 5px 5px 5px;">

有時候為了讓每一個條列中間空一點，所以會在 </li> 加上 <br/>。在 firefox 都很正常顯示沒問題，但是在 IE6 卻沒有效果。最後只好改用 <p/> 才解決問題。

去除<br/>及<p></p>的自動轉換

1. 安裝 Text Control 插件。

2. 修改 wp-includes/js/tinymce/tiny_mce_config.php

// TinyMCE init settings $initArray = array ( 'mode' => 'none', 'onpageload' => 'wpEditorInit', 'width' => '100%',

修改成

// TinyMCE init settings $initArray = array ( 'forced_root_block' => false, 'force_br_newlines' => false, 'force_p_newlines' => false, 'mode' => 'none', 'onpageload' => 'wpEditorInit', 'width' => '100%',

去除 & 的自動轉換

2. 修改 wp-includes/formatting.php

第一個部份

$curl = preg_replace('/&([^#])(?![a-zA-Z1-4]{1,8};)/', '&#038;$1', $curl); $output .= $curl; } return $output;

修改成

// $curl = preg_replace('/&([^#])(?![a-zA-Z1-4]{1,8};)/', '&#038;$1', $curl); $output .= $curl; } return $output;

第二個部份

// Remove metadata tags $content = preg_replace('/<title>(.+?)<\/title>/','',$content); $content = preg_replace('/<category>(.+?)<\/category>/','',$content); // Converts lone & characters into &#38; (a.k.a. &amp;) $content = preg_replace('/&([^#])(?![a-z1-4]{1,8};)/i', '&#038;$1', $content);

修改成

// Remove metadata tags $content = preg_replace('/<title>(.+?)<\/title>/','',$content); $content = preg_replace('/<category>(.+?)<\/category>/','',$content); // Converts lone & characters into &#38; (a.k.a. &amp;) // $content = preg_replace('/&([^#])(?![a-z1-4]{1,8};)/i', '&#038;$1', $content);

wp_list_pages 函數主要是用來顯示 wordpress 頁面的連結，但是查了半天，很多教學都沒有說頁面的連結在那裏編輯。總共皇天不負苦心人，讓我摸索出來，請看左圖，紅色圈圈就是修改新增的地方。原來只是類似公司簡介這類的東西，讓使用者可以輸入一些跟日記無關，但是又跟自己有關的文章。我原來還以為是可以做成網站、網誌或網頁連結選單功能，結果卻都連結到自己的網站，無言。

1. 修改 wordpress 根目錄下的 wp-config.php
   
   define ('WPLANG', '');  改成  define ('WPLANG', 'zh_TW');


2. 在 wp-content 資料夾下，手動新增一個 languages 資料夾。


3. 上傳 zh_TW.mo 到 languages 資料夾。

下載地點：http://blog.beyes.tw/318
注意事項：不要到 wordpress 中文站去下載，版本太舊了，很多中文都出不來。

使用 IE6 的時候，經常因為廣告的寬度太大，或是圖片太大，而造成整個版面會亂掉。此時只要在 CSS style 內加入 overflow:hidden; 就可以把超出的部份隱藏起來，而不會搞亂整個版面。

但是如果不想改樣式表，或是改樣式表太麻煩，此時就需要一點小技巧來限制此廣告的寬度，而且不需要更改到原始廣告的程式碼。

更改方法如下所示：

1. width:140px; 改成你所需要的寬度
2. position:relative; 不可移除
3. overflow:hidden; 不可移除

<div style="width:140px; position:relative; overflow:hidden;"> 廣告程式碼 </div>

http://www.fresheezy.com/theme/927-Flowery-Wordpress-Theme 為二個側邊欄的結構，放到我的網站卻不行。看了下面的文章，再手動修正一下，就完成了二個側邊欄的建立。

http://www.fadesky.com/software/how-to-change-default-widget-for-wordpress/

記錄一下發表文章所用的風景圖庫，有世界各地的風景縮圖，方便使用，不用自己再轉圖。

http://travel.network.com.tw/pic_archive/pic_world_list.asp

一個已經過時的教學文件，是在 2007 年九月寫的。由於 hyperphp 網站功能連結或是圖示都已經變更，所以造成該文件有很多錯誤的地方。即使有些錯誤，但是仍有參考價值，我第一個 wordpress 就是透過這個網站教學所建立的。改天我再自己寫一個新的架設教學。

http://edblog.net/archives/966

1. Wordpress Themes
   這個網站功能非常完整，有分門別類，下載排行，人氣排行等等；不過，排行只有七天內的比較。我都是從分類去找尋我所需要的主題，這樣會比較快，因為它們的主題實在是太多了，有夠誇張的。
2. Fresheezy
   這個網站提供的 theme 比較少，但是品質都很少，可以說是精選，不儘提供 wordpress 也提供 blogger，還不錯，可以參考。
3. Weblog Tools Collection
   一個以部落格為主體的網站，受限於部落格的架構，可想而知很多功能都沒有，沒有排行榜，沒有完整的展示瀏覽。三個字，不好用。
4. to be continue...

從別處看來的，先記一下，有空再整理。

http://tech.azuremedia.net/2007/12/07/1221/

1. Wordpress Themes，是一個頗為全備的 Wordpress Theme下載站。它除了以Blog的格式列出所有的Theme外，更讓你以Tag及受歡迎程度(如Most Downloaded及Most Wanted)來選擇你想要的Theme。此外，你更可以從他們的Google Maps介面中得知是日，來自哪一個地方的人曾觀賞或下載過每一款Theme。
2. Weblog Tools Collection是一個十分好的地方讓我們找尋最新出爐的WordPress Theme。此外，它更提供WordPress Plugin及新聞等資訊。
3. WordPress Theme Park，不單是一個提供各式Theme的好Blog，更為提供了一些WordPress的使用貼士。
4. Fresheezy，除了有免費的WordPress Theme之外，更有供其他Blog平台使用的Template，如Blogger，讓用戶下載。
5. 83 Beautiful Wordpress Themes You (Probably) Haven’t Seen是Smashing Magazine的一個WordPress Theme專輯，值得Bookmark的。
6. Free Wordpress Themes提供近千款WordPress Theme讓我們下載，而且亦讓我們以Tag來搜尋合我們用的Theme。
7. TemplateXtreme.com提供數十款設計精美的WordPress Theme
8. Free Wordpress Themes的最大賣點就是提供Adsense-Ready的WordPress Theme。所以由這兒下載的任何Theme都方便你即時放上廣告的。
9. 另一個Free Wordpress Themes。由今年年中開始營運的Theme Blog，提供不少Theme的設計。
10. Free WordPress templates, plugins，顧名思義，除了Theme之外，更有Plugin供我們下載。
11. Template Monster的Free WordPress Themes專欄，設計雖然不錯，但只得聊聊數款讓我們選擇。
12. Zorg Directory WordPress Theme只提供幾款Theme，全都是較深沉的設計。
13. Top Wordpress Themes，稱自己提供最佳的WordPress Theme給用戶。
14. TemplatesFeed.com，以Feed的形式，提供最新的WordPress Theme，以及其他各種Template給用戶下載，包括CSS Template、HTML Template及xhtml Template。
15. Grab a Theme提供了很多設計較為誇張大膽的Theme，但他們都十分美觀的。
16. Wpdesigner雖然提供不多的WordPress Theme，但每款都有頗詳盡的介紹，甚至每款Theme的Limitation也有列出來。
17. ThemeTime提供多種特色的WordPress Theme。他們以Pro作為招徠，也能替你Customize每一款Theme，但要修改就要付費了。
18. h4×3d所提供的WordPress Theme也是真的夠美麗。
19. Free WordPress Themes內的設計，都是Nurudin Jauhari的個人作品。
20. 這是另一位設計師Samir Kamble的個人作品
21. Top Tut只提供幾款WordPress Theme，都是設計不俗的選擇。
22. Ericulous提供收費及免費WordPress Theme，以及Plugin。
23. Desperate Curiosity的《100 Favourite Wordpress Themes》列出了他挑選的100款靚Theme。
24. ThemeVibes內的免費Theme，設計絕對不差。
25. Theme Arena提供免費與收費的WordPress Theme，更有使用WordPress的貼士，例如Keyboard Shortcuts。

分享一下我常逛的 blogger 版面網站。

1. Deluxe Templates
   我多數的版面都是從這個網站得來的。它擁有豐富的版面，經常有新的版面更新，可惜沒有分類，排行榜等相輔的功能，只是單純的展示版面而已，有點可惜。
2. to be continue...

可以直接使用 blogger 的新增小工具功能，加入這段程式碼。

目前測試沒問題的瀏覽器做一個列表如下：

1. IE 7
2. Firefox 3
3. Chrome
4. Flock
5. Safari
6. Maxthon

在 IE6 上有一個小問題，應該說是 IE6 支援不完全，也就是 getAttribute(_attr) 函數無法提取 "class" 的值，每次都會回傳 NULL。所以，當 _attr="class" 時，使用其它 browser 都可以正常運作，就獨獨 IE6 沒有作用。

<script type='text/javascript'> /* = 請先定義下列參數 = */ var _name = "div"; var _attr = "id"; var _post = "content"; /* =================== */ function isdigit(c) { return ((c>='0') && (c<='9')); } function atoi(s) { var t=0; for(var i=0; i < s.length; i++) { var c=s.charAt(i); if(!isdigit(c)) return t; else t = t*10 + (c-'0'); } return t; } function fontZoom(size) { var element = document.getElementsByTagName(_name); for(var i=0; i < element.length; i++) { if(element[i].getAttribute(_attr) == _post) { if (element[i].style.fontSize == '') element[i].style.fontSize = "14px"; var fixsize = atoi(element[i].style.fontSize) + size; if (fixsize <= 0) fixsize = 14; element[i].style.lineHeight = "1.2"; element[i].style.fontSize = fixsize + "px"; } } } </script> &#65310;<a href='javascript:fontZoom(+1)'>放大字體</a><br/> &#65310;<a href='javascript:fontZoom(-1)'>縮小字體</a>

有空再來寫說明

function fontZoom(size) { var element = document.getElementsByTagName("span"); for(i=0; i < element.length; i++) { attribute = element[i].getAttribute("name"); if(attribute == "zoom") { if (element[i].style.fontSize == '') element[i].style.fontSize = "14px"; var fixsize = atoi(element[i].style.fontSize) + size; if (fixsize <= 0) fixsize = 14; element[i].style.fontSize = fixsize + "px"; } } }
<a href='javascript:FontZoom(+1)'>放大字體</a> <a href='javascript:FontZoom(-1)'>縮小字體</a>
http://abintech.azhai.org/2007/01/blog-post.html http://chenkaie.blogspot.com/2006/12/javascript-selectable-post-font-size.html

function atoi(s) { var t=0; for(var i=0; i<s.length; i++) { var c=s.charAt(i); if(!isdigit(c)) return t; else t = t*10 + (c-'0'); } return t; }

function isdigit(c) { return ((c>='0') && (c<='9')); }

function isNull(o) { if (o.toString()=='undefined') { return true; } if (o.toString()=='NULL') { return true; } return false; }

blogger 上沒有這個小工具，不過可以透過一個變更的方法加入這個功能。請按照下列步驟做就有效果了

1. 版面配置－＞網頁元素－＞新增小工具－＞資訊提供
2. 資訊提供網址填入"http://xxxx.blogspot.com/feeds/posts/full"
3. xxxx.blogspot.com 需改成您的 blogger 網址
4. 按下確定後會出現一些選項，再按儲存即可。

blogger 上沒有這個小工具，不過可以透過一個變更的方法加入這個功能。請按照下列步驟做就有效果了

1. 版面配置－＞網頁元素－＞新增小工具－＞資訊提供
2. 資訊提供網址填入"http://xxxx.blogspot.com/feeds/comments/full"
3. xxxx.blogspot.com 需改成您的 blogger 網址
4. 按下確定後會出現一些選項，再按儲存即可。

很多下載的 blogger 範本中許多的 section 都沒有開放新增小工具的功能，常常需要新增元素時，會感到不方便。其實只要簡單幾個步驟，就可以開放這功能了。

1. 進入版面配置－＞修改 HTML
2. 尋找 b:section 關鍵字
3. 在 <b:section> 內找到 showaddelement='no'
4. 改成 showaddelement='yes'
5. 儲存範本

例如： <b:section class='main' id='top' showaddelement='no'> <b:widget id='Blog2' locked='true' title='網誌文章' type='Blog'/> </b:section> 改成 <b:section class='main' id='top' showaddelement='yes'> <b:widget id='Blog2' locked='true' title='網誌文章' type='Blog'/> </b:section>

只要在<xmp>內加上 style="text-decoration: line-through;" 即可。例如下面的程式碼。

<b:if cond='data:post.editUrl'> <span> <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'> <img alt="" class="icon-action" height="18" src="http://www.blogger.com/img/icon18_edit_allbkg.gif" width="18"/> </a> </span> </b:if>

由於種種原因，證明 pixnet 並不適合做程式碼的分享，如果你確定要做這件事，請注意下列幾個事項。

1. 部落格後台－＞部落格管理－＞基本／進階設定－＞預設文章編輯模式－＞純文字模式
2. 在發表或修改文章時，在純文字模式下，需把系統換行功能取消。
3. 儘可能不要使用 wysiwyg 編輯器，如果必需使用 wysiwyg 編輯器，程式碼加入後，請勿切換到 wysiwyg 編輯器，會導致程式碼錯亂。

由於種種原因，證明 blogger 並不適合做程式碼的分享，如果你確定要做這件事，請注意下列幾個事項。

1. 設定－＞格式－＞轉換分行符號－＞否。 這個很重要喔，一定要設定，不然框框內會出現一堆<br/>符號。
2. 儘可能在一開始建立部落格時，就把第一項設定好。如果事後才設定第一項功能，則需要把已經發佈的文章做一些修改，因為所有的 <br/>都不見了，需要手動加入。
3. 使用 wysiwyg 編輯器完後，由於第一項的關係，需要再手動加入<br/>，或是改用<P></P>。
4. 儘可能不要使用 wysiwyg 編輯器，如果必需使用 wysiwyg 編輯器，程式碼加入後，請勿在修改 HTML及撰寫功能切換，會導致程式碼錯亂。
5. 當使用完 wysiwyg 編輯器後，在發佈文章前，請先將模式切換到修改 HTML。以免下次修改文章時，進入撰寫模式，而造成程式碼大混亂。

當我們在文件中，或是外部的檔案定義樣式 (style) 之後，所有套用的 HTML 文件都會遵照相同的樣式，例如說: 當我們把 <P> 定義成藍色，那麼所有使用到 <P> 的段落都會變成藍色的字。但如果我想要某些地方的 <P> 是藍色，某些地方的 <P> 是紅色時怎麼辦?! 這個時候我們就得把樣式分類 (class)，在使用樣式的時候，套用適當的類別。

要使用分類的樣式，我們在欲套用的 HTML 標記中使用 CLASS 這個的屬性，並且事先在 Style Sheets 中定義好樣式類別 (style class)。
<style type="text/css"> P.blue {color:#0000ff;} P.red {color:#ff0000;} </style> 上面只能套用到 <P>，下面則可以套用到所有 sytle。 <style type="text/css"> all.blue {color:#0000ff;} all.red {color:#ff0000;} </style> 另外 P.blue 及 P.red 會繼承 P 的所有設定。所以，如果發現效果有所差異時，請先看看其它地方是否有 P 的設定。

舉一個列子，下面為效果：

藍色

紅色

下面為原始碼： <style type="text/css"> P.blue {color:#0000ff;} P.red {color:#ff0000;} </style> <P CLASS="blue">藍色</P> <P CLASS="red">紅色</P>

由於 xmp.code 及 xmp.cmd 會繼承 xmp 的所有設定，所以相同的部份就不用再寫一次，只要寫出相異的部份即可，這樣可以省下很多空間，加速網頁傳送速度。另外儘量使用 TAB 來代替 space 可以省下更多的空間；但是請注意在 <xmp></xmp> 中間不要使用 TAB，是無效的。

框框一

<style type="text/css"> xmp { padding: 1em; display: block; font-family: Tahoma,Arial; font-size: 10pt; letter-spacing: 0px; max-height: 1200px; line-height: 1.2em; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ color: black; border: 1px dashed #2f6fab; background-color: #f9f9f9; } </style>

框框二

<style type="text/css"> xmp.code { color: #000000; border: 1px solid #cccccc; background: #cccccc url(http://abinlee.link.googlepages.com/BG_CODE.gif) left top repeat-y; } </style>

框框三

<style type="text/css"> xmp.cmd { color: #cccccc; border: 1px solid #cccccc; background: #000000 url(http://abinlee.link.googlepages.com/BG_CMD.gif) left top repeat-y; } </style>

框框四

<style type="text/css"> xmp.file { font-family: 'Georgia'; color: #000; border: 1px solid #cccccc; background: #FFF url(http://synnwang.googlepages.com/BG_FILE.gif) left top repeat-y; } </style>

框框五

<style type="text/css"> xmp.html { color: blue; border: 1px solid #cccccc; background: #FFF url(http://synnwang.googlepages.com/BG_HTML.gif) left top repeat-y; } </style>

框框六

<style type="text/css"> xmp.latex { color: #660000; border: 1px solid #cccccc; background: #FFF url(http://synnwang.googlepages.com/BG_LATEX.gif) left top repeat-y; } </style>

框框七

<style type="text/css"> xmp.comment { padding: 1.2em; color: #CC00FF; border: 1px solid #cccccc; background: #FFFF66 url(http://synnwang.googlepages.com/BG_COMMENT.gif) left top repeat-y; } </style>

框框八

<style type="text/css"> xmp.ref { border: 1px dotted #a88; background: url(http://bloggerhacks.googlecode.com/files/Code_REF.png) left top no-repeat; line-height: 1.6em; font-size: 13px; font: normal normal 100% 'Lucida Grande',Georgia,'Trebuchet MS'; } </style>

<b:if cond='data:post.editUrl'> <span> <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'> <img alt="" class="icon-action" height="18" src="http://www.blogger.com/img/icon18_edit_allbkg.gif" width="18"/> </a> </span> </b:if>

大小寫要正確喔！！我因為大小寫錯誤搞了一小時才發現。

1. <data:post.dateHeader/>
   設定－＞格式－＞日期標題格式
   當同時有二篇以上的文章日期是一樣的話，只有第一篇文章會出現日期，其它文章則不會出現。
   
   
2. <data:post.timestamp/>
   設定－＞格式－＞時間戳記格式
   因為每一篇的時間戳記都不同，即寫作時間不同，所以每一篇的時間都會出現，而不像上一個變數，會因為同一日期而省略不出現，所以很多網誌範本都喜歡用這個變數來取得日期，而造成時間無法顯示在同一篇文章上。
   
   
3. <data:top.authorLabel/>
   版面配置－＞網頁元素－＞選取項目－＞第二個選項－＞張貼者：(預設值)
   
   
4. <data:top.timestampLabel/>
   版面配置－＞網頁元素－＞選取項目－＞第三個選項－＞位於 (預設值)
   
   

這裏是測試實驗區
1
2
3
4
5
6
7
8
9