一步步套用新範本

Posted on 晚上11:00, under

剛剛我們已經選定了範本,並已經準備好了該範本的 xml 檔。現在,來到《修改 html 》的頁面,點選瀏覽電腦裡頭的範本檔。選擇我們剛剛下載的那個 xml 檔案。

42

上傳完成後會出現提示,表示之前的元件將會被刪除。因為我們的部落格是剛設定好的,所以就算不見了也沒關係。

44

按下確認之後,範本就會被套用上去了!接下來按下檢視網誌看看結果吧。

45

45-1

很好,面版套用得很好,沒有什麼大問題。目前的問題就只有中文化的問題而已。因為,我們是中文的使用者,當然也要把介面弄成中文,感覺上才會比較友善啊!所以,接下來就來做一些細部調整吧!

我們來看一下剛剛那張圖,先圈出需要中文化的部份:

45-1-1

看來要改的部份還滿多的。先一步一步來,我們先針對上面的「分頁標籤」下手。來到《版面設計》裡頭得《修改html》部份:

45-2

點一下 html 程式碼的部份,然後按下 ctrl+F ,或是從瀏覽器上選擇 編輯=>尋找。然後輸入我們要中文化的文字「Home」,然後按「下一步」。

45-3

45-4

這邊就找到了

<li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>

而我們要改的,就是把 Home 改成中文的「首頁」。後頭的 Posts RSS、Comments RSS、Edit 也照樣子更改。Post RSS = 「訂閱文章」,Comments RSS = 「訂閱回應」,Edit 的部份,則是範本中讓使用者自定功能的部份。這邊可以先空著,等之後我們加入相本後再回來更改。

45-5

這樣上面的分頁部分是不是就變中文啦!但是,文字好像有一點不清處?因為中文和英文的字型本來就會有一點差異,這時候我們再把分頁標籤的字型給加大一點。所以我們找程式碼關於分頁標籤的 CSS ,通常分頁標籤的部份都會歸在 Main Menu 裡頭,而分頁標籤的程式是被 <li></li> 給包住,所以我們要修改的 CSS 將會是在 Main Menu 中的 li 設定。這邊我們將 font-size 的選項設定為 15px; 就是將字型大小設定為 15 px 的意思。

45-7

更改完之後,先不要儲存,按下預覽來看一下效果吧!字是不是變得比較大,比較方便瀏覽了呢?這時候,我們就可以按下儲存了。

45-6

再來我們要更改的部份,就是側欄 sidebar 當中,有一堆看不懂的字。

45-5-1

修改方法與分頁一樣,我們先搜尋框框內的字。

45-8

再將裡面改成你想要的文字。這邊我把它改成「Noid 推廣 Blogspot 的網站,這邊有盡可能詳細的教學,讓你慢慢一步一步,學習如何在 Blogspot 建立一個有聲有色與眾不同的部落格。老話還是一句,師父領進門,修行就要靠個人了。善用 Google,你也能擁有更有特色的部落格!」

45-8-1

寫好後,一樣先預覽過,沒問題就可以儲存範本囉。接下來看看還有什麼地方要中文化的吧。

45-9

剩下的就是 sidebar 的 Labels 和 Archives 了,這部份是屬於元件的部份,在下一個章節我們再介紹喔!


| edit post

Blogspot 範本說明

Posted on 晚上9:12, under ,

Blogspot 的面版,稱之為「範本」,英文為「Templates」。設定Blogspot的範本,我們可以從資訊主頁點選「版面配置」進到管理畫面。

17

32

在更改範本之前,先做一次備份是很正確的觀念,這邊我們點選上面的「網頁 HTML」,來到 Html 管理介面。

33

在這一個頁面,我們可以看到「下載完整範本」的連結。點一下就可以下載並儲存,下載的檔案將會是 .xml 的格式。

43

備份好了之後,就來挑選新的範本吧。新範本的獲得方式有:1.點選挑選新範本,如果還是祧 Blogspot 提供的範本,就失去了用 Blogspot 的意義了!所以,我們選擇 2. 上網下載網友設計的範本。這邊提供一個範本集散地 btemplates.com,這個網站網羅了網路上幾乎所有網友設計的 Templates,並且幫您以顏色和欄位的不同做區分,讓您在找範本的時候更加容易。

顏色的話,應該不需要我多作說明。至於欄位 columns 就要解釋一下了。

37-2

在 Blogspot 中,Columns 指的是指 blog 的外觀分割成幾份。像是下面這個就是 1 column 的代表。整個部落格頁面沒有經過分割,標籤等相關資訊則是接在頁面的最下面。

37-3

而 2 columns 則是將頁面分割為一大一小的模式。小的部份通常稱之為「sidebar」或「側欄」。下面這個就是 2 columns 代表。

37-4

而 3 columns 則比較複雜一點,有單純 3 columns 和複合式的。單純的 3 columns 範本就是將畫面分割為三份,分別為兩小一大。像是下面這個範本。

37-5

複合式 3 columns 的範本就像是下面的例子,上頭是 2 columns,但是在 sidebar 的部份則再分割為兩個 columns。

37-6

而 4 coulmns 呢?一樣和 3 columns 有均分式和複合式,不過 4 columns 通常除非特殊用途,不然很少用到,這邊就不介紹了,有興趣的朋友可以自己去看看。

ok,繼續我們的下一步動作,要更改 templates,我們先選定下面這個 2 columns 的範本為例。

38

點選 Download 的圖案,就會跳出下載視窗,這時候選擇儲存。下載後的檔案為通用的 .zip 檔,在 Windows XP 之後的版本都可以直接解壓縮。

39 40

解壓縮後會得到兩個檔案,分別是說名檔「readme.txt」和範本檔「Simple-Jojo.xml」。不同範本的 .xml 檔名稱都不一樣,不過在 blogspot 用的範本格式都是 .xml 檔就是。

41

好了,範本檔案有了,接下來就是要上工了!在上工之前,要再確認一下有沒有備份舊有的範本喔!


| edit post

Blogspot 後台管理系統

Posted on 晚上8:33, under ,

在部落格開通之後,再來就是要先講解一下 Blogspot 的後台系統。這邊先只針對系統做介紹,並不會更改任何設定。其實 Blogspot 預設的設定就已經沒什麼問題了,所以,不想看這個章節的人也可以跳過。

一個Google 帳號可以擁有多個 Blog,而且全都可以在自己的後台看到並管理。這一頁,就叫《資訊首業》當你從 Blogspot 首頁登入的時候,就是會先進來這一頁。

17

選定想要管裡的部落格,再點選設定,就會進到如下的畫面。《基本》的頁面,就是這個部落格的基本設定,包括部落格名稱、介紹、是否列入 Blogspot 清單、開放搜尋、快速編輯、開放遊客傳送文章連結、有沒有成人內容(羞)、使用Rich text 編輯模式、開放音譯這幾個設定。

18

19

20

設定的第二頁則是《發佈》的部份,這邊可以更改你的網址。如果你對目前的網址不滿意,就可以在這邊更改。不過如果在後期才更改,可以會造成訪客的流失,這點要注意喔。

21

第三個設定就是《格式》的部分。這邊主要會更動到的設定大概就只有首頁顯示幾篇文章這個設定而已。其他的時間格式就照個人喜好。

22

《格式》下頭的《文章範本》則是以後在新增文章時會自動填入文章的內容,不過之後我們會教如何使用更方便的方法來發佈文章,這個部份就先留白吧。

23

下一個設定則是《回應》。這邊設定的就是訪客留言的設定、審核、檢查碼之類的設定。

24

25

26 

《存檔》設定,就是網頁存檔的頻率,預設的每月就可以。至於文章網頁的設定,就是讓每篇文章有自己的網址(.html)這個設定保留「是」就可以。

27

《網站提供》設定的就是所謂的 RSS。這部份的設定也沒有需要改變。

28

《以電子郵件傳送》設定以電子郵件的方式發表文章,對於出外辦公不方便登入 blogspot 編輯文章的人特別有用。

29

《OpenID》因為不同的網站總是要申請一個帳號,久而久之,太多帳號連自己的記不住。所以,就出現了所謂的 OpenID,一個 ID 可以用在許多網站。這部份也不用更改。

30

《權限》Blogspot 的部落格,也可以是共筆的型式,允許多位作者共同編輯和經營一個部落格。

31

OK,介紹完了部落格設定之後,就是要進入範本改造的部份了。咱們(?)下次見。


| edit post

第一步-開通Blogspot

Posted on 下午6:56, under ,

現在,大家應該都已經擁有自己的 Google 帳號了,現在,就來開通 Blogspot 吧!第一步當然是先來到 Blogspot 的首頁。

7

用剛剛申請到的 Google 帳號登入看看吧。登入後就會出現如下的畫面,申請加入 Blogger。顯示名稱的欄位,就是你的部落格的名稱,這邊可以先取一個喜歡的,中英文都可以,如果不喜歡以後還是可以改。

8

來到第二步驟,這邊可以選擇你要的網址(URL),網址必須是英文,並有Blogspot.com的網域;如果你有專屬自己的網址(idv.tw),Blogspot 也允許你指定你的網址到 Blogspot 來。

9

2-1(?)的部份就是選擇面版,在 Blogspot 裡頭稱之為範本,或是 Template。Blogspot 一開始提供了不少的面版可以選擇,我們先選預設的範本好了。

10

11

當範本選定了之後,就會出現如下畫面。是的,您的部落格已經準備好了,現在就讓我們開始使用吧!

12

在電腦的世界當中,只有零和一。而對 BLogspot 來說,沒有文章的部落格,就是零,而零是不會被放在網路上的。所以,在部落格建立好之後的第一件事,就是寫一篇文章。

13

在編輯的底部,我們可以看到標籤的欄位,這邊就是讓使用者來分類文章的。好的文章分類,可以讓使用者更輕易地了解並閱讀你的部落格,所以這一步不可以偷懶喔。

14

寫完第一篇文章之後,只要點選發佈文章,就可以讓你的部落格正式上線囉!

15

來看一下我們剛建立好的部落格吧。白白亮亮的,是不是很漂亮啊!當然不是,再來就是要對這個範本慢慢改造囉。

16


| edit post