Blog 基本修改注意事項

       模版具體是怎麼修改的？其實關於blogger模版修改的文章在網上很多了，尤其是在Google只要輸入 “blogger 模版”就會得到大量的模版內容。個人感覺很多西洋設計和大量的hack以及外部JS的調用，反而會造成很差的介面體驗和用戶體驗。其實blogger本身提供的很多模版本已經有了很好的基礎，針對這些模版只需要做簡單的修改處理一樣可以產生很好的個性化效果。今天就寫一篇我這個模版的修改說明，為那些希望打造個性化介面的用戶提供一些參考。

       Blogger是一個基於CSS-DIV的標準化設計，對於很多已經熟悉Html語法的用戶來說，可能剛剛開始看語法的時候會有些陌生，但仔細一瞧後其實會發現差別不是那麼的巨大，接著就是認識一些相關的基礎語法值概念去看看，先做一個技術上的熟悉準備，這樣在修改的時候就會目標明確，思路清晰。CSS- DIV是一種標準化的網站結構，他的特點是為網頁展示搭建介面，但是並不提供資料和內容。恩…可以想像它就就好像提供一個樣式豐富的袋子，至於裡面裝什麼，那跟他無關，它只管會袋子本身，而且一旦這個標準建設好了，他會通過這種標準化的結構，很輕鬆的實現將袋子中的資料放置出來，貌似檔案總管就是了 O.o。

在Blogger中不同的模版修改的方法是不同的，我的模版是Kubrick這個模版，如果你選擇的並不是這個模版，那麼下面所說的修改解說對你也是起到一個參考作用，因為大概的方法都是相似的。

修改前務必備份你的代碼，可以通過download的方式也可以直接把所有代碼拷貝粘貼進記事本保存，以備修改崩潰後能夠順利恢復。
在模版編輯頁面，有個小的選擇框，是針對所有模組的代碼是否展開的選擇項，我們一般修改模版和備份模版的時候都應該把這個選擇項選擇上，保證代碼的完整性。

blogger模版中各模組介紹：
通讀模版代碼，你會發現主要有這麼幾塊內容：

1，標準聲明

<………version="1.0" encoding="UTF-8" ………/gml/expr'>這是標準xml的聲明內容，也有些參數，本修改與此無關，不多說。

2，head聲明

一個的 head 聲明，也包括整個模版很核心的CSS資料。我們對很多的修改是集中在對CSS的修改上，因此這塊是我們關注的重點。我的模版修改的首頁LOGO圖，字體，字體顏色，去處頂部導航等均是在這部分操作的。

3，body內容展示

這是整個內容展示模組，所有的CSS設定通過在這個模組中產生作用並展示給用戶。因為 bolgger 本身已經有了很好的可視模組添加、修改、刪除等操作，因此這塊僅僅是我們為了實現更多個性化操作需要瞭解的內容。如添加返回首頁，返回頁首，遮罩 LABEL等一些相關設定值都是在這部分操作。
一，如何去掉blogger的導航條（位居頂部的）
在CSS聲明中添加如下代碼：


/* === Hide the NavBar === */
.Navbar {
visibility:hidden;
display: none;
}
/* === Hide the NavBar === */


二，字體應該如何設置
古代先人與祖宗經過無數的反覆驗證、創造與美化流傳下來給後代的「漢字體」是非常特殊與優美的字體，雖然這個世界上另外還有14億人因為歷史遺留下來的因素，使用了四十年左右的「新中國字體」，但是那種字體平常要用的話交給Google大神翻譯就好，市場比較大，開發的人就多了，技術進步了嘛，說白了不就是拿來給我這種沒事還在子曰的人偷懶用的。雖然筆者我對於「新中國字體」也因為政治現實因素而熟系，但是俺更愛傳統，更敬祖宗，嚮往自由，所以在此就不討論，如果不能很好的設置「漢字體」，上對不起天地良心、先人祖宗，下會給訪問者帶來不好的體驗效果，「天地君親師」總不能都得罪光了是唄。當然在字體設置上每個人也是會各有所愛，在此僅供給大家作為參考。

blogger多採用的是相對尺寸顯示字體大小和字體內容，多採用的是100％，200％這樣的方式，個人感覺也比較好看，配置比較規整，但是我還是選擇了我更加喜歡的方式。

文章標題字體設置
找到Variabl的各種宣告進行設定內容就不細說

文章字體設置


找到 .post-body 或是 .post 相關的宣告進行修改
border:相關只要設定的是文字模組的欄線，我是試過添家圖片或是直接宣告的發法來顯示欄線，以達美化頁面的效果，不過因為我當初是啥都不會的傻大個，所以設定出來的效果很差，因次回復成初始設定
padding: 是宣告文字模組與周邊的一個距離空間，也是為了視覺上的美觀特意設定的，padding的參數是針對上，右，下，左的順序來定制的。
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 這裡是設定文字大小囉
color: 輸入顏色代碼
line-height: 文字的行距一般說用的設定是XXpx;，X的部份為數字，主要的作用是在你的發帖文字那部分拉開行與行的距離，不會讓文字一行挨一行的堆積在一起，行與行之間保留一定的距離為訪問者看文章的時候提供一個舒適的觀看效果。

文章中圖片屬性設定


.post img {
margin:0PX 30px 5px 0px;
padding:4px;
border:1px solid $borderColor;
}


       這段代碼主要是設定你在發帖內容裏邊如果有圖片，你希望他按照什麼樣的形式去顯示，主要修改的是他的padding屬性，保證圖片有邊框，邊框距離圖片多寬，以及圖片週邊跟文字距離多大合適。

       字體選擇應該選擇那些在作業系統中默認安裝的字體，這些字體英文一般verdana很漂亮，中文字體宋體，黑體。尺寸大小一般小字可以設置為9pt，中字體可以設置為13px。這些可以保證無論英文還是中文都顯示更加方正規範美觀。

三，如何增加一個圖片性質的標題LOGO
CSS中所有的圖片都是以背景圖片的形式顯示的，這同我們html中是有很大不同的。那麼我們只需要在認為合適的地方增加一個背景圖片就可以實現標題LOG圖。示例如下：


#header {
background:url("你需要的圖片位址") no-repeat left bottom;
padding:0 0px 0px;
height:195px
}


       在這裡增加背景圖片內容，顯示你的標題LOGO。height是根據你的需要設定背景圖片的高度，如果省略可能會有顯示不全的問題。