Shiou's Notepad

101-02-19小義樓

2012-02-20T00:17:00.003+08:00

101-02-19新車趴趴走

2012-02-19T14:34:00.002+08:00

高雄捷運─生態園區站【R15】

2008-08-24T11:58:00.010+08:00

《原生植物園》
生態園區站2號出口，出口即是博愛公園，很幽靜的小公園，鄰近的灰色建物是新的左營國中校區，這是我最喜歡的捷運站出口。2號出口外可搭乘接駁車【紅51】前往原生植物園，不搭車的話，出口右轉沿孟子路一直走，也會到原生植物園，有點距離，步行至少15-20分鐘。

原生植物園區中較靠近高鐵站那邊是不同生態景觀的教學區，有腳踏車道，還有一些遊樂設施，感覺像是整理過的公園，如果帶著幼兒，或許這邊比較適合遊憩。

但我覺得比較好玩的是靠近崇德路和政德路口的森林浴場。森林浴場內除了原木步道外，滿地落葉，樹木野草自然生長，小蟲小動物很多。小孩到這邊常會驚呼連連。我曾一次看到5隻以上的松鼠，在附近的樹枝上玩耍吃東西，可愛極了。森林浴場若從崇德路和政德路口看過去，像是雜草叢生的廢棄野地。很難想像一邊就是車來車往的街道，一邊卻是寧靜如山野的林間，有機會值得去走走。

《左營蓮池潭周邊景點》
生態園區站2號出口，搭乘接駁車【紅51】，在蓮池潭風景區下車。記得在資訊中心索取一份「左營蓮池潭周邊觀光導覽地圖」。上面有左營各景點歷史的介紹。沿著蓮池潭邊走，可以看看龍虎塔、春秋閣。目前因為2009世運，蓮池潭全抽乾了，偌大的蓮池潭，只看到數具怪手在開挖。所以暫時沒有潭景可看。步行至舊城國小，可繞至舊城國小後方，可以看到「左營下路歷史步道」、舊聚落模型。附近尚有許多古厝，有興趣的人可以按圖索驥造訪。舊城國小內有一座文廟，即舊孔子廟，排列十方碑林，原為三級古蹟，值得一探。

《舊城小吃》
大約就在舊城國小後方，賣一些傳統小吃。生意很好。
電話：07-5884521
地址：高雄市左營區店仔頂路3號（城隍廟前）

高雄捷運─橋頭糖廠站【R22A】

2008-08-24T11:16:00.007+08:00

橋頭糖廠，在高捷未通車前，我們去過幾次，就是愛它的純樸靜幽。藝術村中的一些古蹟遺址，像是紅磚水塔等很有特色。台灣糖業博物館也值得一遊，製糖的工具、廠房及運糖的小火車之外，還有許多戶外的裝置藝術。我很喜歡的是辦公廳的建築，有著層疊拱門的迴廊，在靜默的空間裡，有種穿越時空回到舊時年代的錯覺；更具特色的是園區裡面的老樹，印象中有鐵刀木、鳳凰木、雨豆樹、老樟樹等等，其中老樟樹群年代久遠，坐在樹下，綠蔭參天，風徐徐吹來，總給我一種難以形容的幸福平靜。高捷通車後，恐怖的攤販和吵雜，整個橋頭糖廠真像個園遊會。希望過一陣子，熱潮退了，遊客能夠真正享受糖廠那平靜純樸的美感。

《橋頭糖廠》
橋頭糖廠站2號出口，即高雄糖廠台糖展售中心附近。展售中心地下室有賣冰棒和糖廠才有的紅豆酵母冰。往右邊走一小段就是橋頭糖廠藝術村及橋頭文史協會。再深入走進去至興糖國小，沿途是舊時台糖員工宿舍區，現多為廢墟，但歷經歲月痕跡的頹圮建築自有一種讓時空靜止的美感，且沿途綠意盎然，有很多老樹和有趣的植物，是個悠閒走走的好地方。

《台灣糖業博物館》
橋頭糖廠站2號出口往左邊走一小段，就會看到台灣糖業博物館的入口。相關的介紹詳見台灣糖業博物館官網。

《橋頭老街》
從台灣糖業博物館的入口，穿越入口處附近的鐵路平交道，往市區方向步行幾百公尺就是橋頭老街囉。早上去，會遇到傳統市場，橋頭農會對面有個小小的市場入口，裡面是一些小小的市場攤位。可以試試咖哩鮪魚羹、橋仔頭黃肉燥飯、大腸包香腸。橋仔頭黃肉燥飯據說是網路票選第一名，肥肥的五花肉切成小丁滷出來的肉燥，滷汁黏稠香滑，還不錯。咖哩鮪魚羹是旅遊書推薦的，裡面有粗粗的米粉(長得有點像米苔目)，沒吃過的可以試試看。大腸包香腸，據說北部人很少這樣吃法，小時候我們是大腸切開包著一根香腸，淋上醬油膏、辣醬，這裡老闆會很貼心問要不要切片，並附上醃小黃瓜泡菜，方便你用小竹籤叉著吃。還有一家橋頭米糕榮，旅遊書上寫的，但那天晃過來晃過去走了兩次沒找到...

高雄捷運遊

2008-08-24T10:58:00.006+08:00

該文2008.06.01原發表於背包客棧，當時只在客棧潛水，因著寫在地文章可申請客棧吊牌而浮出水面寫了幾篇在地文，一起貼過來，做個紀錄。
------------------------------------------------------------------------------------
公車等很久，大概是所有高雄人的夢靨。多年前，一次心血來潮決定搭公車回家，等了快一個小時後，捱不住天熱，偏偏站牌旁就是冰店，我決定先吃碗冰吧，吃冰的時候，公車就從眼前呼嘯而過。不想再等一個小時，最後還是跳上小黃回家了。從此沒再搭過高雄的公車。

捷運通車了。心情是很矛盾的。

當初高捷弊案、坍塌、虐待外勞的事件沸沸揚揚，身為高雄人，實在很難為高捷感到驕傲。每次外地親友來訪，免不了帶人遊車河，我們還曾開玩笑繞去介紹各坍塌點。當時覺得就算高捷通車了，自己大概也不會去搭乘吧。因為垂直的紅線和橘線，原本就是交通要道，通車後對原本居住在交通比較不方便的區域的民眾而言，高捷也不可能是日常通勤的選擇，除非有便利的接駁公車等配套措施。但是，高雄的公車，真讓人沒信心。

轉眼間，捷運真的通車了，免費試乘時，我們也去湊了幾次熱鬧。狹長形的高雄，南北交通是很不方便的，小港機場方向的中山路，幾乎是卡車、連結車的天下，走一趟神經細胞不知死多少。往岡山一帶，開車是真的有點遠。試乘捷運時，不知道是因為從北高雄到南高雄忽然近在咫尺，還是看到高雄人扶老攜幼充滿好奇的來試乘捷運，忽然有點小小的感動和驕傲油然而生：高雄正在改變。所以儘管不看好高捷的營運，我還是買了一卡通。決定，來支持一下高雄捷運。

高雄捷運一卡通，這段時間，捷運轉乘公車或公車轉乘捷運，雙向都一律是12元。其實是很優惠的。於是，我們開始穿著輕便的走路鞋，背個小包包，選定一個站，搭捷運和接駁公車，隨意走走逛逛。週末高捷半日遊，我們發展出另一種探索高雄的玩法。其實，感覺還不錯。我一向喜歡到大眾運輸系統便捷的國家旅遊，就是喜歡那種買個一日卷，不怕走錯路，走錯有走錯的風景，可以真正感受一個城市的感覺。高捷開始讓我有這種探索一個城市的感覺，只是有趣的是，這是我從小長大的城市。

不久前，高捷開放小折上高捷。高雄這幾年，有不少的點已經規劃腳踏車道，我想，這將是另一種玩樂的新風貌。高雄，真的不一樣了。

捷運或許短時間內不會成為民眾的通勤工具，但，可以成為一種旅行者探索高雄的方式。如果有機會來高雄搭乘捷運遊玩，別忘了在車站索取「路網圖」，大部分的資訊就都有囉。在高雄捷運的網站，點選旅遊資訊中的吃喝玩樂和建議行程，其實也大致列出了各站的景點，點選旅客服務中的車站介紹也有詳細的地圖可以參考。有興趣的人可以看看。

其他幾篇在背包客棧發表的高雄捷運遊：
【景點】高雄捷運─橋頭糖廠站【R22A】
【景點】高雄捷運─生態園區站【R15】

味全廚易料理醬《三杯快炒》

2007-12-18T00:08:00.000+08:00

今天再試作了一道三杯雞。嗯，的確有廚藝進步的錯覺。

廚易料理醬。三杯快炒
2007/12/10
Photo by shiouhhc

三杯雞

【材料】

三杯快炒醬、去骨雞腿肉、蒜頭、薑片、麻油/沙拉油、九層塔。

【作法】

倒入麻油/沙拉油，起油鍋，爆香蒜頭、薑片
入切塊的雞腿肉、略炒至半熟。
倒入醬汁，翻炒，收汁。
起鍋前加入九層塔，略微拌炒即起鍋。

味全廚易料理醬《壽喜燒丼》

2007-12-09T20:30:00.000+08:00

廚易料理醬。壽喜燒丼
2007/12/09
Photo by shiouhhc

這陣子，在電視上常看到一個廣告，台詞很好笑，大意是一個小孩在日記上說媽媽廚藝很爛，可是他會笑中帶淚的把它吃光光，後來媽媽因為用了廚易料理醬煮三杯雞，廚藝忽然大躍進，只要那天煮三杯雞，飯就一定不夠吃....

那天在超市看到這個料理醬，有四種口味〈三杯快炒、麻婆快炒、黑胡椒快炒、壽喜燒丼〉。特價中，59元/罐，順手買了三個口味回來。今天試作了一道壽喜燒豚丼蓋飯。還不錯吃哩。

壽喜燒豚丼蓋飯

【材料】

壽喜燒丼醬、肉片、洋蔥切絲、鮮香菇切絲，奶油一小塊，兩顆蛋打散，蔥花少許。

【作法】

壽喜燒丼醬:水以1:3比例稀釋，備用。
小火熱鍋，融化奶油，加入洋蔥絲、鮮香菇炒軟。
倒入大部分醬汁，小火煮滾，放入肉片燜煮，盛起鋪蓋在飯上，灑上蔥花。
用剩下的醬汁，煮開，倒入蛋汁，略熟就可以盛裝。

用食物寫日記

2007-11-25T20:42:00.000+08:00

最近這一、兩個月，開始習慣在吃飯前，先拿出包包裡的相機，紀錄著餐桌上發生的美好事物。現在，我在 Flickr 上的珍藏集：用食物寫日記不知不覺的也累積了數百張食物的照片〈想到這些全進了肚子...驚><"〉。

剛開始，拿出相機時會有點不好意思，深怕引起店員或旁人的注目；有家人、朋友同桌，則擔心耽誤大家用餐。拍了幾次後，家人漸漸習慣了這種怪異行徑，會主動提醒：「你不是要拍照？」。

漸漸克服了拍照的焦慮，現在最常發生的狀況是，食物一端上來，壓根就忘了拍照這件事，一掃而空或吃得杯盤狼藉後才赫然發現，又忘了拍照了....

慢慢的，開始覺得拍食物還挺好玩的。美美的食物照片，總讓我有種無以名狀的幸福感:)

Blogger教學資源彙整

2007-08-27T19:27:00.000+08:00

這陣子，學著使用Blogger，一開始完全搞不清楚狀況，所幸網路上有很多教學資源可以參考，總算是漸入佳境。把這陣子讀過的好文章，整理一下，希望能給跟我一樣初入門者作為參考。感謝提供這些教學資源的作者。

建立基本概念

Blogger 說明

教學網站推薦：這幾個網站的教學文章很豐富，實用，重點是比較容易看懂。

Hacks 總覽：以下幾篇文章，作者整理列出自己建置部落格時所用到Hacks。

無腦安裝：如果不想花時間玩，可以安裝這個。

Josh's Note–blogger_ext2安裝

範本下載

實用Hacks/Widgets的教學文章

增加第二側邊欄位

Beautiful Beta: Adding a second sidebar to your Blog - part 2

顯示文章列表 (Table of Contents,ToC)

Beautiful Beta: BlogToC Widget Released

收藏文章至共享書籤網站

最新文章與最新回應

Favicon

Blog Search

繼續閱讀

其他：也很實用的Hacks/Widgets

其他：Blog相關工具的教學文章

相關工具網站：提供內嵌或外掛的部落格工具，流量分析/工具按鈕/Badge/...

筆記：加上文章列表（ToC: Table of Contents）

2007-08-27T13:23:00.001+08:00

ToC（ToC: Table of Contents）這個功能可以將部落格所有的文章整理成一個列表。

點擊側邊Table of Contents欄位中的Show Table of Contents，就會在原本發佈文章的主欄位上方列出所有文章，再點擊一次Hide Table of Contents，就可以收起文章列表。

點擊列表標題欄位POST TITLE或POST DATE，可以依標題或時間排序；點擊LABELS，則篩選列出同一標籤的文章。

這個實用的功能也是Beautiful Beta的HANS所釋出，原文請參考BlogToC Widget Released。以下仍是我依樣畫葫蘆所做的修改：

Step 1:允許範本主欄位（Main）可以再新增一個網頁元素。
找到
<b:section class='main' id='main' showaddelement='no'>
改為
<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

Step 2:將下面有關表格格式設定的程式碼貼在<head>與</head>之間的css區塊，如 <b:skin><![CDATA[之後，或]]></b:skin> </head>之前。我自己是貼在]]></b:skin> </head>之前。

/* ToC的CSS開始*/
#toc {
border: 0px solid #000000;
background: #ffffff;
padding:5px;
width:100%;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
border-top: 1px solid #4c4c4c;
border-bottom: 1px dotted #4c4c4c;
color: #000000;
padding-left: 5px;
width:50%;
}
.toc-header-col2 {
width:15%;
}
.toc-header-col3 {
width:25%;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
text-decoration:none;
font-size: 95%;
color:#4c4c4c;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:underline;
font-size: 95%;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
}
/* ToC的CSS結束*/

Step 3:儲存範本。切換至【範本 | 網頁元素】（Template/Page Elements）。

Step 4:在中間主欄位（Main）上方，【加入網頁元素】（Add a Page Element），新增【HTML/JavaScript】網路元素，標題留白，貼上下列原始碼。
<div id="toc"></div>

Step 5:在側邊欄位（sidebar），【加入網頁元素】，新增【HTML/JavaScript】網路元素，標題訂ToC或Table of Contents，貼上下列原始碼，將YOURBLOG改成自己的部落格域名。

<div id="toclink"><a href="javascript:showToc();">Show Table of Contents</a></div>
<script style="text/javascript" src="http://home.kpn.nl/oosti468/downloads/blogtoc.js"></script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=101&max-results=100&callback=loadtoc"></script>

Step 6:移動Table of contents這個網路元素到喜歡的位置，儲存。

筆記：將Template改成三欄

2007-08-27T00:45:00.000+08:00

Blogger預設的範本多是兩欄式的，我選擇的Stretch Denim也是兩欄，參考了Beautiful Beta－增加第二個側邊欄位的作法，稍稍變動一下程式碼，就可以改成三欄了。

Beautiful Beta雖然是英文網站，可是作者HANS的寫作，不但用字遣詞簡單、概念解說更是非常清楚易懂，關於如何修改的細節、Blogger範本結構的基本概念，不管改不改範本，都非常值得一讀。所以，修改的概念，請參考Beautiful Beta。以下是我依樣畫葫蘆所做的修改：

Step 1:將原有的側邊欄位定義成右側邊欄位
找到

<div id='sidebar-wrapper'>
      <b:section class='sidebar' id='sidebar' preferred='yes'>

換成

<div id='right-sidebar-wrapper'>
     <b:section class='sidebar' id='right-sidebar' preferred='yes'>

找到
#sidebar-wrapper
換成
#right-sidebar-wrapper

Step 2:增加一個左側邊欄
找到
<div id='main-wrapper'>
在<div id='main-wrapper'>之前增加

<div id='left-sidebar-wrapper'>
      <b:section class='sidebar' id='left-sidebar' preferred='yes'/>
</div>

Step 3:增加及定義左側邊欄位的寬度和格式，可以直接複製#right-sidebar-wrapper{}修改。

#left-sidebar-wrapper {
  margin-left: 1%;
  width: 20%;
  float: left;
background-color: $mainBgColor;
display: inline;       /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Step 4:修改主欄位和右側邊欄位的寬度

#main-wrapper {
  margin-left: 2%;
  margin-right: 2%;
  width: 54%;
  float: left;
background-color: $mainBgColor;
display: inline;       /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
#right-sidebar-wrapper {
  margin-right: 1%;
  width: 20%;
  float: right;
background-color: $mainBgColor;
display: inline;       /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Step 5:在【範本 | 網頁元素】（Template/Page Elements）中檢視效果，並搬動部分網頁元素到左邊欄位。

筆記：加上收藏本文至書籤網站的功能

2007-08-26T23:15:00.000+08:00

在文章末加上一些書籤網站的連結，可以讓讀者方便收藏文章。Addthis!提供的工具按鈕GET THESE WIDGETS!，幾乎整合了大多數的書籤網站，讓讀者自己可以在單一整合的畫面選擇收藏文章到哪個書籤網站。可惜沒有國內比較多人用的HEMiDEMi和funP，所以要自己加上去。

Step1:從Addthis!取得Blog Post Button的程式碼，大概會長得像這樣，紅字部份會是註冊時的帳號。

<!-- AddThis Bookmark Post Button BEGIN -->
<div><a expr:href='"http://www.addthis.com/bookmark.php?pub=xxxxxx&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Bookmark using any bookmark manager!'><img src='http://s9.addthis.com/button1-bm.gif' width='125' height='16' style='border: 0px; padding: 0px' alt='AddThis Social Bookmark Button' /></a></div>
<!-- AddThis Bookmark Post Button END -->

Step2:準備好書籤網站的小圖示，上傳到網路空間，並取得圖片的url位置。

Step3:在post的宣告中找到.post img，加上img.bookmark { padding: 0px; border: none;}，這是為了讓小圖示不要出現小框框。

.post img {
padding: 4px;
border: 1px solid $borderColor;
}
img.bookmark {
padding: 0px;
border: none;
}

Step4:把收藏文章到HEMiDEMi等書籤網站的程式碼和Addthis!提供的程式碼合併如下

<!-- AddThis Bookmark Post Button BEGIN -->
<div>收藏本文：
 <a expr:href='"http://www.hemidemi.com/user_bookmark/new?title=" + data:post.title + "&amp;url=" + data:post.url' target='_blank' title='加入HEMiDEMi分享書籤'><img alt='HEMiDEMi個人書籤' border='0' class='bookmark' src='http://hemidemi小圖示的圖檔位置'/></a>
 <a expr:href='"http://myshare.url.com.tw/index.php?func=newurl&amp;url=" + data:post.url + "&amp;desc=" + data:post.title' target='_blank' title='加入MyShare分享書籤'> <img alt='MyShare個人書籤' border='0' class='bookmark' src='myshare小圖示的圖檔位置'/></a>
 <a expr:href='"http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&amp;=" + data:post.title' target='_blank' title='加入Yahoo分享書籤'><img alt='Yahoo分享書籤' border='0' class='bookmark' src='yahoo小圖示的圖檔位置'/></a>
 <a expr:href='"http://funp.com/pages/submit/add.php?url=" + data:post.url + "&amp;s=" + data:post.title + "&amp;via=tools"' target='_blank' title='貼到 funP'><img alt='funP推推王' border='0' class='bookmark' src='http://funp.com/images/tools/post_04.gif'/></a>
<a expr:href='"http://www.addthis.com/bookmark.php?pub=xxxxxx&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Bookmark using any bookmark manager!'><img alt='AddThis Social Bookmark Button' width='125' height='16' src='http://s9.addthis.com/button1-bm.gif'  style='border: 0px; padding: 0px' /></a>
</div>
<!-- AddThis Bookmark Post Button END -->

Step5:勾選展開小裝置範本，找到 <data:post.body/>後，在合適的位置貼上前面那段程式碼。我自己是貼在 <p class='post-footer-line post-footer-line-2'/>那段後面，也就是<p class='post-footer-line post-footer-line-3'/>之前。

筆記：Favicon

2007-08-26T19:29:00.000+08:00

有些網址列前面有個小圖示，這就是Favicon，其實很簡單就可以在自己的部落格加一個!

Step1:先準備一張小圖片，有些網站可以下載，也可以自己做一張。大小是16*16。最後要儲存成.ico的檔案格式。IrfanView是一個免費的軟體，它可以縮圖，也可以轉檔，儲存成.ico的格式。所以找張喜歡的圖，最好線條簡潔一點，縮圖成16*16，再轉檔成.ico。

Step2:將圖片上傳到網路空間，並取得圖片的url位置。

Step3:將下面那段程式碼加到]]></b:skin>之後，</head>之前，修改紅字部分。

<link href="http://Favicon的圖檔位置" rel="shortcut icon">
<link href="http://Favicon的圖檔位置" rel="icon">

筆記：加大日期與標題距離

2007-08-26T18:25:00.000+08:00

Blogger預設範本的日期與標題行距很小，我自己覺得看起來很彆扭，所以讓日期與下面的邊緣稍稍加大些。一般來說，margin: a b c d;（a b c d 那四個參數分別是與"上右下左"邊緣的距離）

.date-header {
 margin: 0.5em 0 1em;
 font-weight: normal;
 color: $dateHeaderColor;
 font-size: 100%;
}

筆記：改變連結的CSS

2007-08-26T17:31:00.000+08:00

在<head>與</head>之間的css區塊，如 <b:skin><![CDATA[之後，或]]></b:skin> </head>之前（我是放在body{}後面），增加以下的程式碼，當游標移到連結處時，可以改變底色、取消底線、改變字的顏色等等...

a:link {
color: $linkColor;
}
a:visited {
color: $linkColor;
}
a:hover {
text-decoration:none ;background-color :#CAD1E0; color:#003366 }

筆記：加入頁首圖片

2007-08-26T17:02:00.000+08:00

Step1:先準備一張圖片，上面那張千禧橋的圖片是裁切成1600*160。一般螢幕會看到大約1400*150左右的圖。我的小筆只有8.9吋螢幕，解析度設1024*600，其實只看到一半的圖。不過畢竟很少人的螢幕是這樣，為了適應大部分的螢幕，所以乾脆切成1600*160。

Step2:將圖片上傳到網路空間，並取得圖片的url位置。

Step3:找到#header那段語法，加上background: url(http://頁首圖片的檔案位置);

#header {
margin: 0 2%;
background-color: $headerBgColor;
 background: url(http://頁首圖片的檔案位置);
color: $headerTextColor;
padding: 0;
font: $headerFont;
position: relative;
}

Blogger新手入門三部曲(修改HTML篇)

2007-08-26T15:55:00.000+08:00

利用Blogger後台管理介面的【範本 | 修改HTML】（Template/Edit HTML），我們可以依照網路上許多教學資源的解說，一步一步修改範本，取得想在部落格中新增的功能。

如果你跟我一樣，對HTML語法不甚熟悉，幾個小提醒：

在開始做任何範本的修改前，先下載完整模板。這樣萬一玩壞了，再上載上次存的模板，就可以回復原狀。
善用【Ctrl】鍵+【F】鍵，找到適合加入語法的位置。請注意，Blogger為了讓程式碼看起來乾淨，小裝置（widget）的程式碼預設都以單行呈現，所以有時候找不到要找的那一行程式碼，可以注意一下教學文章說明，是否提到要勾選展開小裝置範本。
複製、貼上教學資源中的程式碼時，最好注意一下是不是有奇怪的格式，像是全形的符號等等...之前複製貼上這篇文章的程式碼時，一直出現錯誤，後來用它下面回應中所提供的.txt檔就沒問題了，多爬了好幾篇教學文，才發現都是一些引號格式不對或是"&"要改成"&"之類的小問題，但對不懂語法，只會複製貼上的我，當時還真是找不出錯在哪，挫折極了。

就這樣，【範本 | 修改HTML】，下載完整模板，在語法的視窗中點一下，用【Ctrl】鍵+【F】鍵，找到適合加入語法的位置，複製、貼上程式碼，儲存範本，檢視Blog。其實不會太難，是吧?!

Blogger新手入門三部曲－修改HTML篇

在我自己的練習中，我做了以下幾個修改，有些修改純粹只是自己的偏好，都是一些很簡單的修改啦，提供給入門者做個參考：

Blogger新手入門二部曲(一千零一招篇)

2007-08-23T00:57:00.000+08:00

二部曲為什麼叫一千零一招，因為做的都是同一件事：複製一段原始碼，在【範本 | 網頁元素 | 加入網頁元素 | HTML/JavaScript】（Template/Page Elements/Add a Page Element/HTML/JavaScript）的對話框中貼上這段原始碼，修改標題，儲存變更。

就這樣。自己寫說明都覺得寫得很無奈，大概只有我這種笨蛋寫給笨蛋看。不過，這一招就是為了讓你加入更多的功能到側邊欄位去。一些常見的功能，像是相簿、站內搜尋、留言板、計數器、訂閱部落格的小按鈕等等，這些功能的語法都不必自己寫，不少網站或高手的部落格它們就會釋出這些功能的語法，你要做的只是到那個網站註冊或輸入相關的資訊，它就會產生一段原始碼給你，你只要複製這段原始碼，利用【範本 | 網頁元素 | 加入網頁元素】中【HTML/JavaScript】這個元件，在對話框中的內容貼上這段原始碼，改改標題，就搞定囉。

用這一千零一招，你可以試著連到下面幾個網站或部落格，註冊或輸入相關資訊，取得所需功能的原始碼，試試看在側邊欄位上加入這些小功能。熟悉作法之後，以後逛別人部落格，看到有趣的功能，就多留心一下，很多功能都是這樣就可以加進去的。

Blogger新手入門二部曲－一千零一招篇

即時的『最新文章』

Beautiful Beta－Widgets & Downloads (Recent posts widget)

即時的『最新回應』

『訂閱資訊』：下列網站可以加些訂閱小按鈕在部落格上，方便讀者訂閱你的部落格。

Bloglines－Buttons For Your Blog
Addthis－GET THESE WIDGETS!
Feedburner－Feedburner需要註冊，然後再取得訂閱部落格小按鈕的語法。這是一個英文的網站，不過提供了Blogger專屬的說明文件，看看圖示跟著做就可以了。

『Blog搜尋引擎』

Abin's Tech Note－內嵌搜尋引擎來做 Blog 的全文搜尋 (Blog Search)
Technorati－Searchlet
Beautiful Beta－Widgets & Downloads (Search widget)

『瀏覽人數統計』/『網站資訊』

Histats－Histats也是需要註冊的網站，註冊完，選個喜歡的計數器樣子，就可以產生所需的語法。

『留言板』

Cbox－需要註冊，才能取得留言板的語法。
Shoutmix－需要註冊，才能取得留言板的語法。

『我的相簿』

Flickr－若已有一個Flickr帳號，可以使用Badge在側邊欄位顯示你的Flickr Badge。
Picasa－一樣用Gmail帳號(還真是好用，所有Google家的東西都可以玩)，就可以啟用Picasa網路相簿，Beautiful Beta在Widgets & Downloads (Picasa Albums Widget)提供讓相簿嵌入部落格的小功能，值得試試。

就這樣，善用這一千零一招，就很夠用了，一般BSP提供的部落格功能也差不多是這些。許多社群網站提供的工具，也幾乎都用類似的方式就可以加進部落格中。所以，用Blogger來寫部落格，其實沒有想像中困難吧!

不過，還是有一些功能，像是在文章末加入書籤網站圖示以方便讀者收藏文章、將範本改成多欄位的版面等等，是必須透過【範本 | 修改HTML】（Template/Edit HTML）才能做到。但是，別擔心自己不懂語法，當然，如果因此有動機去學學也不錯。畢竟越熟悉語法，越有能力作修改。不過，即使HTML語法有看沒懂，也沒關係。網路上真的有許許多多的高手，不吝提供他們的知識經驗，若能善用這些教學資源，一步一步照著做，多嘗試，一樣可以搞定的。而且，能盡情改造部落格的自由度，才是Blogger比較吸引人的原因，不是嗎?

在Blogger新手入門三部曲－修改HTML篇，我盡量把我做過的修改列出來，在Blogger教學資源彙整，我也把這陣子我覺得對我幫助很多的網站羅列下來，一來自己日後可以回頭看，二來希望能給跟我一樣初入門者作為參考。再者也算是感謝這些提供教學資源的作者囉。

Blogger新手入門首部曲(基本設定篇)

2007-08-21T17:57:00.000+08:00

Blogger很容易申請，如果你有一組Gmail帳號、密碼，按指示的步驟，三分鐘內你就有一個部落格可以開始發佈文章了。但令人傻眼的是，側邊欄位上除了關於我、文章彙整，沒有一般部落格常見的功能，像是最新文章、最新回應、最愛連結、我的相簿等等。

不過，別望之卻步，也別急著改用其他BSP (Blog Service Provider)服務。網路上許許多多的高手其實提供了很多有用的工具和資訊，即使你跟我一樣，對HTML語法經常是有看沒有懂，但只要你會複製和貼上，再加上一點點恆心和毅力去搜尋相關資源，一樣可以玩出一個符合自己風格的部落格樣貌，而不只是套用固定版型、換換面板而已。相信這樣的自由度會讓你很心動，先去申請一個Blogger帳號吧!

Blogger新手入門首部曲－基本設定篇

假設你心動了，也已經有個帳號了，你的畫面可能是在控制主頁或張貼新文章的畫面。別急，在開始發佈文章之前，可以先認識一下Blogger的後台管理介面。後台管理介面主要分成三個Tab，【張貼】、【設定】、【範本】。

【張貼】當然跟發佈文章、管理回應有關。【範本】則與部落格呈現出來的樣子有關，可以把它想成一般BSP所謂的版型，若用生活化一點的比喻，可以把它想成是你的部落格的衣服、配件，換言之，在【範本】裡，你可以決定部落格的造型。你可以造型百變，而且不會影響到你的文章。至於如何把部落格塑形成你喜歡的樣子，正是一開始你需要花一點時間去摸索的。關於Blogger，更多的資訊你可以參考官方的說明文件。

不過，在開始改變部落格造型前，你應該先幫部落格做一些基本的設定。這些設定都在【設定】這個Tab裡。Blogger已經預設了一些最適合的設定值，所以要修改的並不多。我把我通常會做的修改列出來，你可以根據你自己的狀況調整。

【設定 | 格式 | 時區】（Settings/Formatting/Time Zone）
時區改為GMT+08:00台北，這樣發佈文章的時間才會是台灣的時間

【設定 | 格式 | 語言】（Settings/Formatting/Language）
語言指的是發佈文章的時間要用什麼格式呈現，我自己偏好英文的日期，所以會改成英文，這就看個人囉

【設定 | 意見 | 誰能發表意見？】（Settings/Comments/Who Can Comment?）
預設是現已註冊的使用者，我會改成任何人。

【設定 | 意見 | 上一頁連結】（Settings/Comments/Backlinks）
預設是隱藏，我會設成顯示。

【設定 | 意見 | 留言顯示驗證詞﹖】（Settings/Comments/Show word verification for comments?）
這是為了避免機器人垃圾留言，所以我會改成是Yes。

【設定 | 意見 | 意見通知地址】（Settings/Comments/Comment Notification Address）
如果有讀者留下意見，留下讓系統通知的Email，可以幫助你很快知道讀者的意見。

做完上面的基本設定之後，切換到【範本】這個Tab，這時已經可以開始幫自己的部落格改造一番囉。這些動作還是很基本，所以放在首部曲，一併說明。

【範本 | 挑選新範本】（Template/ Pick New Template）
Blogger在一開始建立blog時，只給很少的範本讓你選擇，所以現在你可以在【範本 | 挑選新範本】中，看看還有哪些選擇。如果，這些預設的範本，你都不喜歡的話，網路上也有不少範本可以下載。不過下載時要注意到該範本是否適用Beta版的Blogger。我自己覺得看起來很漂亮的範本是羊男實驗の咖啡館的Black Cat 2.0，這個範本還已經加了一堆功能，想偷懶一下是個好選擇:p

不過，我自己選的是預設的範本，Stretch Denim，一來自己亂改就當成練習，可以幫助自己了解整個範本的結構到底是怎樣，二來是因為我比較喜歡相對寬度，可以用到整個螢幕，也可以根據讀者的螢幕做調整。只是Blogger提供的範本多是兩欄式的，預設的Stretch Denim也是兩欄，所以我之後再稍稍加工，改成三欄。作法因為會動到範本的HTML，就留到在三部曲中詳述囉。

【範本 | 字型與顏色】（Template/Fonts and Colors）
選完範本後，你可以調整一下整個部落格的色系與字型。

上面在【範本】所做的改變，有點像幫你的部落格穿不同樣式、顏色的衣服。但你一定注意到了，當你【檢視Blog】時，你的側邊欄位上只有關於我以及文章彙整。

所以接下你要做的，是利用【範本 | 網頁元素 | 加入網頁元素】（Template/Page Elements/Add a Page Element），來增加側邊欄位的功能，如果要比喻的話，你可以想成是幫部落格戴上不同的配件。題外話，這些增加的小零件有一個詞叫widget，Blogger好像將之稱為「小裝置」，你如果有興趣，可以拿widget當關鍵字搜尋，也可以在看那些高手的部落格時順便點選widget或Hack標籤看看相關資源，會找到很多好玩的小東西喔。總之，利用【範本 | 網頁元素 | 加入網頁元素】，你就可以加上一般部落格都會有的一些小功能，像是最新文章、最新回應、最愛連結、我的相簿、分類標籤、留言板、計數器、訂閱資訊等等，還有一堆你在別人部落格上看到的小玩意兒。增加這些小功能有些技術難度比較高，有些比較簡單...我們當然是先從簡單開始…

新增網頁元素的作法都一樣，點選【範本 | 網頁元素 | 加入網頁元素】（Template/Page Elements/Add a Page Element），之後會出現【選擇新的網頁元素】對話框，在其中選擇合適的網頁元素後，點選【加入BLOG】，在對話框中依據說明修改內容，最後儲存變更。就會看到新增的網頁元素，你可以拖著它到喜歡的位置去。若不喜歡這個網頁元素，在【範本 | 網頁元素】中，點選該網頁元素右下角的編輯，就可以打開該網頁元素的對話框，點選移除網頁元素，就可以移掉囉。

後面列出來的這幾項最簡單，是我通常會先加上去的：

【範本 | 網頁元素 | 加入網頁元素 | 資料】（Template/Page Elements/Add a Page Element/About Me）
這個預設就已經有了，一樣按一下編輯，打開對話框，修改你想增加的內容。利用此元件就可以編輯『關於我/About Me』。

【範本 | 網頁元素 | 加入網頁元素 | 標籤】（Template/Page Elements/Add a Page Element/Labels）
加入標籤這個網頁元素後，如果你還沒有發佈任何文章，當你【檢視Blog】時，並不會看到這個欄位。但只要發佈文章後就會看到了。利用此元件可以編輯『分類標籤/Labels』。

【範本 | 網頁元素 | 加入網頁元素 | 連結清單】（Template/Page Elements/Add a Page Element/Link List）
利用此元件可以編輯『最愛連結/Link List』，把你喜歡的部落格通通加進去。

【範本 | 網頁元素 | 加入網頁元素 | 資訊提供】（Template/Page Elements/Add a Page Element/Feed）
利用此元件可以編輯『最新文章』或『最新回應』，最新文章的URL是http://YOURBLOG/feeds/posts/default，最新回應的URL則是http://YOURBLOG/feeds/comments/default。只要將YOURBLOG改為你自己部落格的域名就可以了。只是這裡有兩個問題，一是它更新很慢，發佈了新文章或有人回應，往往隔天才會正確顯示，二是它只能顯示最近的5個項目。網路上有一些變通的方法。你可以參考堯@部落格提供的Blogger最新回應程式產生器與Beautiful Beta在Widgets & Downloads中提供的Recent posts widget及Recent comments widget。

到這裡，差不多可以繼續前進到Blogger新手入門二部曲－一千零一招篇囉。

使用quickrpickr批次貼圖到Blogger

2007-08-17T16:36:00.000+08:00

老爸的部落格-樗樹，一直偏好貼很多張圖介紹老樹。

之前教他從 Flickr 貼圖至 Blogger，一張一張複製原始碼，再貼到部落格，對已經養成動輒需要用到數十張照片來解說一棵樹的老爸來說，實在太為難他老人家了。為了讓他少貼幾張照片，讓人家直接連到 Flickr 看就好，也教他用超連結連到相簿、還教了 flickrSLiDR，老爸又嫌這樣不會呈現文字描述，不能讓人深入了解照片的內容....還真坳不過他對介紹老樹的執著與熱情咧

今天剛好大豆剝落殼在 flickr三部曲-友善的Friendly.Flickr上傳篇中提到 quickrpickr，趕快試用了一下這個簡單好用的工具，果然正是老爸需要的好東西，乾脆把過程貼一貼，寫成教學文，讓老爸挑戰一下網路自學囉

先連上 quickrpickr ，其他就看圖說故事啦

a quickr pickr post