Blogger網誌更換漂亮的佈景主題（５）修改小細節－CSSViewer

當我們到了某個網站，想了解它的各部位元件的程式碼時，可以啟動CSSViewer這個工具，啟動的方法很簡單，就是到＂工具＂－>＂CSSViewer＂點一下，它就會啟動，這時你的滑鼠游標移動到哪，它就會顯示該位置的元素及設定資訊，如下圖，那麼，我們只要記下來再配合＂ＣＴＲＬ＋Ｆ＂組合鍵，就能輕易的修改程式碼。

Blogger網誌更換漂亮的佈景主題（4）修改小細節-絕招

當我們要從茫茫程式碼的大海裡找到我們要修改的項目，真是一件非常不容易的事情，即使我們有了CSSViewer這個好用的工具，但我還是得靠自己找出要修改的程式碼藏在什麼地方，這時我們要使用的方法就是這個絕招－＞ＣＴＲＬ＋Ｆ

當我們按下這個組合建的時候，會出現搜尋視窗，這時輸入關鍵字，再配合標記的功能，我們可以輕易找出要找尋的資訊。

Blogger網誌更換漂亮的佈景主題（３）修改小細節-好用的工具

一般我們的作業系統內建上網的工具是IE瀏覽器 ，這邊我們來使用一個不同的瀏覽器－ＦIＲＥＦＯＸ，它的優點是有多的擴充元件可以下載，這讓我們在上網時非常方便，例如上大陸網站，就可以下載同步簡體 翻成繁體的套件，或者像我們要檢視網頁的程式碼就可以下載程式碼的檢視套件，這個可以擴充的特性使的它目前市佔率已經超過微軟的ＩＥ了！
可以到這可以到這　http://www.moztw.org/
如果不知道要去什麼地方下載，可以在任何搜尋引擎輸入關鍵字＂ＦIＲＥＦＯＸ＂也能輕鬆找到。
下載之後就安裝起來，安裝完你可以啟動用用看，還滿好用的瀏覽器。

接著，我們要替他安裝這次要用的擴充工具CSSviewer，這個工具可以幫助我們很多辨識出網頁版面上的物件是屬於哪個元件代碼，這樣我們在修改ＨＴＭＬ的時候就不用找到頭昏眼花。
一樣，到搜尋引擎去搜尋＂CSSviewer＂或者從這裡https://addons.mozilla.org/zh-TW/firefox/addon/2104　
選擇＂安裝到Forefox＂。
選擇立即安裝。
重新啟動瀏覽器。
從工具列的＂工具＂有看見這個套件的話就完成了。

Blogger網誌更換漂亮的佈景主題（2）修改小細節-簡單認識CSS

ＣＳＳ語法的表示法

/* 　 */被斜線和星星包圍的都是註明,不是語法

{　 }這一前一後的這種括號包圍的是語法，裡面的內容就是括號前標籤的設定。我們要修改的東戲就是放在這裡面。

首先先從宣告方式開始說明：
p {font-size:12px;}
這個寫法是指段落文章P的文字字級為12px，一開始必須先設定對象，CSS才能夠將設定好的屬性指定給某一個元素，所以上面範例指定的對象為段落文章P。指定對象後，開始做屬性設定，設定之前必須以大括號{　}括起來，這就是規則！

例如
h1 {font-size:12px;}
h1是對象，font-size 這是屬性名稱，而12px為font-size的屬性值，屬性與屬性值必須要有冒號隔開。設定完之後，結尾必須以分號做結束。

如果同時設定不同的元素，但是有著一樣的屬性設定時，難道要重複撰寫嗎？答案是不需要，當有兩個以上為相同設定值的時候，元素間加上逗點符號，可以如下範例一般撰寫：p, h1 {font-size:12px;}，只要在第一個元素後加上逗號隔開，即可以同時設定不同元素屬性。

完整的寫法就是 對象{屬性:屬性值;}

括號裡面內容的表示法：

屬性 冒號 屬性值 分號

寫成 Ａ:Ｂ; 或者 Ａ－Ｘ:Ｂ; （屬性裡的細項則在項目中加上－然後才加冒號）

例如：line-height: 16px;　（線條－高度：１６像素；）

冒號之前是告訴電腦什麼項目屬性，冒號之後是告訴電腦採用什麼屬性值設定，分號代表交待完畢沒事了，換下一位。

Blogger常見對象標籤分類：

body整個介頁面
#body-div整個頁面
#outer-wrapper包圍整個頁面的範圍
#header-wrapper上標題欄
#header上標題文字
#content-wrapper中間包含文章和側邊欄的部份
#main-wrapper文章的部份
#sidebar-wrapper側邊欄所有範圍
#sidebar側邊欄，有時會加上左右的分別
#footer下方標尾
a超連結

a:link有超連結文字的顏色
a:hover滑鼠移動到超連結上時
a:activ使用中的連結文字
a:visited瀏覽過的連結文字

超連結可用的屬性值項目：
text-decoration:
none(連結無底線)、underline(連結加底線)、overline(連結加頂線)、
linethrough(連結加刪除線)、blink(連結閃爍)

常用屬性項目分類：

margin邊界

text-align文字對齊方式

color顏色

background背景

text-decoration超連結的底線

background-repeat背景圖重複

padding間距

padding-top離上間距

padding-bottom離下間距

font-size文字字型

background-image:url(http://********* 背景圖片網址);

border框線

width寬度

height高度

float對齊

left左

right右

說明：
top上　right右　bottom下　lefty左　center中　　width寬　height高
padding　　←間距　（物件文字 與框之間的距離）
margin　　←邊距　（欄框(表格) 向外的距離）
margin-top:　　?px; /*上邊界值
margin-right:　?px; /*右邊界值
margin-bottom: ?px; /*下邊界值
margin-left:　 ?px; /*左邊界值

Blogger網誌更換漂亮的佈景主題（１）下載與套用

如果我們不喜歡Blogger提供的佈景樣式,我們可以去下載比較好看或者比較符合我們需求的樣式回來使用,操作的流程非常簡單,依照順序就是：
1.下載模板-->2.進入部落格的後台-->3.瀏覽樣式-->4.上傳套用模版-->5.細節修改

首先我們先到一些免費提供版面樣式的網誌去下載，這方面的資訊可以到ＹＨＯＯ或ＧＯＯＧＬＥ等搜尋引擎搜尋關鍵字＂Blogger Templates＂，可以找到很多網站。
這裡我們以http://btemplates.com/這個站做示範。

進入該網站之後找一個喜歡的樣式，在網站的右邊有他們依照特色做成的分類，可以慢慢點進去看。選到喜歡的之後就下載下來。

下載下來的檔案是壓縮檔，解開之後會有一個資料夾，裡面通常有兩個檔案，一個是樣式模板，一個是說明檔，說明檔告訴我們怎麼使用這個檔案。

接下來，點右上角＂自訂＂選項，進入後台。
進入後台之後，選擇＂修改ＨＴＭＬ＂。
在套用新的版面範本之前，如果你的部落格有一些內容了，你怕套用之後會亂掉的話，先備份舊的起來，萬一新的出狀況，還可以復原。要備份的話就選＂下載完整範本＂。
接下來就是要套用新的範本的時候了，我們要先選取剛剛到網站下載的版面範本來用，先選＂瀏覽＂，找到存在電腦裡的版面範本檔案，然後選＂上載＂。
這時會出現下面的畫面，選擇＂確認並儲存＂就可以。
這時就可以檢視網誌了。
本來是官方的樣板，現在已經變成我們下載的那個版本了。
目前為止我們已經完成了第一步了，但因為下載的範本有很多預設的項目不是我們要的，所以接下來的步驟就是將這些細節一一修改。

增加最新回應的顯示

Blogger目前沒有提供在首頁顯示有人留言的欄位,所以如果有人留言在我們的文章裡,我們常常會忽略,不過還好,我們可以自己擴充這個功能!


1.到這個網站去,把資料填進去,http://jinyaolin.blogspot.com/2006/11/bloggerbeta.html


2.複製好程式碼之後,跟加入時鐘及計數器的操作過程一樣,我們在版面配置的頁面"新增小工具",同樣新增HTML/JavaScript 工具,然後輸入好標題,並且把程式碼貼上,儲存之後就完成了!

替blogger部落格加入小時鐘

blogger本身的小工具有提供時鐘的功能,可是有點醜,還必須移動捲軸,於是我們乾脆就不要用它提供的,那麼我們如果又很想要有一個時鐘要怎麼辦呢?
其實我們可以另外自己幫blogger加上好看的時鐘的,只要幾個簡單的步驟就行了！
１.首先，到這個網站去http://www.clocklink.com/gallery.php
然後選擇想要的時鐘主題，我有加上中文註解，這次示範用的是＂數位時鐘＂主題，你可以先到每個主題去看看有沒有比較喜歡的樣式。


2.在喜歡的主題下面有個＂View HTML tag＂標籤，在標籤上點一下。

3.一些使用條款，同意就可以了。

4.可以選動物類別，這主題是用12生肖的動物，接著就要選擇時區，我們用國家模式比較容易選，選＂Taiwan＂，就會在城市選項自動跳出＂Taipei＂項目。然後就會在下面出現兩個欄位，欄位裡有一些程式碼，把第一個欄位的複製起來。

5.接著到＂新增小工具＂去新增HTML/JavaScript 這個工具。

6.標題輸入一個你想要的名稱，然後貼上剛剛複製的程式碼，然後儲存。

7.多出來中原標準時間小工具了，那我們就可以去網誌首頁看看。

8.成功了，右上角出現時鐘了！

利用標籤來做文章分類

如果我們有很認真的經營一個部落格，長時間下來文章數量就會變的很多，這時候讀者就很不容易找到他們想要找的資料，為了讓讀者能容易找到文章，我們可以替這些文章做個分類。
在做分類之前，我們要先做一件事，就是在發表文章的時候，替我們的文章輸入標籤，這個標籤就會被用來當做文章分類的依據。


１.在"版面配置"頁面新增小工具


２.這次要新增的小工具是"標籤"

３.在跳出的視窗內輸入標題，如果的文章有加上標籤，這時網站就會主動依照標籤分類出來，在預覽部分可以看到，然後記得儲存。

4.這時就可以看到多出了一個欄位，表示成功了，我們就可以去部落格首頁看看啦～～

5.真的多出文章分類了！

在部落格加入計數器1

因為blogger沒有計數器的功能,我們必須自己幫它加上去,現在就來學習如何加計數器, 我們這次要加入的是只有數字的的陽春計數器,單純只是紀錄部落格有被看過了幾次的功能而已!

1.先到這個網址http://easy-hit-counters.com/，會看到很多種計數器的樣式，選一個喜歡的來用。



２.輸入各項資料。


3.密碼再確認一次。

4.會給我們一段程式碼，複製起來。

5.到我們自己的部落格首頁,右上角"自訂"選項。


6.新增小工具。

7.要新增的是"HTML/JavaScript"選項。

8.會出現這個對話視窗 ，輸入標題，把剛剛複製的程式碼貼上去。

9.這樣就好了，可以去網誌的首頁看看了！

10.右上角多出一個計數器了!

在部落格加入計數器2

還有另一種顯示比較多資訊的計數器,我們來試試看!

1.先到這個網址去申請帳號http://www.histats.com/ ,按下圖片中圈起來的項目"register"


2.第二步驟就是要填一些資料,我有用中文在欄位中說明,照填就行了。


３.送出資料之後會跳到選擇計數器樣式的頁面,選一個喜歡的風格群組 。


４.接著會跳到那個你挑的那個風格群組的頁面,看喜歡哪一個就選擇它。


５.接著會跳到這個頁面,什麼都不用改,直接選繼續的按鈕。


６.現在要等一下,等他處理一下,要等多久,會顯示秒數給你看到。


７.好了,他產生了一串程式碼,像我們從YOUTUBE要複製程式碼一樣,在那一串程式碼上點一下,他會自動反白,然後複製起來!


8.接著到部落格去新增小工具,新增項目是"HTML/JavaScript "


9.出現這個畫面的時候,把標題設定好,接著貼上剛剛複製的程式碼,然後儲存,就完成了!


10.接著就出現一個顯示數字和項目的計數器啦~~