Tuesday, December 18, 2007

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

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


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


三杯雞

【材料】

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

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

Posted by shiouhhc at 12:08 AM 0 comments

Labels:

Sunday, December 9, 2007

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

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


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



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

壽喜燒豚丼蓋飯

【材料】

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

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

Posted by shiouhhc at 8:30 PM 0 comments

Labels:

Sunday, November 25, 2007

用食物寫日記

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

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

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

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

mosaic5x4

Posted by shiouhhc at 8:42 PM 1 comments

Labels:

Monday, August 27, 2007

Blogger教學資源彙整

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

建立基本概念

教學網站推薦：這幾個網站的教學文章很豐富，實用，重點是比較容易看懂。
Hacks 總覽：以下幾篇文章，作者整理列出自己建置部落格時所用到Hacks。
無腦安裝：如果不想花時間玩，可以安裝這個。
範本下載
實用Hacks/Widgets的教學文章
  • 增加第二側邊欄位
  • 顯示文章列表 (Table of Contents,ToC)
  • 收藏文章至共享書籤網站
  • 最新文章與最新回應
  • Favicon
  • Blog Search
  • 繼續閱讀
  • 其他：也很實用的Hacks/Widgets
  • 其他：Blog相關工具的教學文章
相關工具網站：提供內嵌或外掛的部落格工具，流量分析/工具按鈕/Badge/...

Posted by shiouhhc at 7:27 PM 10 comments

Labels: , ,

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

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這個網路元素到喜歡的位置，儲存。

Posted by shiouhhc at 1:23 PM 6 comments

Labels: ,

筆記：將Template改成三欄

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）中檢視效果，並搬動部分網頁元素到左邊欄位。

Posted by shiouhhc at 12:45 AM 2 comments

Labels: ,

Sunday, August 26, 2007

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

在文章末加上一些書籤網站的連結，可以讓讀者方便收藏文章。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'/>之前。

Posted by shiouhhc at 11:15 PM 0 comments

Labels: ,

筆記：Favicon

有些網址列前面有個小圖示，這就是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">

Posted by shiouhhc at 7:29 PM 0 comments

Labels: ,

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

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%;
}

Posted by shiouhhc at 6:25 PM 0 comments

Labels: ,

筆記：改變連結的CSS

在<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 }

Posted by shiouhhc at 5:31 PM 0 comments

Labels: ,

筆記：加入頁首圖片

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;
}

Posted by shiouhhc at 5:02 PM 1 comments

Labels: ,

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

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

blogger017

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

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

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

Posted by shiouhhc at 3:55 PM 0 comments

Labels:

Thursday, August 23, 2007

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

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

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

blogger015-1

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

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

即時的『最新文章』
即時的『最新回應』
『訂閱資訊』：下列網站可以加些訂閱小按鈕在部落格上，方便讀者訂閱你的部落格。
  • Bloglines－Buttons For Your Blog
  • Addthis－GET THESE WIDGETS!
  • Feedburner－Feedburner需要註冊，然後再取得訂閱部落格小按鈕的語法。這是一個英文的網站，不過提供了Blogger專屬的說明文件，看看圖示跟著做就可以了。

    • 現在很多人都註冊Feedburner，燒一個專屬的 RSS ，這主要是考量到萬一不滿意目前的部落格服務，搬家/換BSP時會流失原來已經訂閱你的部落格的讀者，所以，有心經營部落格的話，建議還是去註冊吧。如果你想多了解一些，Google 搜尋 "Feedburner 教學"，就會有點概念了。
『Blog搜尋引擎』
『瀏覽人數統計』/『網站資訊』
  • Histats－Histats也是需要註冊的網站，註冊完，選個喜歡的計數器樣子，就可以產生所需的語法。

    • 純粹是個人觀點，我覺得計數器的功能其實不太必要，因為在註冊Technorati、Feedburner時，這兩個網站就提供了很詳盡的分析，讓你對你的網站的瀏覽者或訂閱者的特性有些概念。而且既然有 Gmail帳號了，你就可以用同一組帳號、密碼在開始發佈文章後申請Google Analytics，也可以獲得很多網站流量的資訊了。但如果你還是很想有個計數器，我自己覺得Histats的計數器長得還不難看:p

    如果想知道自己的部落格有啥份量，你還可以加入部落格觀察、Technorati、Feedburner，都提供小貼紙的語法，讓你在部落格中顯示權威度、訂閱人數等資訊。最近HemiDemi也推出部落格工具包，其中黑米卡可以選示網站最受歡迎文章的統計。不過，重點應該還是先讓部落格內容豐富，加這些小東西才有意思吧?!
『留言板』
  • Cbox－需要註冊，才能取得留言板的語法。
  • Shoutmix－需要註冊，才能取得留言板的語法。

    • 關於留言板的功能，我也覺得這沒太大必要，畢竟讀者若有意見，每篇文章都已經有回應的功能了。不過，如果還是喜歡加個留言板，建議裝Cbox，理由當然也是它長得比較好看:p
『我的相簿』
就這樣，善用這一千零一招，就很夠用了，一般BSP提供的部落格功能也差不多是這些。許多社群網站提供的工具，也幾乎都用類似的方式就可以加進部落格中。所以，用Blogger來寫部落格，其實沒有想像中困難吧!

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

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

Posted by shiouhhc at 12:57 AM 1 comments

Labels:

Tuesday, August 21, 2007

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

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

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

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

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

blogger009

blogger010

blogger011

【張貼】當然跟發佈文章、管理回應有關。【範本】則與部落格呈現出來的樣子有關，可以把它想成一般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】，在對話框中依據說明修改內容，最後儲存變更。就會看到新增的網頁元素，你可以拖著它到喜歡的位置去。若不喜歡這個網頁元素，在【範本 | 網頁元素】中，點選該網頁元素右下角的編輯，就可以打開該網頁元素的對話框，點選移除網頁元素，就可以移掉囉。

blogger012

blogger013

blogger014-1

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

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

blogger016

【範本 | 網頁元素 | 加入網頁元素 | 標籤】（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新手入門二部曲－一千零一招篇囉。

Posted by shiouhhc at 5:57 PM 1 comments

Labels:

Friday, August 17, 2007

使用quickrpickr批次貼圖到Blogger

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

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

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

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

quickrpicker-001


quickrpicker-002


quickrpicker-003


quickrpicker-005


quickrpicker-006


quickrpicker-007


a quickr pickr post

Posted by shiouhhc at 4:36 PM 0 comments

Labels: ,

Subscribe to: Posts (Atom)