Google Blogger 的架設與進階設定教學

1. Google Blogger 的架設與操作教
學
講師 ： Marrs Hsu
泓彥資訊股份有限公司
2012-08-31
1

2. 講師介紹
許木成
Marrs Hsu
泓彥資訊股份有限公司 總經理
電子郵件 : marrshsu@gmail.com, marrs@homeyen.com.tw
Facebook: marrshsu@gmail.com
我的部落格 : marrshsu@blogspot.com
專長 ：
• 寬頻接取網路 (FTTX 方案 ) 、網路通訊及資訊安全 。
• 攝影器材 。
2

3. 課程內容
第一階段  部落格 (Google Blogger) 的基礎建置 …………… 60 分鐘
… ..
• Google Blogger 的介紹
• 如何建立部落格
• 各種平台模板與風格
• 文章編輯工具介紹
• 崁入圖片 / 影片 / 簡報 / 行事曆 / 網路問券調查 /
標籤
第二階段  Break and Q&A + 實作 …………………………… 20 分鐘
… .. 40 分鐘
 部落格 (Google Blogger) 的進階功能 ……………
… ....
• 活用部落格小工具
• 使用 Google 閱讀器 ( 和 blogger 密切相關功能 )
第三階段  Break and Q&A + 實作 …………………………… 10 分鐘
… .. 40 分鐘
 部落格 (Google Blogger) 的管理和設定 …………
… ....
• 權限設定以及邀請其他作者共同編輯
• 留言 ( 學生發言 ) 的管理
3

4. 第一階段
部落格 (Google Blogger) 的基礎建置
• Google Blogger 的介紹
• 如何建立部落格
• 各種平台模板與風格
• 文章編輯工具介紹
• 崁入圖片 / 影片 / 簡報 / 行事曆 / 網路問券調查
/ 標籤
4

5. 甚麼是部落格
 部落格 (Blog) 的由來與應用
• Web Log ＝ Blog ＝ 部落格 ＝ 網誌 ( 網路日誌 ) ＝ 博客
Jorn Barger 於 1997/12/17 創造了“ Weblog” 這個名詞。 而 “ Blog” 的縮
寫則是由 Peter Merholz 所創，當時他開玩笑地將 “ Weblog” 在他的部落
格 (Peterme.com) 的側邊欄變成片語 “ we blog” 而來。
• Blog 是由現代的線上日記演化而來，一種由個人管理、不定期張貼新的
文章、圖片或影片的網頁或線上日記，用來抒發情感或分享資訊
• 1998 年開始有 Blog 出現網路上， 1999 年美國網站 pitas 開始提供免
費的網路日記服務。
• 部落格主人除了能發表文章，也能收到讀者的迴響，提供個人意見的發
表與交流途徑。
• 書寫 blog 的人，通常被稱為『 blogger 』。
5

6. 甚麼是部落格 ( 續 )
 部落格的大流行
隨著部落格技術發展的成熟和各部落格託管商的陸續出現，部落格的應用在
1999 年後開始流傳。
• 1998 年 10 月， Open Diary 推出後，該網站用戶很快的增加到上千個部落
格，成為了第一個能在別人部落格上留下評論的互動式部落格託管商。
• 1999 年 3 月，著名部落格作者 Brad Fitzpatrick 創立了 LiveJournal 。
• 1999 年 7 月， Andrew Smales 創立了 Pitas.com ，該網站開發了一個較容易
在某個網站上嵌入「新聞頁」的工具， 1999 年 9 月，該網站又推出了較貼
近於個人活動的日誌社群 Diaryland 。
• 1999 年 8 月， Evan Williams 和 Meg Hourihan 推出了 blogger.com ，此網
站於 2003 年 2 月被 Google 公司收購。
文章參照： http://zh.wikipedia.org/wiki/ 網誌
6

7. Blogger( 部落格 ) 的優點 …
 可以記錄您的生活紀事，並透過標籤將所有事件 ( 文章 ) 作自動分類，讓觀眾點
閱時更加方便。
 一篇文章就是一個獨立網頁，並可透過內建的 Google 搜尋來快速找尋舊文章。
 可以很容易的透過 Youtube 影音、 PowerPoint 簡報、 Picasa 相簿、網路問券調
查等功能之整合，讓你的部落格發揮最大 ( 教學 ) 效益。
 觀眾 ( 學生或家長 ) 可以透過留言與我緊密互動。
 內建訂閱功能，當有新文章時，我的觀眾可以透過 Google Reader( 閱覽器 ) 接收
到最新訊息。
 網頁元件容易整合其他功能。
 沒有廣告、也沒有收費的問題。
7

8. Google Blogger 與其它部落格的不同 ?
 Blogger 的優點 ：
• 內建網路圖庫 (Picasa) 自動連結 。
• 可同時整合大部份的 Google APPS 服務 。
• 可從網路下載各式各樣的模板 ，並可自行編輯原始碼 。
• 內建多國語系介面及文字自動翻譯功能 。
• 完全無崁入廣告 ( 自訂部落格廣告還可賺取廣告費 ) 。
• 背後是 Google 穩定可靠的伺服器平臺 。
• 單一帳號可同時設立 ( 管理 ) 10 組部落格 。
• 可支援 ”共同編寫 ”機制 。
• 可限制訪客及留言者的身份 。
• 草稿自動儲存 、文章可匯出 / 匯入 。
• 所有小工具都可以自由拖放到不同的欄位 。
• 側欄可放置圖片 、文字 、影片 、問券 、 HTML 、 Javascript 內容
。
8

9. Google Blogger 與其它部落格的不同 ? ( 續 )
 Blogger 的缺點 ：
• 模板的語法複雜 ，新手不易修改 。
• 無多層分類及文章加密功能 。
• 無中文使用者論壇 ，缺少心得交換及統一解答疑惑的平臺 。
9

10. 開始來設立你自己的 Blog 吧 !
 設立 Blog 前的準備 :
• 須先申請好 Gmail 帳號 。
• 建議將 Picasa(Google 圖庫 ) 、 Google Reader 的帳號也申請妥當 。
• 請先登入您的 Google 帳號 (https://accounts.google.com/)
• 請登入 Google Blogger…
10

11. 開始來設立你自己的 Blog 吧 ! ( 續 )
 開始來設立你的部落格
• 請登入 http://www.blogger.com/ ，並輸入你事先申請的 Gmail 帳號及
密碼 。
• 按 「開始使用 Blogger 」。
• 按 「新增網誌 」。
• 輸入標題 ＞ 輸入地址 ＞ 選定範本 ＞ 按 「建立網誌 」。
( 範本可以先任意選定 ，待會兒還可以慢慢的選換 … )
• 大功告成 。
11

12. Blogger 的範本設計
請點選 ：右上角 「設計 」，再按 「網誌即時狀態 / 自訂 」進入範本設計工
具
 挑選範本
• 選定你所喜愛的版型 ，然後按 「套用至網誌 」 。
 挑選背景
• 移除圖片 ＞ 點選 ▼ 按鈕 ＞ 選定背景圖片後按 「完成 」。
 調整寬度
• 非必要 ，建議可先不調動 。
 版面配置
• 請選定 ”主體版面配置 ” 、”頁尾版面配置 ”
 進階設定
• 主要是作版面的文字及文字顏色 / 大小調整 。
選定後請按 「套用至網誌 」＞ 「返回 Blogger 」
12

13. Blogger 的版面文字調整
 請點選 ：設計 ＞ 網誌即時狀態 / 自訂 ＞ 進階
網誌標 網誌說
題 明
標籤文字
標籤背景 日期標
題
小工具標 文章標
題 題
小工具文 文章背
字 景
13

14. Blogger 的新文章建立
 請點選 ：新文章 ＞ 開始 ”撰寫 ” ＞ 發佈 ( 或是僅儲存而不發佈 )
• 文字編輯器的功能大致上與 Word 相差不大 。
• 右側的 「文章設定 」部份 ，除了 ”標籤 ”外 ，都可忽略不動 。
 文章編輯工具介紹
插入分
頁
插入影
片 頁尾增加標
標題類 籤
別 插入圖
字型大 片
小 新增或移除連
內建字 結
型 文字背景顏
色
14

15. ( 補充 ) 新文章建立 ：崁入外部 (Picasa) 圖片
 請點選 ：新文章 ＞ 輸入文章標題 ＞ 開始 ”撰寫 ” ＞ 插入圖片
 請選定要上傳的圖片 ＞ 再按 「加入所選圖片 」來完成 。
( 也可按「來自 Picasa 網路相簿」來選定網路圖片 )
( 在文字編輯器內直接點選圖片，可以切換圖 / 文位置點 )
15

16. ( 補充 ) 新文章建立 ：崁入 YouTube 影片
 請點選 ：新文章 ＞ 輸入文章標題 ＞ 開始 ”撰寫 ” ＞ 插入影片
 請選定要上載的影片 ＞ 再按 「選擇要上載的影片 」來完成 。
( 也可按「從 YouTube 」，再輸入搜尋名稱來選定網路影片 )
( 在文字編輯器內直接點選影片，可以移動放置點 )
16

17. ( 補充 ) 新文章建立 ：崁入 PPT 簡報檔
 請點選 ：新文章 ＞ 輸入自訂標題 ＞ 點選 HTML
 另開新視窗 ，點選 www.slideshare.net ( 註冊並登入 )
• 將事先準備好的簡報 Upload 到 slideshare 網站 。
Upload ＞ Upload ＞ 選定要上傳簡報檔 ＞ 等系統回覆成功訊息 !
點選 ” My Upload” ＞ 點選你所指定的檔案 ＞ 點選 Embed ＞
拷貝網址 ＞ 轉貼到 Blogger 的新文章 HTML 欄內 ＞ 按發佈
17

18. ( 補充 ) 新文章建立 ：崁入 Google 行事曆
 請點選 ：新文章 ＞ HTML
 另開新視窗 ，登入 Google 日曆 ＞ 點選指定分享的日曆 ＞ 日曆設
定
• 點選 「嵌入此日曆之 ”自訂顏色 、大小與其他選項 ” 」
• 挑選 ：顯示 、預設檢視 、寬度 / 高度 、週起始於 、背景顏色 、邊框 ，完
成後請按下 「更新 HTML 」並複製 CSS Code 。
 請將 CSS code 轉貼到 Blogger 文字編輯器內 ，再按下 「發佈 」。
18

19. ( 補充 ) 新文章建立 ：崁入網路問券調查
 請點選 ：新文章 ＞ HTML
 請另開視窗 ： http://spreadsheets.google.com/newform
• 開啟網址 ，並登入 Google 帳號後即可開始製作問卷 。
• 請先將問卷標題與敘述填妥 ，這樣大家才知道這個問卷的範圍與主要
目的 。
• 接著在 「問題標題 」處輸入第一個問題的內容 ，下方的 「說明文字 」可以簡
單的界定一下這個問題的範圍 。
• 打完第一個問題之後 ，可以按一下 〔 + 新增問題 〕繼續寫下一個問題 。
• 每個問券都可以套用不同的主題 。
 請點選 ：更多動作 ＞ 崁入 ，
再將程式碼貼到你的 HTML
編輯器內 ，再按發佈 。
19

20. Break and Q&A
 Google Blogger 實作演練 (20 分鐘 )
【練習題一 】
1). 建立第一個部落格
2). 編輯帳號資訊
3). 選用個人的部落格模板
4). 發表第一篇文章
5). 練習在文章中崁入圖片 、影片 、簡報
20

21. 第二階段
部落格 (Google Blogger) 的進階功能
• 活用部落格小工具
• 使用 Google 閱讀器 ( 和 Blogger 密切相關功
能)
21

22. Blogger 的版面配置 ( 小工具 ) -1
 上欄的小工具
• 在上欄點選 「新增小工具 」＞ 新增 「連結清單 」。
1). 建議標題空白 ，並填入網址及網站名稱 ( 例 : 回到首頁 ) ，按儲存
。
2). 新增連結 ，重覆上述動作 ，製作你想要前往的網頁 ( 例 : 關於
我 )。
選定後可以自行搬移位置 ，但請記得要按 「儲存排列方式 」來儲存您的設
定。 22

23. Blogger 的版面配置 ( 小工具 ) -2
 左側欄的小工具
• 新增 「連結清單 」
可設定為：外部的連結網頁、外部的連結圖片 ( 網路圖庫 )
可設定為：外部的連結檔案 ( 文章 / 成績單 / 出缺勤表… ) 。
• 請點選 ：設計 ＞ 設定 ＞ 版面配置 ＞ 新增小工具
 請在側欄點選 「新增小工具 」
 請在 「連結清單 」欄按 ＋
 輸入標題欄 ＞ 連結數請空白 ＞ 輸入網站名稱 ＞ 輸入網址 ＞ 儲存
 若要新增連結 ，請在相同版位再按 ”編輯 ”即可進入新增
23

24. Blogger 的版面配置 ( 小工具 ) -3
 左側欄的小工具
• 新增 「標籤 」
文章內的標籤可透過小工具顯示在側欄
，方便訪客可透過分類快速找到須要的
文章。
不過還是建議一篇文章的標籤能控制在
三個以內，否則側欄會顯得有點鎖碎。
點選 ”選取的標籤 ” ＞ 選取你所要顯
示的側欄標籤 ＞ 儲存
24

25. Blogger 的版面配置 ( 小工具 ) -4
 左側欄的小工具
• 新增 「網誌封存 」
25

26. Blogger 的版面配置 ( 小工具 ) -5
 左側欄的小工具
• 新增 「簡介 」
網誌作者的介紹，也可以替換為班級、
導師或管理員的簡介。
26

27. Blogger 的版面配置 ( 小工具 ) -6
 右側欄的小工具
• 新增 「網誌統計資料 」
27

28. Blogger 的版面配置 ( 小工具 ) -7
 右側欄的小工具
• 新增 「搜尋框 」
28

29. Blogger 的版面配置 ( 小工具 ) -8
 右側欄的小工具
• 新增 「透過電子郵件追蹤 」
29

30. Blogger 的版面配置 ( 小工具 ) -9
 右側欄的小工具
• 新增 「熱門文章 」
30

31. Blogger 的版面配置 ( 小工具 ) -10
 右側欄的小工具
• 新增 「新聞影片 」
31

32. Blogger 的版面配置 ( 小工具 ) -11
 右側欄的小工具
• 新增 「圖片 」
32

33. 使用 Google 閱讀器
 Google 閱讀器 (Google Reader) 是 Google 旗下一個部落格閱讀器，能提
供在線 ( 或離線 ) 的 Atom 和 RSS 新文章閱讀。
• RSS 的英文全稱是 Really Simple Syndication ，是一種透過特性
所制定的格式，讓網站的管理者可以把部落格文章、新聞、音
訊或視訊以像是電子報或新聞群組的方式自動下載給訂閱戶。
• Atom 是更新、更嚴謹的格式標準，也是 IETF 組織所制定的 (RSS) 替代標準。
 使用者可以直接輸入 RSS 或 Atom 的 URL ，或透過搜尋功能來添加訂
閱。每個新增文章的未讀條數會自動更新並在左欄中顯示，且可以按日期
或相關性進行排序。
 你也可以在你的部落格開放 RSS/Atom 的訂閱。
33

34. Break and Q&A
 Google Blogger 實作演練 (10 分鐘 )
【練習題二 】
1). 將文章分類
2). 調整小工具重新編排版面
34

35. 第三階段
部落格 (Google Blogger) 的管理和設定
• 權限設定 ：邀請其他作者共同編輯
• 權限設定 ：限定讀者點閱
• 留言 ( 學生發言 ) 的管理
• 進階後臺管理設定
35

36. 關於 Blogger 管理員
 小組網誌的管理員可以存取網誌的設定和範本，也可以編輯和刪除其
他成員張貼的網誌文章。此外，管理員還可以新增或移除其他小組成
員，而且可將單一網誌的管理權限指派給多位成員，人數不限。
 如果您邀請小組成員加入網誌，且對方接受邀請，系統在預設狀態下
會將這些成員列為「作者」。「作者」只能建立和編輯自己的文章。
 如要將作者變更為管理員，您可以使用該作者名稱旁的下拉式選單進
行變更。如果網誌只有一位管理員，則無法撤銷其管理權限。
36

37. Blogger 的權限管理 ：新增網誌作者
 請點選 ：設計 ＞ 設定 ＞網誌作者
• 網誌作者也就是管理員 ，你可以按新增作者來新增管理員 。
• 輸入帳號或是從 Gmail 連絡簿裡挑選新增名單 ，完成後請按 「邀請作
者 」，然後等對方回覆確認後即可 。
37

38. Blogger 的權限管理 ：如何移除網誌作者
 請點選 ：設計 ＞ 設定 ＞網誌作者
• 若要移除小組成員，請移至 [ 設定 | 權限 ] 標籤，然後按一下您想
移除之成員的「移除」連結。
• 這麼做可讓被移除的小組成員無法建立其他文章，但不會移除該成員
先前張貼的項目。
38

39. Blogger 的權限管理 ：新增網誌讀者
 請點選 ：設計 ＞ 設定 ＞網誌作者
• 網誌讀者的初始設定是 : 任何人 ，但是也可以透過設定來限制讀者的身
份。
• 請按編輯 ，然後選定是 「任何人 」、「僅網誌作者 」、「僅限這些讀者 」。
• 若選擇 「僅限這些讀者 」，則只有新增的讀者 ( 可從連絡簿中挑選 ) 才能點
閱。
39

40. Blogger 的留言管理
 請點選 ：設計 ＞ 設定 ＞ 文章和留言 ＞ 留言設定欄
• 留言位置 ：崁入 / 整頁模式 / 彈出式視窗 / 隱藏
• 誰能留言 ：任何人 ( 包括匿名使用者 )/ 已註冊的使用者 /
擁有 Google 帳號的使用者 / 僅限此網誌的成員
• 留言管理 ：一律 / 有時 / 永不
( 留言後會顯示：您的意見在核准之後就能被看見。 )
將電子郵件管理要求寄給
( 請輸入管理者的郵件帳號，有留言就會即時通知 )
• 顯示字詞驗證 ：是 / 否
( 因為驗證碼常常會看不懂 )
• 顯示反向連結 ：顯示 / 隱藏
• 留言欄訊息 ：管理者保留 「留言欄 」的事先審核 ( 刊登 ) 權 ~
40

41. 如何宣傳你的 Blogger
 將您的網誌連結至 Google+ ：如果您將 Blogger 簡介切換成
Google+ ，即可運用自動分享功能、 Google+ 網誌社群及日後推出的各
項功能，培養自己的忠實讀者群。
 將搜尋引擎的機制納入考量 ：善用 Blogger 的搜尋偏好設定功能，讓
讀者更容易找到您的內容。
 允許以電子郵件傳送文章 ：如果您的網誌使用以電子郵件傳送文章的
功能，讀者即可將您的文章轉寄給朋友。這樣做可能不會立即對您的網
站統計資料產生影響，但是可以讓其他人為您宣傳您的網站。
 啟用您的網站資訊提供 ：如果讀者透過新聞閱讀器訂閱您的網站資訊
提供，就更有可能閱讀到您的文章。
 將您的網誌加入 Blogger 清單 ：如果您將網誌加入我們的清單，您的
網誌就會顯示在 Nextblog 、最近更新和其他地方，就像選擇加入流量一
樣。
 定期發佈文章 ：您的網誌內容越豐富，就能得到越多的流量。
41

42. 如何更換外掛的模板 …
 可以到 http://www.premiumbloggertemplates.com/ 下載模板
http://btemplates.com/
 下載後解壓縮檔案 ，裡面應該會有一個 Readme.txt ，此檔中會說明
如何去更新 Blogger 的模版 。
 解壓縮後 ，檔案中有模版的 XML ，如 ： negra02.xml
 先備份舊的模版 ，避免之後反悔想要回復 。
 請點選 ：設計 ＞ 範本 ＞ 備份還原
＞上載範本 / 選擇檔案 > 選定模板
42

43. 幫你的 Blogger 更換中文字型
 請點選 ：設計 ＞ 範本 ＞ 修改 HTML ＞ 繼續 ＞  展開小裝置範
本
在 HTML 程式碼內找尋下列的字串 ，並按下面語法增加 ”微軟正黑體 ”字
樣，例如以下範例 ：
default="normal bold 40px 微軟正黑體 , Arial, Tahoma, Helvetica, FreeSans, sans-
serif" value="normal bold 40px Arial, 微軟正黑體 "/>
修改妥當後，可以按「預覽」
鍵核對，若無誤請按「儲存
範本」儲存。
執行 「修改 HTML 」時請特
別小心 ，以免整個系統的程
式碼錯亂 …
43

44. Break and Q&A
 Google Blogger 實作演練 (10 分鐘 )
【練習題三 】
1). 將發表文章設定為 ”一律由管理者管理 ”
2). 邀請其他作者共同編輯部落格
44

45. 第四階段
個人 ( 教師 ) Blogger 教學網站分享
45

46. 幾個設計出眾的 Blogger 推薦
 http://hakashyu.blogspot.com/2011/10/css.html
 http://jinnsblog.blogspot.tw/
 http://www.premiumbloggertemplates.com/
 http://www.slideshare.net
46

47. Thank You!
47