暮平的碎碎念: 7月 2009

2009年7月29日星期三

正式開站囉～

拖了這麼久，終於決定要以這個新站正式跟大家見面囉～

同時舊站的瀏覽人次也在昨天破2萬了，真是可喜可賀

也是在昨天，我接到研究所的錄取通知了，這就叫雙喜臨門吧XD

上面這張圖的靈感來自日本樂○製菓出的一款梅子糖包裝

這款梅子糖在日本已經有35年歷史了，還有很多姊妹產品喔

現在在台灣各大便利商店也買得到了（工商服務？）

有人看得出我畫的是誰嗎？

(閱讀全文)

手機軟體ICON設計

上完職訓班接到的第一個CASE

內容是手機理財軟體的ICON設計，共三款各20個ICON

這次的CASE令我再次深深感覺到客戶喜歡的東西跟我差很多

※以上圖案版權均屬於案主，嚴禁任何形式之轉載或盜用※

(閱讀全文)

2009年7月22日星期三

自以為天使的熟女一枚

最近啃了不少教學，所以挖出一張很久以前的草稿來上色

這是N年前辦美宣營的時候上課偷畫的……（身為主辦人這樣刻以嗎？）

看到背後麥克筆練習用的格線了嗎？XDD

之前整理舊資料的時候剛好翻到，所以就混在新稿中了

難得有一張B4的圖，想說趁機用一下Photoshop的自動對齊圖層功能接看看

結果怎麼試都不行，還是只能手動（淚）

掃進電腦翻轉過來一看，臉果然整個是歪的呢orz

幸好我是活在CG的時代～～（毆）

(閱讀全文)

2009年7月12日星期日

我在職訓班的日子

如先前所述，我跑去上了政府辦的職訓班

上課教的軟體其實我都接觸過，該會的功能也幾乎都會

但是沒有人這樣帶著做實際應用的練習，這些資訊就散在腦袋各處

該用到的時候根本沒意識到有這些東西在腦子裡

所以我還是覺得收穫良多

這陣子做的東西好像都比較花俏，不知道是哪根筋不對勁

以下課堂作業依製作日期排列

0508 DM - 心型練習+剪影應用（AI）

0513 塑膠卡片 - 漸變工具、自訂筆刷、相似色平行線應用（AI）

0516 人物插畫（AI）

0521 餅乾盒 - Q版人物應用（AI）

0521 紙袋 - 圖樣應用（AI）

0523 紙袋 - 破格應用（AI）

0523 扇子 - 文字效果應用（AI）

0526 扇子 - 煙火效果應用（AI）

0601 DM - 筆刷與圖層效果應用（PS）

0602 海報 - 團體習作（PS+AI）

這個海報是有故事的喔，就是那個機車騎士莫名其妙被流彈打中的新聞
這麼感性的東西我大概一輩子都想不出來

0604 酒類廣告 - 水滴效果應用（PS）

0612 文具廣告 - 外觀面板應用（AI）

0613 戒菸宣導廣告 - 煙霧效果應用（PS）

(閱讀全文)

【Blogger大改造】Lesson 11：其他小工具

本章將一些簡單的小工具整理出來介紹給大家

【11-1 將導覽列隱藏】

【11-2 加入Blogger登入按鈕】

導覽列指的是會出現在網誌最上面，供使用者登入或搜尋網站資料的工具列

在「版面配置／網頁元素／導覽列／編輯」中可進行導覽列的設定，共有四種配色可以選擇

但我們的網誌設計跟官方提供的導覽列不見得是相配的，因此這裡提供將導覽列隱藏的方法

在範本中的CSS區段插入以下語法

（<b:skin><![CDATA[到]]></b:skin>之間，在Notepad++軟體中顯示橘色的區段）

#navbar-iframe { height: 0px; visibility: hidden; display: none; }

本做法來自 0與1謎詭世界：隱藏 blogger導覽列(navbar)+進入後台的方法

【11-2 加入Blogger登入按鈕】

使用上面的方法隱藏導覽列後，登入管理介面就變得比較麻煩

因此可以加入一個按鈕，方便自己登入

方法一：使用官方按鈕

於「版面配置／網頁元素／新增小工具／標誌」選擇喜歡的標誌

方法二：使用其他的按鈕

利用「版面配置／網頁元素／新增小工具／Html/JavaScript」加入以下程式碼：

<a title="BLOGGER" href="http://blogger.com/"><img src="圖片網址" /></a>

圖片可以使用任何自己喜歡的，網路上也找得到網友精心設計的圖片

做法及圖片來源可參考 0與1謎詭世界：換個與眾不同的blogger button

【11-3 加入計數器】

Blogger並沒有提供計數器功能，所以如果你希望自己的網誌上顯示計數器

可以去申請一個放上來，這裡介紹我所使用的SiteStates

STEP 1：申請帳號，填入基本資料

STEP 2：進入「帳號管理」，新增部落格網址

STEP 3：點「修改」更改計數器顏色及樣式

STEP 4：點「原始碼」將程式碼複製後，貼入Html/JavaScript小工具

如果你只是自己想知道網站的流量，可以使用Google Analytics

這是Google提供的網站分析服務，功能相當強大

可參考 ajneok 亂芭樂：Google Analytics 幫你統計網站資訊

將產生的程式碼貼入範本中任一處即可

【11-4 訪客留言板】

除了文章回應，我們有時也需要一個獨立在文章之外的留言板

這個留言板當然不是自己做，只要去申請一個就可以了

此處以CBOX為例

STEP 1：點擊首頁上方的「sign up」

STEP 2：輸入網站相關資料及密碼

STEP 3：選擇喜歡的版型，在右邊可以預覽

STEP 4：點擊「Creat my Cbox!」

STEP 5：將產生的程式碼複製起來，貼入Html/JavaScript小工具

【11-5 課外閱讀】

0與1謎詭世界：隱藏 blogger導覽列(navbar)+進入後台的方法

換個與眾不同的blogger button／加入Counter 計數器

BaiHwaHwa＊白花花：[分享] SiteStates免費計數器

ajneok 亂芭樂：Google Analytics 幫你統計網站資訊

電腦玩物：Google Analytics 各種流量統計數據對部落格有什麼意義？

硬是要學：[新訊看板] 新版Google Analytics 初體驗（介面+功能簡介）

(閱讀全文)

【Blogger大改造】Lesson 10：共享書籤及推文按鈕

之前在【Lesson 6：加入版權宣告】中曾提過「網摘、引用、連結」的概念

也就是利用共享書籤或分享連結等方式分享好文

本章所要講的是如何在文章中加入按鈕

讓讀者可以透過這些按鈕快速地收藏或分享你的文章

【10-1 加入共享書籤的按鈕】

【10-2 加入噗浪與Twitter推文按鈕】

【10-3 按鈕圖片要放在哪裡？】

【10-4 課外閱讀】

【10-1 加入共享書籤的按鈕】

STEP 1：在範本中找到<data:post.body/>，在後面加入這段語法：

（如果你是直接在Blogger後台做這個動作，請勾選「展開小裝置範本」）

<b:if cond='data:blog.pageType == "item"'> <table border="0"><tr>&lttd>收藏本文：</td><td>

「收藏本文：」可改為其他你想顯示的文字

STEP 2：將各家書籤語法加入其後（以下是我有用到的）：

<!-- HEMiDEMi -->
<a expr:href='"http://www.hemidemi.com/user_bookmark/new?title=" + data:post.title + "&ampamp;url=" + data:post.url' target='_blank' title='加入HEMiDEMi分享書籤'><img alt='HEMiDEMi個人書籤' border='0' src='圖片網址'/></a>
<!-- MyShare智邦網摘 -->
<a expr:href='"http://myshare.url.com.tw/index.php?func=newurl&ampamp;url=" + data:post.url + "&ampamp;desc=" + data:post.title' target='_blank' title='加入MyShare分享書籤'><img alt='MyShare個人書籤' border='0' src='圖片網址'/></a>
<!-- Delicious -->
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&ampamp;title=" + data:post.title' target='_blank' title='加入Del.icio.us分享書籤'><img alt='Del.icio.us個人書籤' border='0' src='圖片網址'/></a>
<!-- DiggIt -->
<a expr:href='"http://digg.com/submit?phase=3&ampamp;url=" + data:post.url' target='_blank' title='DiggIt!'><img alt='DiggIt!' border='0' src='圖片網址'/></a>
<!-- google -->
<a expr:href='"http://www.google.com/bookmarks/mark?op=add&ampamp;bkmk=" + data:post.url + "&ampamp;h= " + data:post.title' target='_blank' title='Add to Google'><img alt='google' border='0' src='圖片網址'/></a>
<!-- Udn -->
<a expr:href='"http://bookmark.udn.com/add?f_TITLE=" + data:post.url + "&ampamp;title=" + data:post.title' target='_blank' title='Add to Udn'>&lti;mg alt='Udn' border='0' src='圖片網址'/></a>
<!-- funP -->
<a expr:href='"http://funp.com/pages/submit/add.php?url=" + data:post.url + "&ampamp;s=" + data:post.title' target='_blank' title='funP'><img alt='funP' src='圖片網址' border='0'/></a>

STEP 3：最後加入以下語法

</td></tr></table> </b:if>

做法來自　BaiHwaHwa＊白花花：[分享] 替自己的blogger加上書籤 PartII

按鈕之間如果太擠，可在範本中找到.post img {

於其後加入padding:4px;（數字越大間隔越大）

【10-2 加入噗浪與Twitter推文按鈕】

在跟書籤語法相同的位置插入以下兩段語法

<a expr:href='"http://plurk.com/?status=" + data:post.url + " " + "(" + data:post.title + ")"' target='_blank' title='推文至plurk' ><img src='圖片網址' style='border:0; weight:16px; height:16px;'/></a>

<a expr:href='"http://twitter.com/home?status=" + data:post.title + data:post.url' target='_blank' title='推文至twitter' ><img src='圖片網址' style='border:0; weight:16px; height:16px;'/></a>

語法來自　Not My Business：在Blogger文章中放置噗浪與twitter推文按鈕

【10-3 按鈕圖片要放在哪裡？】

你可以把圖片放在可外連的圖片空間

在免費資源網路社群可以找到許多免費的圖片空間

但是因為我個人不喜歡檔案分散在不同地方

所以我把所有網誌中使用的圖片都放在Picasa網路相簿中

上傳後在圖片上點右鍵「複製圖片網址」即可得到該圖片的網址

提供大家參考

【10-4 課外閱讀】

BaiHwaHwa＊白花花：[分享] 替自己的blogger加上書籤 PartII

0與1謎詭世界：單篇文章加入共享書籤(Social-Bookmarks)

Not My Business：在Blogger文章中放置噗浪與twitter推文按鈕

在每篇文章底端放置各大共享書籤 for blogger／各大共享書籤代碼

免費資源網路社群

(閱讀全文)

【Blogger大改造】Lesson 9：文章回應的調整

【9-1 基本管理】

【9-2 內嵌回應欄位的尺寸調整】

【9-3 作者回應與一般回應的區別】

【9-4 將回應編號】

【9-5 課外閱讀】

【9-1 基本管理】

回應欄的設定位在後台的「設定／意見」

比較重要的設定在【Lesson 2：Blogger介面基本操作】已經提過，這裡稍微再做個補充：

「設定／意見／意見欄訊息」中填寫的文字，將會出現在回應欄位上方

這個區塊可以使用一些簡單的Html標籤，如：

<b>粗體</b> <i>斜體</i> <a href="網址">顯示文字</a>

至於留言的刪除，只要點擊該回應中的垃圾桶圖示

進入刪除意見的網頁後，可選擇是否永久刪除該回應

如果沒有選擇「永久刪除」，則如下圖會出現「此文章已由網誌管理員移除」

如果選擇永久移除，該回應就不會在你的網誌留下任何痕跡

【9-2 內嵌回應欄位的尺寸調整】

當你在「設定／意見／意見欄位置」中選擇「已內嵌下列文章」時

輸入回應的欄位會直接出現在文章下方

但是預設的尺寸很小，擺在文章下面不太好看，修改方法如下：

首先在範本中找到.comment-form {這一行，然後在下方加入

max-width: 寬度 !important; width: 寬度 !important;

寬度可隨自己高興，我的是580px，給大家參考

本做法來自 Abin's Tech Note：內嵌的文章留言 (Embedded Comment Form)

另一做法 0與1謎詭世界：修改嵌入式留言欄的寬度
（僅改變留言欄寬度，意見欄訊息還是會在原來的位置換行）

【9-3 作者回應與一般回應的區別】

Blogger並沒有「作者回應」的機制（我記得我剛開始用Xuite時也沒有）

這樣不僅作者的回應不容易被注意到，萬一遇到有心人冒用作者名義回應那就麻煩了

跟之前一樣，修改前記得備份

STEP 1：首先在範本中找到這一段：

<dl id='comments-block'> 中間夾很多東西 <dl>

STEP 2：把程式碼覆蓋上去

這部份我找到幾種不同的做法，其中白花花和Abin的做法對於作者身份的驗證是比較嚴格的

BaiHwaHwa＊白花花：[分享] 終於研究成功的提高Blogger作者回應的識別度

Abin's Tech Note：作者和一般回應的標示區別 (Author comment highlighting)

我個人用的是Abin的做法，連作者顯示名稱的樣式都改了

把文章中的程式碼貼在指定位置就行了

STEP 3：在範本的CSS區段中插入作者回應的CSS樣式

（<b:skin><![CDATA[到]]></b:skin>之間，在Notepad++軟體中顯示橘色的區段）

以下是我使用的作者回應樣式，可依需要自行修改：

#comments-block .author-comment { background: #DEE6EE; color: #5d7da6; padding:5px; }

【9-4 將回應編號】

Blogger無法針對特定留言進行回應，要是留言一多挺不方便的

有了編號不僅討論起來比較沒有障礙，先來後到的次序也清楚得多

修改前記得備份（如果你是直接在Blogger後台做這個動作，請勾選「展開小裝置範本」）

STEP 1：在範本中的<head>區段（</b:skin> 與</head> 之間）插入如下這段JaveScript：

<script type='text/javascript'> //<![CDATA[  var CommentIndex = 0, CommentPostID = ''; function ShowCommentIndex(PostID) { if (CommentPostID != PostID) { CommentIndex = 0; CommentPostID = PostID; } document.write(++CommentIndex); } //]]> </script>

STEP 2：找到以下段落

<dd class='comment-footer'> <span class='comment-timestamp'> <a expr:href='"#comment-" + data:comment.id' title='comment permalink'> <data:comment.timestamp/></a> <b:include data='comment' name='commentDeleteIcon'/> </span> </dd>

STEP 3：將紅色段落插入如下位置

<dd class='comment-footer'> <span class='comment-timestamp'> <a expr:href='"#comment-" + data:comment.id' title='comment permalink'> <data:comment.timestamp/></a> <b:include data='comment' name='commentDeleteIcon'/> </span>  | <data:commentLabel/> # <script type='text/javascript'> ShowCommentIndex('<data:post.id/>'); </script> </dd>

本做法來自 Abin's Tech Note：增加文章留言回應的編號 (Show Comment Index)

另一做法 0與1謎詭世界：設定留言回應編號，讓部落格互動更活潑
（比較漂亮，但似乎會動到Abin版的作者回應設定，因此不建議）

【9-5 課外閱讀】

0與1謎詭世界：Blogger留言視窗的設定／修改嵌入式留言欄的寬度

設定留言回應編號，讓部落格互動更活潑

Abin's Tech Note：作者和一般回應的標示區別 (Author comment highlighting)

內嵌的文章留言 (Embedded Comment Form)

增加文章留言回應的編號 (Show Comment Index)

BaiHwaHwa＊白花花：[分享] 終於研究成功的提高Blogger作者回應的識別度

(閱讀全文)

2009年7月11日星期六

【Blogger大改造】Lesson 8：繼續閱讀功能

其實繼續閱讀是我第一個做的改造，因為對我來說繼續閱讀是個必要的功能

如果弄不好繼續閱讀，我可能就會放棄Blogger了

如果你跟我一樣很龜毛，非得每篇文章都要自訂摘要

那不管哪一種做法在寫文的時候都必須加入供系統辨識的標記才行

這一點跟我之前用的Xuite比起來確實是麻煩了點

但無論如何，開發出這些做法的網友們還是很偉大～

【8-2 繼續閱讀懶人加強版】

這是目前我看過功能最強大的，但我並不是用這個方法

這個方式安裝比較方便，可調參數也很多

不過感覺上部落格的開啟速度好像會比較慢

繼續閱讀懶人加強版：

[BLOGGER]繼續閱讀懶人加強版最新版本 v2.2.1(2009.5.8)

[BLOGGER]繼續閱讀懶人加強版 - [版本2.x]安裝教學

[BLOGGER]繼續閱讀懶人加強版 - [版本2.x]參數設定說明

[BLOGGER]繼續閱讀懶人加強版 - [版本2.x]常見問題Q&A

【8-3 土法煉鋼法】

首先請記得備份範本

STEP 1. 在範本中找到]]></b:skin>，在後面貼上以下程式碼：

（如果你是直接在Blogger後台做這個動作，請勾選「展開小裝置範本」）

<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> span.fullpost {display:inline;} </style> <b:else/> <style type='text/css'> span.fullpost {display:none;} </style> </b:if>

STEP 2. 再找到<data:post.body/>，在後面貼上以下程式碼：

<b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url'>(繼續閱讀)</a> </b:if>

「(繼續閱讀)」可改成任何你希望出現在摘要之後的文字，也可用圖片取代

STEP 3. 編輯文章時進入程式碼編輯畫面，加入以下程式碼：

<span class="fullpost"> 要隱藏的文字 </span>

把不希望在首頁顯示的部份夾在<span class="fullpost">和</span>之間

一篇文章可以隱藏超過一個段落，因此摘要不一定非得是最前面的文字

做法來自　BaiHwaHwa＊白花花：[分享] 在blogger實現繼續閱讀的作法

【8-4 課外閱讀】

繼續閱讀懶人加強版

BaiHwaHwa＊白花花：[分享] 在blogger實現繼續閱讀的作法

(閱讀全文)

【Blogger大改造】Lesson 7：RSS訂閱與FeedBurner

【7-1 什麼是RSS？】

【7-2 為Blogger加上訂閱按鈕】

【7-3 FeedBurner—專屬的永久RSS Feed網址】

【7-4 依標籤個別訂閱RSS】

【7-5 課外閱讀】

【7-1 什麼是RSS？】

RSS是一種資訊提供服務，當我們對某個網站進行訂閱的動作

這個網站更新時，我們的RSS閱讀器就會顯示最新的內容

不必一個個檢查自己感興趣的網站是否有更新

訂閱RSS的工具可以是軟體，如RssReader、Snarfer等

或是Google提供的Google Reader線上訂閱

更可以使用Gmail訂閱，讓RSS通知訊息直接寄到你的信箱喔！

至於訂閱的對象，無論是部落格、新聞還是搜尋結果

只要對方有提供RSS訂閱都可以即時得到更新通知

【7-2 為Blogger加上訂閱按鈕】

最簡單的方法就是新增一個小工具，選擇「訂閱連結」

但如果你不喜歡官方的訂閱圖示，方法也不難

只要把下面這段程式碼貼入Html/JavaScript小工具中，記得改成自己的網址

<a href="你的部落格網址/feeds/posts/default" target="_blank"><img border="0" src="圖片網址"/></a>

【7-3 FeedBurner—專屬的永久RSS Feed網址】

FeedBurner也是一項Google旗下的服務，你可以自訂一個屬於自己的RSS Feed網址

而且就算你的網誌搬家了，只要到FeedBurner網站修改設定

你的訂閱者依然會繼續收到你的最新文章，不需要通知他們更改網址

此外你可以在該網站查看有關自己的訂閱者與到訪者的分析

諸如人數的變化、地區分佈、甚至使用的RSS閱讀器等等

使用方式可見馬修的研究室部落格：

教學:申請FeedBurner的E-mail訂閱RSS功能

教學:使用FeedBurner的RSS訂閱人數小貼紙

申請完FeedBurner的訂閱網址後，要記得到Blogger的後台去進行設定：

這樣Blogger才能跟FeedBurner的資訊做整合

【7-4 依標籤個別訂閱RSS】

有時候我們逛某個部落格只對特定的類別感興趣

這時可能就會希望只訂閱該部落格的某個標籤

怎麼在部落格加上這樣的個別訂閱按鈕呢？

這個動作需要修改範本的程式碼，所以請先下載完整範本做備份喔

首先在範本中找到下列這段程式碼：

（如果你是直接在Blogger後台做這個動作，請勾選「展開小裝置範本」）

<b:widget id='Label1' locked='false' title='標籤小工具的標題' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url'><data:label.name/></a> </b:if> (<data:label.count/>) </li> </b:loop> </ul>

然後加入這一段程式碼：

<a expr:href='"http://www.blogger.com/feeds/你的blogID/posts/default/-/" + data:label.name'><img src='RSS圖片網址'/></a>

如果你希望RSS按鈕出現在標籤名稱之前

就把它加在<b:if cond='data:blog.url == data:label.url'>前面

若想跟我一樣放在標籤數量後面，就加在(<data:label.count/>)後

其中blogID就是你在Blogger管理後台時，上面的網址出現的數字，例：

http://www.blogger.com/rearrange?blogID=#

blogID=後面的數字就是你的blogID

做法來自 Not My Business：為每個標籤Label個別加上RSS for Blogger

【7-5 課外閱讀】

軟體王：什麼是RSS？

重灌狂人：在Gmail中訂閱RSS文章！／Google Reader也推出中文版囉！ (線上RSS閱讀器)

馬修的研究室部落格：

教學:申請FeedBurner的E-mail訂閱RSS功能／教學:使用FeedBurner的RSS訂閱人數小貼紙

0與1謎詭世界：申請FeedBurner服務，感恩我的讀者

Not My Business：為每個標籤Label個別加上RSS for Blogger

(閱讀全文)

【Blogger大改造】Lesson 6：加入版權宣告

【6-1 前言】

【6-2 創用CC授權條款】

【6-3 網摘／引用／連結／不轉載】

【6-4 課外閱讀】

【6-1 前言】

網路基本上是個以「分享」為前提的世界

尤其當我們決定在網路上建立一個屬於自己的發表平台

任何人都可以來到這個平台閱讀我們的文章甚至與我們交流

而我們自己也經常會在「別人的平台」這麼做

當你讀到一篇見解精闢或是讓人笑到流淚的文章，是不是會很想自己收藏或是分享給朋友？

在這個時候「合理的規範」就變得相當重要

作為一個部落客，你也不希望明明很多人看過並喜歡你的文章，卻沒人知道是你寫的吧？

「版權宣告」這東西不僅提醒你的讀者，也提醒自己尊重他人的智慧財產權

嚴格說起來，做這樣的動作並沒有任何難度

但卻是很重要的

【6-2 創用CC授權條款】

「創用CC」即Creative Commons的簡稱

其主要目的是建立一套既能保護創作者又具有一定彈性的著作權機制

舊有的著作權觀念是不允許任意使用他人著作的

而這顯然是不符合今日網路的「分享」性質

（其實創用CC不限於網路使用，這裡只是以網路的例子做說明）

因此「創用CC」所提倡的是在特定條件下使用他人著作的機制

即「保留部份權利（Some Rights Reserved）」的作法

例如我所使用的「創用CC 姓名標示-非商業性-禁止改作 2.5 台灣」條款

即是在標示作者姓名、非商業使用與禁止改作的條件下進行分享

要怎麼在自己的部落格中放置創用CC的授權標章呢？

首先來到創用 CC ─ Creative Commons Taiwan，點選「作品授權」

接下來選擇是否允許使用於商業目的、是否允許改作，並填入你的名字和網址等資訊（非必要）

按下「選擇一份授權條款」，再選擇一個喜歡的圖示

你會看到底下出現一段程式碼，把它複製起來

照上一章的做法貼到Html/JavaScript小工具裡，擺到喜歡的位置就完成囉。

【6-3 網摘／引用／連結／不轉載】

這個運動（算嗎？）並不像創用CC那麼正式，充其量是個「宣言」

其宗旨在推廣以網路書籤、引用或連結方式進行分享而不轉載全文

避免轉載文章造成複製品氾濫以及「分身」喧賓奪主的情形

網摘：使用如HEMiDEMi、MyShare、FunP等書籤網站，保留自己喜歡的文章網址，還可以加上
說明、標籤等等並分享給他人

引用：針對他人的文章發表心得看法並註明出處，許多部落格都有提供發送引用通告的功能，可以
利用引用網址通知原作者（但是Blogger好像沒有）

連結：分享文章連結網址

Jas9 Taipei 設計工作日誌：網摘、引用、連結，不轉載

以上網址提供了網摘／引用／連結／不轉載的提醒貼紙，選擇喜歡的尺寸拷貝原始碼即可

【6-4 課外閱讀】

創用 CC ─ Creative Commons Taiwan

Jas9 Taipei 設計工作日誌：網摘、引用、連結，不轉載

Christabelle的藝想世界：[網路] 轉錄？引用？傻傻的分不清楚／[網路] 我重視網路禮儀

異多元天蠍洞：什麼是『書籤網站』！？告訴您什麼是網路書籤。

(閱讀全文)

【Blogger大改造】Lesson 5：最新文章與最新回應

本章終於要正式開始進行Blogger大改造了

不過一開始先不要玩太難的，從初階的開始

【5-1 Html/JavaSsript小工具的使用】

【5-2 最新文章的做法】

【5-3 最新回應的做法】

【5-4 課外閱讀】

【5-1 Html/JavaSsript小工具的使用】

遇到能直接用這個工具做設定我都特別高興，因為真的很簡單

在「版面設置／網頁元素／新增小工具」新增一個Html/JavaSsript

接下來把程式碼貼進去就OK了，夠簡單吧？

前一章已經講過超連結圖片的程式碼，所以像這個應該可以自己做出來囉：

【5-2 最新文章的做法】

剛開始用Blogger一定覺得哪裡怪怪的，好像少了什麼吧？

其中「最新文章」和「最新回應」幾乎是大家都需要的

首先看看「最新文章」的作法

STEP 1. 新增一個Html/JavaSsript小工具

STEP 2. 到下面這個網頁把程式碼COPY起來貼上去

Abin's Tech Note：最新文章模組「終極版」

（當然文章還是要看一下，畢竟這是人家辛苦研究出來的東西，我只是做整理）

STEP 3. 視需要修改數值

其中紅色的兩行依自己需要修改

<script> var nPostStartIndex = 從第幾篇開始顯示; var nPostShow = 顯示幾篇文章;

就降，完成！

要注意的是，這個方法是以部落格的RSS Feed網址作為來源

所以如果你的部落格並未開放給所有人閱讀這個方法會無效！

同理下面的最新回應也是一樣喔！

【5-3 最新回應的做法】

對複製貼上的人來說做法其實都一樣，所以要對寫出這些程式碼分享給大家的人心懷感恩喔！

STEP 1. 新增一個Html/JavaSsript小工具

STEP 2. 到下面這個網頁把程式碼COPY起來貼上去

Abin's Tech Note：「最新回應」模組 (Recent Comments)

STEP 3. 視需要修改數值

其中紅色的兩行依自己需要修改

<script> var nCommentStartIndex = 從第幾篇開始顯示; var nCommentShow = 顯示幾篇回應;

【5-4 課外閱讀】

0與1謎詭世界：新增最新文章&最新回應

(閱讀全文)

2009年7月10日星期五

【Blogger大改造】Lesson 4：開始大改造之前

在不修改範本Html程式碼的情況下，Blogger能做的事情很有限

但是因為這一系列教學是寫給不懂Html語法的人看的，有些該注意的地方一定要先說

所以雖然我也很想趕快進入正題（再不快寫很多東西都忘光光啦），還是得先寫這一章

【4-1 備份備份再備份】

【4-2 註解的使用】

【4-3 工欲善其事，必先利其器】

作為一個什麼都不懂的新手，備份是很重要的

萬一改一改出問題了，還可以把修改前的範本撿回來用

怎麼備份？請到「版面配置／修改Html／下載完整範本」

我會把每個階段的範本都儲存一份，並且在檔名打上修改的部份

例：「01 原始範本.xml」、「02 繼續閱讀.xml」……

因為有時候不見得馬上就會發現問題，這樣做比較保險

要恢復修改前的範本，步驟就跟上傳範本一樣囉～

【4-2 註解的使用】

每次做了修改，請記得加上註解：

html、xml的註解：<!--我是註解-->     
      
CSS的註解：/*我是註解*/      
      
Javascript的註解：//我是註解

註解要加在哪裡？隨便（毆飛）

你可以把它擺在你加進去的程式碼前後，重點是讓你自己看得懂就對了

怎麼分辨加進去的是html、CSS還是Javascript？

看長相就知道，Html、xml就是<長這樣> 頭尾成對中間夾一大串 </長這樣>

Javascript就會有<script> 中間夾一些東西 </script>

CSS則是.長這樣{ 中間夾一些東西 }

【4-3 工欲善其事，必先利其器】

雖然Blogger本身有提供修改Html的介面，不過實在有點傷眼睛

Notepad++這個免費的軟體會清楚地標示出Html標籤的頭尾在哪裡

修改過的地方也會有不同的顏色標記，是很方便的輔助工具

下載範本之後用Notepad++編輯才不會看得眼花撩亂

編輯完記得另存新檔，副檔名是xml

除此之外記得用Ctrl+F來尋找要修改的程式碼，不要傻傻地大海撈針喔

【4-4 Html的基本概念】

一個網頁的程式碼會長這樣：

<html> 標示html的開始和結束 <head> 網頁表頭 <title> 網頁標題 </title> </head> <body> 網頁內容 </body> </html>

看得出端倪嗎？<html>後面不管接了多少東西，最後一定會以</html>作結

同理，<body>後面一定會有</body>，Html語法是頭尾成對的

除此之外，也一定是一層夾一層，用以前數學課的括弧來舉例就是這樣：

{大括弧[中括弧(小括弧)]}，不會是{大括弧[中括弧}(]小括弧)

所以如果你修改了程式碼並上傳後出現「我們無法剖析您的範本，因為它的結構不完整。請確定所有的 XML 元素均已正確關閉。」的錯誤訊息，可能就是你的程式碼少了結尾或結尾位置不對

【4-5 常用標籤認識】

這裡整理出編輯時常用到的標籤，知道一下比較方便，不用刻意記

有些常用的標籤是不用結尾的

<p> 段落 </p> <br> 換行（不用結尾） <hr> 水平線（不用結尾） <img src="圖片網址"/> 置入圖片（不用結尾）

<strong> 粗體 </strong> <em> 斜體 </em> <u> 底線 </u> <s> 刪除線 </s> <sub> 下標字 </sub> <sup> 上標字 </sup>

<center> 置中對齊 </center> <left> 靠左對齊 </left> <right> 靠右對齊 </right>

超連結的使用：

<a target="目標框架" href="目標網址">超連結文字</a>

目標框架就是開啟網頁的位置，不設沒有關係（把「target=」刪掉）

常見的設定是"_blank"，也就是另開新視窗，若要在同一個視窗開啟就是"_self"

要使用圖片超連結就把超連結文字改成「<img src="圖片網址">」

【4-6 什麼是CSS】

最後簡短的提一下CSS，CSS是用來定義Html文件中的一些樣式

比如我用CSS設定好我的內文字型、大小和顏色

那我每次新增一篇文章我的內文都是長這樣，不必每次都重新設定，例如：

#content { color: #000000; 色彩 font-family: Verdana,sans-serif; 字型 line-height: 1.3em; 行高 padding: 0 1em 1em; 邊緣空白 }

#000000的色碼代表黑色，也可以輸入black，使用色碼表可選擇顏色

CSS是以大括弧{}標示開始和結束，插入語法的時候要注意

紫貝殼網頁資源網：色碼表

關於CSS語法這裡有詳盡教學：OECSPACE - Css style 教學

【4-7 課外閱讀】

子曰：勿以惡小而不為：你也可以看懂Blogger的樣版原始碼

不思議惑星 Magical Star Blogger：網頁語法 html 基礎認識(圖文版)

OECSPACE：Css style 教學

0與1謎詭世界：

Blogger 新手基本技巧問答（二）

Blogger 新手基本技巧問答（三）

Blogger 新手基本技巧問答（四）

Blogger template模板教學課程---概說及基本結構

Blogger template模板教學課程---HTML內容架構

Blogger template模板教學課程---CSS外觀解說

如果你看完上面的文章很後悔跳進Blogger這個坑，你只想不花大腦就擁有一個部落格，那麼你可以試試懶人包，不過不保證結果：

Josh's Note：超級無腦安裝Blogger外掛功能

(閱讀全文)

【Blogger大改造】Lesson 3：文章發佈與WLW

本章開始正式進入文章的編輯與發佈

順便也介紹一下我的新歡—Windows Live Writer 離線編輯器

【3-1 Blogger的基本文章編輯功能】

【3-2 文章標籤的使用】

【3-3 WLW的設定】

【3-4 使用WLW編輯與發佈文章】

【3-5 目前發現的小缺陷】

【3-6 課外閱讀】

【3-1 Blogger的基本文章編輯功能】

跟大部分的部落格一樣，提供直觀撰寫與Html編輯的方式

當然如果你有厲害到直接編輯Html也不必看我的教學了吧

編輯功能說實話是滿陽春的

畫面中那段文字是「繼續閱讀」功能會用到的程式碼，後面的章節會提到

在「設定／格式／文章範本」中可以設定每篇文章預設要出現的內容

你也可以用來設定自己的簽名檔或是版權宣告等等

不過，因為我是使用離線編輯軟體，所以雖然設定了卻沒用到（毆）

【3-2 文章標籤的使用】

Blogger的文章分類使用的是「標籤」

「標籤」一直是Google極力推廣的概念，無論是Gmail、Picasa或Blogger使用的都是標籤

它和我們所習慣的「資料夾」、「分類」概念不同

同一篇文章可以有多個標籤，因此不會發生「這文章不知道該歸哪類好」的問題

利用這一點，適當地為文章設定多個標籤可以增加文章的曝光率

勾選要套用標籤的文章，然後選擇要套用的標籤或建立新的標籤

要注意的是，沒有被套用在任何文章的標籤並不會保留

所以不能先建立好所有的標籤等有文章的時候再套用

另外，已建立的標籤不能再進行編輯

如果要修改標籤，必須先移除套用在文章上的標籤再建立新的

【3-3 WLW的設定】

Windows Live Writer （以下簡稱WLW）是微軟推出的部落格離線編輯器

原本是針對MSN的部落格空間設計

沒想到微軟大發慈悲（？）開始支援其他部落格空間，真是佛心來的

不過大部分台灣的網誌服務並不支援（好像只有PIXNET支援的樣子）

要安裝很簡單，因為它已經跟MSN Messener的安裝程式包在一起啦！

只要安裝MSN的時候把WLW勾選起來就行囉～

安裝過程詳見：如何使用Windows Live Writer寫部落格？(WLW 離線編輯器)

安裝好之後，首先要依據指示設定你的部落格

如果第一次使用時沒有設定，可以點「部落格／新增部落格帳號」進行設定

設定好之後，由「部落格／編輯部落格設定」可進入修改

「編輯部落格設定／圖片」可以設定圖片上傳的位置

如果你有自己的FTP伺服器，可選擇「上傳圖片至FTP伺服器」

選擇「上傳圖片至我的部落格」的話，它就會自動上傳到部落格的相簿空間（有支援的話）

以Blogger來說，就會自動上傳到你的Picasa相簿（前提是你用的是Gmail帳號）

並且會隱藏起來，別人在逛你的相簿時是不會看到的

當你修改了部落格的範本，記得進「編輯部落格設定／編輯」點「重新整理主題」

WLW會下載你的部落格範本，你就可以直接在軟體中預覽到文章發佈後的樣子，很方便

另外在「工具／選項／編輯」中，可以設定自動儲存草稿的時間

這樣就不用擔心忘記儲存的時候編輯到一半當機了

WLW編輯過的文章在電腦中都會自動備份，也不必再煩惱備份問題囉

【3-4 使用WLW編輯與發佈文章】

設定完成後就可以開始編輯文章囉

上面那一排工具列的圖示大家都很熟悉，我想應該不用多做介紹了

最下面可以設定類別（用在Blogger的話就是標籤）

右下角可設定發佈日期，也就是可以預約發佈文章

右側會顯示最近編輯的文章，點「其他」可看全部（如下圖）

點左側的部落格名稱會連線到部落格下載上面的文章

選擇好文章按「確定」便可進入編輯

要插入圖片的時候只要把圖片拖進來即可

WLW的圖片編輯功能相當令人激賞，有許多樣式可套用

不費吹灰之力就可以把圖片弄得漂漂亮亮

點「進階」可進行更多設定

全部設定好之後，回「圖片」點擊「儲存設定值為預設值」

以後插入的圖片就會套用相同設定，包含大小、樣式、對齊方式、浮水印等等

在正式發表之前，可以先預覽一下文章貼出去後的效果

如果你在前面有做「重新整理主題」這個動作

你會看到預覽的畫面就跟你的部落格長得一模一樣，這點是WLW一個很棒的功能

編輯完成後點擊「發佈」就會把文章發表出去，圖片也自動上傳囉

【3-5 目前發現的小缺陷】

WLW是相當不錯的軟體，不過目前有幾個缺點希望未來微軟會改進

1. 字型與色彩設定不便

文字的字型和色彩、大小沒辦法像Word那樣直接用下拉式選單選擇，每次都得進對話窗做設定

2. 沒有文章範本

前面有提到，Blogger可以設定文章範本

WLW這麼好用的軟體卻沒有，這不太合理吧？（說穿了是我要用繼續閱讀比較麻煩啦）

3. 沒有水平線

我找了半天就是找不到水平線…之前用Xuite的時候都有

所以我現在用的是這個方法：

進入程式碼的編輯視窗，在想要插入水平線的地方打上「<hr>」

這樣就會出現水平線了（記得要打在「</p>」後面，不然會跟文字黏在一起）

【3-6 課外閱讀】

不思議惑星 Magical Star Blogger：3-1 Blogger建立文章教學影片

3-2 blogger文章標籤編輯應用教學影片

香腸炒魷魚：如何使用Windows Live Writer寫部落格？(WLW 離線編輯器)

(閱讀全文)

訂閱：文章 (Atom)

暮平的碎碎念

置頂公告

2009年7月29日星期三

正式開站囉～

手機軟體ICON設計

2009年7月22日星期三

自以為天使的熟女一枚

2009年7月12日星期日

我在職訓班的日子

【Blogger大改造】Lesson 11：其他小工具

【Blogger大改造】Lesson 10：共享書籤及推文按鈕

【Blogger大改造】Lesson 9：文章回應的調整

2009年7月11日星期六

【Blogger大改造】Lesson 8：繼續閱讀功能

【Blogger大改造】Lesson 7：RSS訂閱與FeedBurner

【Blogger大改造】Lesson 6：加入版權宣告

【Blogger大改造】Lesson 5：最新文章與最新回應

2009年7月10日星期五

【Blogger大改造】Lesson 4：開始大改造之前

【Blogger大改造】Lesson 3：文章發佈與WLW

最新文章

碎碎念標籤

一起碎碎念

過去的碎碎念

置頂公告

2009年7月29日 星期三

2009年7月22日 星期三

2009年7月12日 星期日

2009年7月11日 星期六

2009年7月10日 星期五

最新文章

碎碎念標籤

一起碎碎念

過去的碎碎念

2009年7月29日星期三

2009年7月22日星期三

2009年7月12日星期日

2009年7月11日星期六

2009年7月10日星期五