序
我原本是在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的設計一點也不熟,這樣修改也不確定有沒有些問題,
所有的東西我就是設定一下然後看一下效果,如果高手有些建議,請大方指教,我會很感謝
相關連結