從Google Pages Creater到Blogger

序

我原本是在Google pages Creater中寫得技術札記的，

不過越寫越多就會發現功能還是有差，雖然頁面排版Google pages creater的編輯器比Blogger方便很多，不過就功能性Blogger還是比較多~

所以經過百般考慮還有測試後，終於決定換到這了，順便提供我換到這的過程要點給大家參考

挑Blogger的原因

我其實有到處看看各家BSP的功能還有效能~決定換這裡的幾個原因

• 這裡有提供Free tagging(標籤)的功能，其他的大都還沒有提供
• 這兒跟Pages Creater都是Goolge旗下的，感覺比較穩
• 它的備份聽說還滿方便的，雖然還沒試過
• 有提供一些介面方便排版與新增元件
• 可以客製化的地方也不少

不過當然有缺陷，例如範本要修起來其實還滿困難的(因為我幾乎可說是不懂CSS) ，而且文章跟首頁居然必須用同一個樣板，這樣功能表就每頁都有，有點多餘(有人知道如果解決請告訴我)

還有文章編輯器太笨了

Blogger的設定

首先，申請了Blogger後，可以發現有三個主要功能，張貼、設定、範本

在【設定】的【格式】中，有個【轉換分行符號 】，主要用來補足它笨笨的編輯器，不過反而造成我文章編寫的困擾，所以我選【否】

在【設定】，另一個可以注意的就是【權限】， 可以讓你的朋友也成為這個Blogger的作者，就可以共同製作這個Blog

Blogger的範本

主要是設計整個版面配置，可以用拖拉點選的方式，也可以搭配修改CSS(HTML)

通常可以先利用【挑選新範本的功能】，大至決定配色排版，覺得不夠還可以去網路上找，如Blogger templates

然後用【修改HTML】來做細部的調整，例如我做了下面這些設定

• 在title之前加上下面這段以利瀏覽器判斷 <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
• 因為我打算讓它的版面隨使用者的視窗變大小，所以修改了body的min-width

  body {
  margin: 0;
  text-align: center;
  min-width: 790px;
  background: #ce8b43 url(http://www.blogblog.com/thisaway/bg_body.gif) repeat-x left top;
  color: $textColor;
  font-size: small;
  }

• 然後修改outer-wrapper、header-wrapper、main-wrapper、sidebar-wrapper、footer-wrapper的background與width，讓版面大小跟著變化

  #outer-wrapper {
  margin: 0 auto;
  width: 99%;
  text-align: left;
  font: $bodyFont;
  }
  
  #header-wrapper {
  padding-bottom: 15px;
  background: #634320;
  }
  
  #content-wrapper {
  position: relative;
  width: 99%;
  background: #f7f0e9;
  }
  
  #main-wrapper {
  display: inline;
  float: left;
  margin: 0 0 0 3px;
  padding: 0;
  width: 75%;
  word-wrap: break-word;
  overflow: hidden;
  }
  
  #sidebar-wrapper {
  display: inline;
  float: right;
  margin: 0 3px 0 0;
  width: 22%;
  color: $textColor;
  line-height: 1.4em;
  font-size: 90%;
  background: url(http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x left top;
  word-wrap: break-word;
  overflow: hidden;
  }
  
  #footer-wrapper {
  padding-top: 15px;
  background: #634320;
  clear: both;
  }

• 其他的就是額外像是code的外觀

  code {
  display: block; /* fixes a strange ie margin bug */
  font-family: Courier New;
  font-size: 8pt;
  overflow:auto;
  background: #fff url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
  border: 1px solid $postTitleColor;
  padding: 10px 10px 10px 21px;
  max-height:200px;
  line-height: 1.2em;
  }

Blogger的張貼

我一直有提到他的編輯器有些笨，是我對Blogger最不滿意的地方，如果不是因為這點我很早就轉用Blogger了，不過在這次轉移的過程，我發現利用Google pages Creater寫完，再把HTML貼過來就OK了

此外，它的標籤部份是用【,】分隔，與HemiDemi用空白分隔不一樣，它沒有特別標示，讓我小小打了個問號

總結

其實我對CSS的設計一點也不熟，這樣修改也不確定有沒有些問題，

所有的東西我就是設定一下然後看一下效果，如果高手有些建議，請大方指教，我會很感謝

相關連結

• 如何使用Blogger.com建立自己的Blog (Blogger How-To) 作者：Daniel
• 用Blogger來建立自己的BLOG-全攻略
• 在每篇文章底端放置各大共享書籤 for blogger
• 有關 Blogger in Beta
• Blogger templates