圖庫

Posted by: 邱小新 at 晚上11:55:00 in

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

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

Wordpress 免費空間架設教學

Posted by: 邱小新 at 晚上11:13:00 in

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

http://edblog.net/archives/966

Wordpress Themes

Posted by: 邱小新 at 晚上11:08:00 in
  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 templates website

Posted by: 邱小新 at 晚上10:26:00 in

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

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

字體變化小工具

Posted by: 邱小新 at 下午5:45:00 in

可以直接使用 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>

文章字體放大縮小功能

Posted by: 邱小新 at 下午4:55:00 in

有空再來寫說明

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

atoi 函數

Posted by: 邱小新 at 下午4:50:00 in
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; }

isdigit 函數

Posted by: 邱小新 at 下午4:48:00 in
function isdigit(c) { return ((c>='0') && (c<='9')); }

isNull 函數

Posted by: 邱小新 at 下午4:15:00 in
function isNull(o) { if (o.toString()=='undefined') { return true; } if (o.toString()=='NULL') { return true; } return false; }

blogger 加入最新文章功能

Posted by: 邱小新 at 中午12:14:00 in

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

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

blogger 加入最新回應的功能

Posted by: 邱小新 at 上午11:59:00 in

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

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

開放網頁元素的新增小工具功能

Posted by: 邱小新 at 晚上10:13:00 in

很多下載的 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>

刪除樣式的程式碼框框

Posted by: 邱小新 at 下午4:50:00 in

只要在<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 加入程式碼框框注意事項

Posted by: 邱小新 at 下午3:17:00 in

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

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

blogger 加入程式碼框框注意事項

Posted by: 邱小新 at 下午1:09:00 in

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

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

樣式(style)分類

Posted by: 邱小新 at 中午12:12:00 in
當我們在文件中,或是外部的檔案定義樣式 (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>

程式碼列表的框框

Posted by: 邱小新 at 上午11:41:00 in

由於 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>

加入快速編輯按鈕

Posted by: 邱小新 at 凌晨12:51:00 in
<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>

blogger 上的元件代碼

Posted by: 邱小新 at 晚上11:26:00 in

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

  1. <data:post.dateHeader/>
    設定->格式->日期標題格式
    當同時有二篇以上的文章日期是一樣的話,只有第一篇文章會出現日期,其它文章則不會出現。

  2. <data:post.timestamp/>
    設定->格式->時間戳記格式
    因為每一篇的時間戳記都不同,即寫作時間不同,所以每一篇的時間都會出現,而不像上一個變數,會因為同一日期而省略不出現,所以很多網誌範本都喜歡用這個變數來取得日期,而造成時間無法顯示在同一篇文章上。

  3. <data:top.authorLabel/>
    版面配置->網頁元素->選取項目->第二個選項->張貼者:(預設值)

  4. <data:top.timestampLabel/>
    版面配置->網頁元素->選取項目->第三個選項->位於 (預設值)

這裏是測試實驗區

Posted by: 邱小新 at 晚上11:04:00 in
這裏是測試實驗區
1
2
3
4
5
6
7
8
9