Google blogger 的架設與操作教學

1
Google Blogger 的架設與操作教學

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

24
• 新增「網誌封存」

25
• 新增「簡介」
網誌作者的介紹，也可以替換為班級、
導師或管理員的簡介。

26
 右側欄的小工具
• 新增「網誌統計資料」

27
• 新增「搜尋框」

28
• 新增「透過電子郵件追蹤」

29
• 新增「熱門文章」

30
• 新增「新聞影片」

31
• 新增「圖片」

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

33
Break and Q&A
【練習題二】
1). 將文章分類
2).調整小工具重新編排版面

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

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

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

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

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

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

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

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

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

43
Break and Q&A
【練習題三】
1). 將發表文章設定為”一律由管理者管理”
2). 邀請其他作者共同編輯部落格

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

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

Google blogger 的架設與操作教學

More Related Content

Viewers also liked

Similar to Google blogger 的架設與操作教學

Google blogger 的架設與操作教學