教你擁有達人級的部落格

留言版-ShoutMix 超‧詳細介紹

2009-03-07T23:45:00.001-08:00

在使用 Blogspot 的時候，一開始最先遇到的問題就是「留言版」。目前的 Blogspot 只有提供文章回應的功能，或者是 Google Friend 方式的留言版。但是，在大部份的使用者來說，Google Friend 的留言版，是不太友善的 ( 操作不易 ) 。所以，今天要介紹的是 Shout Mix 的側欄留言版系統。順便一提的是，許多教學對於 ShoutMix 的其他功能設定並沒有介紹，所以，這次我將在附錄的地方一起介紹。

首先，我們來到 ShoutMix! 的首頁，直接點選右上方的「Creat」字樣。

接著就會來到註冊的畫面。一樣把相關的資訊填入欄位。

按下「Continue」之後，就算註冊完成了。接下來則是選擇留言板的形式。基本上保留第一種就很實用了。選好之後點「Continue」。

這樣一切就都就續了。接下來先來到後台來設定一下其他的部份。點選 Control panel 字樣，就可以進入管理後台。

在後台，我們可以看到 ShoutMix! 的強大功能，我都已經翻譯好了，大家就直接看圖吧。

這邊我就帶大家一頁一頁看過，對內容有興趣的人可以再深入研究。首先就是「Get Codes」的部份，這部份就是我們所需要的。在這個頁面可以設定「Box」的寬度和高度，這邊我們先不更改它的設定，直接拿到程式碼，貼到側攔的小工具裡頭。

先來到 Blogspot 的後台，到達《版面設定》裡頭的《網頁元素》。點選側欄的「新增小工具」，並選擇「HTML/JavaScript」工具。在跳出的新視窗裡頭，標題填上「留言版」，內容則是貼上我們剛剛在「ShoutMix」拿到的程式碼。然後按下儲存。

回到首頁看看，留言版似乎太窄了，和整個面版配起來有點奇怪。

於是我們再來到後台，點選「留言版」這個小元件的「Edit (編輯) 」打開編輯，並把程式碼裡頭的「width」後頭的數字改成「230」。然後按下儲存。

改過之後，看起來是不是比較合身了一點呢？

附錄：ShoutMix! 後台其他選項。

2.Download Messages

3.upgrade shoutbox。ShoutMix 免費帳戶對於某些功能會有所限制，對於需要更多強大功能與自由性的使用者來說，升級服務也是一個選擇。

4.Logout 登出，這個不用說明了吧。

5.ShoutBox detail，包含使用者聯絡方法和更新密碼的功能。另外，要解除服務也是在這邊。

6.configuration，如翻譯的。最下面是升級帳號才有的功能，就不翻譯了。

7.Delete Message，並不能指定要刪除哪一篇留言，只能指定「保留」多少留言而已。

8.Website Lock，指定只在特定網域或網址使用此留言版，一樣是升級版專用。

9.export setting，所有在後台的設定，都可以在這邊下載。同時，匯入 / import 設定也是在這邊。

10.Style & color，設定 box 的配色，底部有預覽圖可以看。

11.Date & time，設定所在地和顯示格式。

12.Labels，就是針對box中的各個標籤做更改，也可以改成中文，下面的圖已經幫大家翻譯好了。

13.smilys，表情符號。如果覺得預設的符號不好看，ShoutMix 允許使用者自訂表情符號。免費用戶為 10 個，升級用戶為 500 個。

14Custom CSS，自訂整個留言版的 CSS，升級用戶專用。

15.Access control ，控制什麼人可以留言。

16.Ban Control，黑名單設置。這邊則是提供 IP 位址和網址過濾。

17.Name proction，保留名字。避免訪客使用的名字。升級者帳戶專用功能。

18.Protfanity words，過濾字，規定哪些字不可以顯示在留言版中。一樣是升級帳號專屬功能。

19.ShoutMix Linking，當你擁有超過一個以上的 Shoumix 留言版時，可以將留言版互相連結。一樣是升級使用者的功能。

好多圖要抓啊。想不到 ShoutMix 有這麼多功能啊！雖然有很多功能都要付費才能用，不過就免費用戶來說，也算足夠了。如果還是覺得不夠用，那就把錢砸下去吧！這樣說，ShoutMix 是不是該給我一些稿費啊？不然讓我抽成也可以~XD。

部落格教學，教你用 Blogspot 建構特色部落格，咱們下次見。( 越來越制式化的感覺。)

計數器

2009-03-07T01:18:00.001-08:00

再來，我們來談談計數器的功能。這個功能說大不大，說小不小。有的人的部落格裡頭也沒有訪客計數器這個東西。但是，對於經營一個部落格來說，是不是有訪客進來，以及訪客來訪的數量，也可以做為調整部落格內容的一個參考。

好的，這次我們要用的計數器是由 sitmeter 這個網站所提供的免費計數器。sitemeter 提供的計數器有什麼好呢？第一點，當然就是因為它是免費的 (哈！) 。第二點，就算是免費帳號，它也會在每個星期寄一封信給你，告訴你這個星期有多少人來參觀了你的部落格，平均停留的時間有多久。雖然是沒 Google Analytics 那麼詳細的分析，但也是夠用了。

首先，我們來到 sitemeter 的首頁。在首頁我們可以看到一個抖大的字樣“FREE！”，免費，那就是我們要的，把它點下去。

點下去之後，為了安全起見，sitemeter 還是會再跟你確認一次你要申請的服務是免費的還是付費的？這時候就不要跟它客氣了，點下在“FREE！”旁邊的 SIGN UP！(註冊)

註冊的第一步，就是填寫你的網站的相關資料。我知道，英文有點惱人，所以我幫大家翻譯好了。

網站資料填寫完之後，就是管理者的個人資料的部分了。性別的部份居然有滾軸可以向下？

上面的資料都填好了，就會來到最後確認的頁面。

確認資料都沒問題之後，就可以按下一步，完成註冊。下面這個就是完成頁面。完成了之後，我們馬上進入管理介面(manager)設定一下我們的計數器。

後台的部份，先選擇計數器的樣式。點選一旁的 “meter style”，這邊就可以選則計數器的樣式。我知道，選擇不是很多，但是，功能好最重要，不是嗎？

選好了之後，拉下來點選“select” 表示已確定。

再來就是拿取程式碼，點選側欄的“HTML code”項目，就會來到第二張圖的網頁。

這邊的 Site Meter JavaScript HTML 就是我們要的東西，把〈！—Site Meter -- 〉為開頭的程式碼全部複製起來。

再來回到我們部落格的後台，進到《版面配置》裡頭的《網頁元素》，計數器一般都是加在側欄的部份，所以我們在側欄的地方點一下《新增小工具》。

點選《新增小工具》之後，會跳出一個視窗，讓你選擇所需要的工具。這邊我們需要新增的工具是《HTML/JavaScript》，所以就在那個項目旁點下加號《+》。

隨著點選《+》，新增小工具的視窗會關閉，並出現該新增工具的詳細設定。這邊我們就打上“計數器”，再把剛剛從 sitemeter 上複製的程式碼貼到“內容”的部份。然後按下《儲存》。

新增完成之後，我們會看到《計數器》這個小工具出現在側欄的最上頭。但是，我們不想要計數器在堆上頭，計數器應該是要在底部偷偷紀錄才是。所以，我們就用滑鼠，按住《計數器》這個小工具，把它“拖”到最下頭來吧。

當計數器乖乖來到最下層之後，把畫面拉到最上面，不要忘記要按下最後的儲存喔！

這樣子一切就大工告成了！！趕快回到首頁去看看吧。

教你建構特色 Blogspot ，下次見。(這樣感覺好像什麼育教節目。)

p.s 註冊完 sitemeter 之後，會在信箱收到一封信，裡頭就是寫著 sitemeter 的帳號密碼，以後如果有要更改計數器的設定，就是用這組帳號密碼登入喔！

Blogspot 網頁元素

2009-03-03T23:25:00.001-08:00

延續上一篇未完成的首頁中文化，上次提到剩下的兩個部份「Labels」、「Archives」是網頁元素，更改的方式不一樣，反而比較簡單。我們來到《版面配置》中的《網頁元素》的頁面，就可以看到下面的頁面，這就是整個部落格的配置圖。

把畫面往下拉，我們就可以看到「Labels」、「Archives」這兩個元素。

而要中文化有多簡單？點一下「Labels」元素旁邊的編輯，會跳出一個元素的設定視窗。

將標題的「Labels」改為「標籤」，再按儲存就可以了。同樣的「Blog Achives」改為「網頁存檔」。成功後的網頁配置就會變成如下，可以看出已經變成中文了。

我們看一下最後的結果吧。

是不是全都中文化了呢！範本教學到這邊正式告一段落！後面將會教大家，如何用 Live writer 以所見即所得的方法新增文章、比無名相本酷絢一百倍的 flash 相本、微形部落格 twitter 、shoutMix 留言系統、用部落格賺錢的方法。請各位朋友期待後面的課程喔

一步步套用新範本

2009-03-03T23:00:00.001-08:00

剛剛我們已經選定了範本，並已經準備好了該範本的 xml 檔。現在，來到《修改 html 》的頁面，點選瀏覽電腦裡頭的範本檔。選擇我們剛剛下載的那個 xml 檔案。

上傳完成後會出現提示，表示之前的元件將會被刪除。因為我們的部落格是剛設定好的，所以就算不見了也沒關係。

按下確認之後，範本就會被套用上去了！接下來按下檢視網誌看看結果吧。

很好，面版套用得很好，沒有什麼大問題。目前的問題就只有中文化的問題而已。因為，我們是中文的使用者，當然也要把介面弄成中文，感覺上才會比較友善啊！所以，接下來就來做一些細部調整吧！

我們來看一下剛剛那張圖，先圈出需要中文化的部份：

看來要改的部份還滿多的。先一步一步來，我們先針對上面的「分頁標籤」下手。來到《版面設計》裡頭得《修改html》部份：

點一下 html 程式碼的部份，然後按下 ctrl+F ，或是從瀏覽器上選擇編輯=>尋找。然後輸入我們要中文化的文字「Home」，然後按「下一步」。

這邊就找到了

<li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>

而我們要改的，就是把 Home 改成中文的「首頁」。後頭的 Posts RSS、Comments RSS、Edit 也照樣子更改。Post RSS = 「訂閱文章」，Comments RSS = 「訂閱回應」，Edit 的部份，則是範本中讓使用者自定功能的部份。這邊可以先空著，等之後我們加入相本後再回來更改。

這樣上面的分頁部分是不是就變中文啦！但是，文字好像有一點不清處？因為中文和英文的字型本來就會有一點差異，這時候我們再把分頁標籤的字型給加大一點。所以我們找程式碼關於分頁標籤的 CSS ，通常分頁標籤的部份都會歸在 Main Menu 裡頭，而分頁標籤的程式是被 <li></li> 給包住，所以我們要修改的 CSS 將會是在 Main Menu 中的 li 設定。這邊我們將 font-size 的選項設定為 15px; 就是將字型大小設定為 15 px 的意思。

更改完之後，先不要儲存，按下預覽來看一下效果吧！字是不是變得比較大，比較方便瀏覽了呢？這時候，我們就可以按下儲存了。

再來我們要更改的部份，就是側欄 sidebar 當中，有一堆看不懂的字。

修改方法與分頁一樣，我們先搜尋框框內的字。

再將裡面改成你想要的文字。這邊我把它改成「Noid 推廣 Blogspot 的網站，這邊有盡可能詳細的教學，讓你慢慢一步一步，學習如何在 Blogspot 建立一個有聲有色與眾不同的部落格。老話還是一句，師父領進門，修行就要靠個人了。善用 Google，你也能擁有更有特色的部落格！」

寫好後，一樣先預覽過，沒問題就可以儲存範本囉。接下來看看還有什麼地方要中文化的吧。

剩下的就是 sidebar 的 Labels 和 Archives 了，這部份是屬於元件的部份，在下一個章節我們再介紹喔！

Blogspot 範本說明

2009-03-03T21:12:00.001-08:00

Blogspot 的面版，稱之為「範本」，英文為「Templates」。設定Blogspot的範本，我們可以從資訊主頁點選「版面配置」進到管理畫面。

在更改範本之前，先做一次備份是很正確的觀念，這邊我們點選上面的「網頁 HTML」，來到 Html 管理介面。

在這一個頁面，我們可以看到「下載完整範本」的連結。點一下就可以下載並儲存，下載的檔案將會是 .xml 的格式。

備份好了之後，就來挑選新的範本吧。新範本的獲得方式有：1.點選挑選新範本，如果還是祧 Blogspot 提供的範本，就失去了用 Blogspot 的意義了！所以，我們選擇 2. 上網下載網友設計的範本。這邊提供一個範本集散地 btemplates.com，這個網站網羅了網路上幾乎所有網友設計的 Templates，並且幫您以顏色和欄位的不同做區分，讓您在找範本的時候更加容易。

顏色的話，應該不需要我多作說明。至於欄位 columns 就要解釋一下了。

在 Blogspot 中，Columns 指的是指 blog 的外觀分割成幾份。像是下面這個就是 1 column 的代表。整個部落格頁面沒有經過分割，標籤等相關資訊則是接在頁面的最下面。

而 2 columns 則是將頁面分割為一大一小的模式。小的部份通常稱之為「sidebar」或「側欄」。下面這個就是 2 columns 代表。

而 3 columns 則比較複雜一點，有單純 3 columns 和複合式的。單純的 3 columns 範本就是將畫面分割為三份，分別為兩小一大。像是下面這個範本。

複合式 3 columns 的範本就像是下面的例子，上頭是 2 columns，但是在 sidebar 的部份則再分割為兩個 columns。

而 4 coulmns 呢？一樣和 3 columns 有均分式和複合式，不過 4 columns 通常除非特殊用途，不然很少用到，這邊就不介紹了，有興趣的朋友可以自己去看看。

ok，繼續我們的下一步動作，要更改 templates，我們先選定下面這個 2 columns 的範本為例。

點選 Download 的圖案，就會跳出下載視窗，這時候選擇儲存。下載後的檔案為通用的 .zip 檔，在 Windows XP 之後的版本都可以直接解壓縮。

解壓縮後會得到兩個檔案，分別是說名檔「readme.txt」和範本檔「Simple-Jojo.xml」。不同範本的 .xml 檔名稱都不一樣，不過在 blogspot 用的範本格式都是 .xml 檔就是。

好了，範本檔案有了，接下來就是要上工了！在上工之前，要再確認一下有沒有備份舊有的範本喔！

Blogspot 後台管理系統

2009-03-03T20:33:00.001-08:00

在部落格開通之後，再來就是要先講解一下 Blogspot 的後台系統。這邊先只針對系統做介紹，並不會更改任何設定。其實 Blogspot 預設的設定就已經沒什麼問題了，所以，不想看這個章節的人也可以跳過。

一個Google 帳號可以擁有多個 Blog，而且全都可以在自己的後台看到並管理。這一頁，就叫《資訊首業》當你從 Blogspot 首頁登入的時候，就是會先進來這一頁。

選定想要管裡的部落格，再點選設定，就會進到如下的畫面。《基本》的頁面，就是這個部落格的基本設定，包括部落格名稱、介紹、是否列入 Blogspot 清單、開放搜尋、快速編輯、開放遊客傳送文章連結、有沒有成人內容(羞)、使用Rich text 編輯模式、開放音譯這幾個設定。

設定的第二頁則是《發佈》的部份，這邊可以更改你的網址。如果你對目前的網址不滿意，就可以在這邊更改。不過如果在後期才更改，可以會造成訪客的流失，這點要注意喔。

第三個設定就是《格式》的部分。這邊主要會更動到的設定大概就只有首頁顯示幾篇文章這個設定而已。其他的時間格式就照個人喜好。

《格式》下頭的《文章範本》則是以後在新增文章時會自動填入文章的內容，不過之後我們會教如何使用更方便的方法來發佈文章，這個部份就先留白吧。

下一個設定則是《回應》。這邊設定的就是訪客留言的設定、審核、檢查碼之類的設定。

《存檔》設定，就是網頁存檔的頻率，預設的每月就可以。至於文章網頁的設定，就是讓每篇文章有自己的網址(.html)這個設定保留「是」就可以。

《網站提供》設定的就是所謂的 RSS。這部份的設定也沒有需要改變。

《以電子郵件傳送》設定以電子郵件的方式發表文章，對於出外辦公不方便登入 blogspot 編輯文章的人特別有用。

《OpenID》因為不同的網站總是要申請一個帳號，久而久之，太多帳號連自己的記不住。所以，就出現了所謂的 OpenID，一個 ID 可以用在許多網站。這部份也不用更改。

《權限》Blogspot 的部落格，也可以是共筆的型式，允許多位作者共同編輯和經營一個部落格。

OK，介紹完了部落格設定之後，就是要進入範本改造的部份了。咱們(?)下次見。

第一步-開通Blogspot

2009-03-03T18:56:00.001-08:00

現在，大家應該都已經擁有自己的 Google 帳號了，現在，就來開通 Blogspot 吧！第一步當然是先來到 Blogspot 的首頁。

用剛剛申請到的 Google 帳號登入看看吧。登入後就會出現如下的畫面，申請加入 Blogger。顯示名稱的欄位，就是你的部落格的名稱，這邊可以先取一個喜歡的，中英文都可以，如果不喜歡以後還是可以改。

來到第二步驟，這邊可以選擇你要的網址(URL)，網址必須是英文，並有Blogspot.com的網域；如果你有專屬自己的網址(idv.tw)，Blogspot 也允許你指定你的網址到 Blogspot 來。

2-1(？)的部份就是選擇面版，在 Blogspot 裡頭稱之為範本，或是 Template。Blogspot 一開始提供了不少的面版可以選擇，我們先選預設的範本好了。

當範本選定了之後，就會出現如下畫面。是的，您的部落格已經準備好了，現在就讓我們開始使用吧！

在電腦的世界當中，只有零和一。而對 BLogspot 來說，沒有文章的部落格，就是零，而零是不會被放在網路上的。所以，在部落格建立好之後的第一件事，就是寫一篇文章。

在編輯的底部，我們可以看到標籤的欄位，這邊就是讓使用者來分類文章的。好的文章分類，可以讓使用者更輕易地了解並閱讀你的部落格，所以這一步不可以偷懶喔。

寫完第一篇文章之後，只要點選發佈文章，就可以讓你的部落格正式上線囉！

來看一下我們剛建立好的部落格吧。白白亮亮的，是不是很漂亮啊！當然不是，再來就是要對這個範本慢慢改造囉。

從零開始。

2009-03-03T18:39:00.001-08:00

首先先來講一下 Blogspot 這個部落格的系統好了。在台灣，要擁有一個部落格並不難，甚至只要短短的五分鐘，就可以馬上擁有一個自己的部落格。但是，你或許會發現，為什麼有人的部落格那麼漂亮，而我的部落格卻那麼普通？為什麼有人的部落格那麼有特色，而我的卻和大多數人的一樣？為什麼有人可以用部落格賺錢，而我的部落格卻不能放廣告？

台灣目前最多人使用的部落格平台 (BSP) 大概就屬無名小站，它擁的知名，讓所有的使用者一想到要有一個部落格，馬上就會想到它。但是，你或許有注意到，無名小站雖然方便，但是限制也很多，要放個廣告賺錢，或是想要改成有自己特色的Blog，好像都要用錢買。這樣子，對嗎？

其次方便的就是 Yahoo!奇摩的個人部落格，或者是 MSN 的 Live space 了。這兩個我想不必多介紹，大部人的人應該都有看過。雖然這兩個部落格沒有無名小站的置入性行銷，但是，版面卻比無名小站更是一層不變。尤其是 MSN Live space 在讀取時，更讓老舊的電腦倍感壓力。

那麼，有沒有一個，能夠幫我賺錢，又能夠讓我展現個人特色的部落格平台呢？答案是肯定的。門檻可高可低，最自由的方式，就屬自己在外租一台主機，並且自己架設一個Blog，像是Worepress。其次，就是使用 Google 提供的，Blogspot/Blogger 平台了。使用 Blogspot 平台能夠打造多有特色的部落格？這邊就有幾個很成功的達人範例：Jas9 (設計和部落格經營達人)、小云的隨便亂記 (閱讀達人，誠品推理小說專欄作家)、小黑宅 (工程師，程式達人)、Kaie (Blogspot 程式達人，已經進入神的等級)、廢業青年 ( 轉播野草莓運動時況，網路應用達人)、Noid (自己硬要湊進來的。)

看了那麼多，是不是已經等不及要開始自己的部落格了呢？那我們就進入主題了。要開始使用 Google 提供的部落格 Blogspot，首先要有一個Google 帳號。

直接來到Gmail 申請一個，Gmail 的信箱有 7GB，並且持續擴充當中，所以申請一個來也很好用，除了 Blogspot 之外，所有Google提供的服務也都可以透過同一個帳號來使用。進到Gmail首頁之後，點選下面的《申請使用Gmail》。

第二頁就是填寫個人的相關訊息，並選擇想要的帳號。

最後則是相關條款，看完之後點下同意就可以。

鏘鏘！申請完畢，馬上進到自己的信箱看一下吧。

一開始的時候只有一封信，代表帳號已開通。

Google 帳號申請完之後，就可以開始建立我們自己專屬的部落格了。

達人級的部落格，一點都不難!!

2009-03-03T17:51:00.000-08:00

第一篇文章