從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的設計一點也不熟,這樣修改也不確定有沒有些問題,

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

相關連結

3 意見:

lance 提到...

Allen,我也要開始玩blog了...:p

lance 提到...

回應完之後發現這篇文章正好是一年前的文章
好巧XD

倫倫3號 提到...

那你要用哪裏的Blog當主力壓?

這裡是關於技術的手札~

也歡迎大家到

倫與貓的足跡



到噗浪來

關心一下我唷!
by 倫
 
Copyright 2009 倫倫3號Beta-Log All rights reserved.
Blogger Templates created by Deluxe Templates
Wordpress Theme by EZwpthemes