google blogger 的教學簡報

1

Google Blogger 的架設與操作教學

講師： Marrs Hsu

泓彥資訊股份有限公司2012-08-31

2

講師介紹

許木成 Marrs Hsu

泓彥資訊股份有限公司總經理

電子郵件 : [email protected], [email protected]

Facebook: [email protected]

我的部落格 : [email protected]

專長：• 寬頻接取網路 (FTTX 方案 ) 、網路通訊及資訊安全。• 攝影器材。

3

課程內容第一階段部落格 (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 分鐘

4

第一階段部落格 (Google Blogger) 的基礎建置

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

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 』。

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/網誌

7

Blogger( 部落格 ) 的優點… 可以記錄您的生活紀事，並透過標籤將所有事件 ( 文章 ) 作自動分類，讓觀眾點

閱時更加方便。一篇文章就是一個獨立網頁，並可透過內建的 Google 搜尋來快速找尋舊文章。可以很容易的透過 Youtube 影音、 PowerPoint 簡報、 Picasa 相簿、網路問券

調查等功能之整合，讓你的部落格發揮最大 ( 教學 ) 效益。觀眾 ( 學生或家長 ) 可以透過留言與我緊密互動。內建訂閱功能，當有新文章時，我的觀眾可以透過 Google Reader( 閱覽器 ) 接收

到最新訊息。網頁元件容易整合其他功能。沒有廣告、也沒有收費的問題。

8

Google Blogger 與其它部落格的不同 ? Blogger 的優點：

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

9

Google Blogger 與其它部落格的不同 ? ( 續 )

Blogger 的缺點：• 模板的語法複雜，新手不易修改。• 無多層分類及文章加密功能。• 無中文使用者論壇，缺少心得交換及統一解答疑惑的平臺。

10

開始來設立你自己的 Blog 吧 ! 設立設立 Blog Blog 前的準備前的準備 ::

• 須先申請好 Gmail 帳號。• 建議將 Picasa(Google 圖庫 ) 、 Google Reader 的帳號也申請妥當。

• 請先登入您的 Google 帳號 (https://accounts.google.com/)

• 請登入 Google Blogger…

11

開始來設立你自己的 Blog 吧 ! ( 續 )

開始來設立你的部落格開始來設立你的部落格• 請登入 http://www.blogger.com/ ，並輸入你事先申請的 Gmail 帳號及密

碼。• 按「開始使用 Blogger」。• 按「新增網誌」。• 輸入標題＞輸入地址＞選定範本＞按「建立網誌」。 (範本可以先任意選定，待會兒還可以慢慢的選換… )

• 大功告成。

12

Blogger 的範本設計請點選：右上角「設計」，再按「網誌即時狀態 / 自訂」進入範本設計工具

挑選範本挑選範本• 選定你所喜愛的版型，然後按「套用至網誌」。

挑選背景挑選背景• 移除圖片＞點選 ▼ 按鈕＞選定背景圖片後按「完成」。

調整寬度調整寬度• 非必要，建議可先不調動。

版面配置版面配置• 請選定”主體版面配置” 、”頁尾版面配置”

進階設定進階設定• 主要是作版面的文字及文字顏色 / 大小調整。

選定後請按「套用至網誌」＞「返回 Blogger」

13

Blogger 的版面文字調整請點選：設計＞網誌即時狀態 / 自訂＞進階

網誌標題

標籤背景

標籤文字

日期標題

文章標題

文章背景

小工具標題

小工具文字

網誌說明

14

請點選：新文章＞開始”撰寫” ＞發佈 ( 或是僅儲存而不發佈 )

• 文字編輯器的功能大致上與 Word 相差不大。• 右側的「文章設定」部份，除了”標籤”外，都可忽略不動。

文章編輯工具介紹

Blogger 的新文章建立

內建字型

字型大小

標題類別

文字背景顏色

新增或移除連結

插入影片

插入圖片

插入分頁

頁尾增加標籤

15

(補充 ) 新文章建立：崁入外部 (Picasa) 圖片請點選：新文章＞輸入文章標題＞開始”撰寫” ＞插入圖片請選定要上傳的圖片＞再按「加入所選圖片」來完成。 ( 也可按「來自 Picasa 網路相簿」來選定網路圖片 )

( 在文字編輯器內直接點選圖片，可以切換圖 / 文位置點 )

16

(補充 ) 新文章建立：崁入 YouTube 影片請點選：新文章＞輸入文章標題＞開始”撰寫” ＞插入影片請選定要上載的影片＞再按「選擇要上載的影片」來完成。 ( 也可按「從 YouTube 」，再輸入搜尋名稱來選定網路影片 )

( 在文字編輯器內直接點選影片，可以移動放置點 )

17

(補充 ) 新文章建立：崁入 PPT 簡報檔請點選：新文章＞輸入自訂標題＞點選 HTML 另開新視窗，點選 www.slideshare.net (註冊並登入 )

• 將事先準備好的簡報 Upload 到 slideshare 網站。 Upload ＞ Upload ＞選定要上傳簡報檔＞等系統回覆成功訊息 !

點選” My Upload” ＞點選你所指定的檔案＞點選 Embed ＞拷貝網址＞轉貼到 Blogger 的新文章 HTML 欄內＞按發佈

18

(補充 ) 新文章建立：崁入 Google 行事曆請點選：新文章＞ HTML 另開新視窗，登入 Google 日曆＞點選指定分享的日曆＞日曆設定

• 點選「嵌入此日曆之”自訂顏色、大小與其他選項” 」• 挑選：顯示、預設檢視、寬度 /高度、週起始於、背景顏色、邊框，完成後

請按下「更新 HTML」並複製 CSS Code 。

請將 CSS code 轉貼到 Blogger 文字編輯器內，再按下「發佈」。

19

(補充 ) 新文章建立：崁入網路問券調查請點選：新文章＞ HTML 請另開視窗： http://spreadsheets.google.com/newform

• 開啟網址，並登入 Google 帳號後即可開始製作問卷。• 請先將問卷標題與敘述填妥，這樣大家才知道這個問卷的範圍與主要目的。• 接著在「問題標題」處輸入第一個問題的內容，下方的「說明文字」可以簡

單的界定一下這個問題的範圍。 • 打完第一個問題之後，可以按一下〔 + 新增問題〕繼續寫下一個問題。• 每個問券都可以套用不同的主題。

請點選：更多動作＞崁入，再將程式碼貼到你的 HTML

編輯器內，再按發佈。

20

Break and Q&A

Google Blogger 實作演練 (20 分鐘 )

【練習題一】

1). 建立第一個部落格 2). 編輯帳號資訊 3). 選用個人的部落格模板 4). 發表第一篇文章 5). 練習在文章中崁入圖片、影片、簡報

21

第二階段部落格 (Google Blogger) 的進階功能

• 活用部落格小工具• 使用 Google 閱讀器 ( 和 Blogger 密切相關功能 )

22

Blogger 的版面配置 ( 小工具 ) -1

上欄的小工具• 在上欄點選「新增小工具」＞新增「連結清單」。

1). 建議標題空白，並填入網址及網站名稱 ( 例 : 回到首頁 ) ，按儲存。 2). 新增連結，重覆上述動作，製作你想要前往的網頁 ( 例 : 關於我 ) 。

選定後可以自行搬移位置，但請記得要按「儲存排列方式」來儲存您的設定。

( 儲存後，也可以透過前臺直接作小工具內容的修改 )

23


左側欄的小工具• 新增「連結清單」

可設定為：外部的連結網頁、外部的連結圖片 ( 網路圖庫 )

可設定為：外部的連結檔案 ( 文章 / 成績單 / 出缺勤表… ) 。

• 請點選：設計＞設定＞版面配置＞新增小工具請在側欄點選「新增小工具」請在「連結清單」欄按＋輸入標題欄＞連結數請空白＞輸入網站名稱＞輸入網址＞儲

存若要新增連結，請在相同版位再按”編輯”即可進入新增

24


左側欄的小工具• 新增「標籤」文章內的標籤可透過小工具顯示在

側欄，方便訪客可透過分類快速找到須要的文章。

不過還是建議一篇文章的標籤能控制在三個以內，否則側欄會顯得有點鎖碎。

點選”選取的標籤” ＞選取你所要顯示的側欄標籤＞儲存

25


左側欄的小工具• 新增「網誌封存」

26


左側欄的小工具

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

27


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

28


右側欄的小工具• 新增「搜尋框」

29


右側欄的小工具• 新增「透過電子郵件追蹤」

30


右側欄的小工具• 新增「熱門文章」

31


右側欄的小工具• 新增「新聞影片」

32


右側欄的小工具• 新增「圖片」

33

使用 Google 閱讀器 Google 閱讀器 (Google Reader) 是 Google 旗下一個部落格閱讀器，能提

供在線 ( 或離線 ) 的 Atom 和 RSS 新文章閱讀。

• RSS 的英文全稱是 Really Simple Syndication ，是一種透過特性所制定的格式，讓網站的管理者可以把部落格文章、新聞、音訊或視訊以像是電子報或新聞群組的方式自動下載給訂閱戶。• Atom 是更新、更嚴謹的格式標準，也是 IETF 組織所制定的 (RSS)替代標準。

使用者可以直接輸入 RSS 或 Atom 的 URL ，或透過搜尋功能來添加訂閱。每個新增文章的未讀條數會自動更新並在左欄中顯示，且可以按日期或相關性進行排序。

你也可以在你的部落格開放 RSS/Atom 的訂閱。

34

Break and Q&A

Google Blogger 實作演練 (10 分鐘 )

【練習題二】

1). 將文章分類

2). 調整小工具重新編排版面

35

第三階段部落格 (Google Blogger) 的管理和設定

• 權限設定：邀請其他作者共同編輯• 權限設定：限定讀者點閱• 留言 ( 學生發言 ) 的管理• 進階後臺管理設定

36

關於 Blogger 管理員小組網誌的管理員可以存取網誌的設定和範本，也可以編輯和刪除其

他成員張貼的網誌文章。此外，管理員還可以新增或移除其他小組成員，而且可將單一網誌的管理權限指派給多位成員，人數不限。

如果您邀請小組成員加入網誌，且對方接受邀請，系統在預設狀態下會將這些成員列為「作者」。「作者」只能建立和編輯自己的文章。

如要將作者變更為管理員，您可以使用該作者名稱旁的下拉式選單進行變更。如果網誌只有一位管理員，則無法撤銷其管理權限。

37

Blogger 的權限管理：新增網誌作者請點選：設計＞設定＞網誌作者

• 網誌作者也就是管理員，你可以按新增作者來新增管理員。• 輸入帳號或是從 Gmail 連絡簿裡挑選新增名單，完成後請按「邀請作

者」，然後等對方回覆確認後即可。

38

Blogger 的權限管理：如何移除網誌作者請點選：設計＞設定＞網誌作者

• 若要移除小組成員，請移至 [ 設定 | 權限 ] 標籤，然後按一下您想移除之成員的「移除」連結。

• 這麼做可讓被移除的小組成員無法建立其他文章，但不會移除該成員先前張貼的項目。

39

Blogger 的權限管理：新增網誌讀者請點選：設計＞設定＞網誌作者

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

40

Blogger 的留言管理請點選：設計＞設定＞文章和留言＞留言設定欄

• 留言位置：崁入 / 整頁模式 /彈出式視窗 /隱藏• 誰能留言：任何人 (包括匿名使用者 )/已註冊的使用者 /

擁有 Google 帳號的使用者 /僅限此網誌的成員

• 留言管理：一律 / 有時 /永不 ( 留言後會顯示：您的意見在核准之後就能被看見。 )

將電子郵件管理要求寄給 (請輸入管理者的郵件帳號，有留言就會即時通知 )

• 顯示字詞驗證：是 /否 (因為驗證碼常常會看不懂 )

• 顯示反向連結：顯示 /隱藏• 留言欄訊息：管理者保留「留言欄」的事先審核 (刊登 ) 權 ~

41

如何宣傳你的 Blogger

將您的網誌連結至 Google+ ：如果您將 Blogger 簡介切換成 Google+ ，即可運用自動分享功能、 Google+ 網誌社群及日後推出的各項功能，培養自己的忠實讀者群。

將搜尋引擎的機制納入考量：善用 Blogger 的搜尋偏好設定功能，讓讀者更容易找到您的內容。

允許以電子郵件傳送文章：如果您的網誌使用以電子郵件傳送文章的功能，讀者即可將您的文章轉寄給朋友。這樣做可能不會立即對您的網站統計資料產生影響，但是可以讓其他人為您宣傳您的網站。

啟用您的網站資訊提供：如果讀者透過新聞閱讀器訂閱您的網站資訊提供，就更有可能閱讀到您的文章。

將您的網誌加入 Blogger 清單：如果您將網誌加入我們的清單，您的網誌就會顯示在 Nextblog 、最近更新和其他地方，就像選擇加入流量一樣。

定期發佈文章：您的網誌內容越豐富，就能得到越多的流量。

42

如何更換外掛的模板…

可以到 http://www.premiumbloggertemplates.com/ 下載模板 http://btemplates.com/

下載後解壓縮檔案，裡面應該會有一個 Readme.txt ，此檔中會說明如何去更新 Blogger 的模版。

解壓縮後，檔案中有模版的 XML ，如： negra02.xml

先備份舊的模版，避免之後反悔想要回復。請點選：設計＞範本＞備份還原＞上載範本 /選擇檔案 > 選定模板

43

幫你的 Blogger 更換中文字型請點選：設計＞範本＞修改 HTML ＞繼續＞展開小裝置範

本

在 HTML 程式碼內找尋下列的字串，並按下面語法增加”微軟正黑體”字樣，例如以下範例：

default="normal bold 40px 微軟正黑體 , Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 40px Arial, 微軟正黑體 "/>

修改妥當後，可以按「預覽」鍵核對，若無誤請按「儲存範本」儲存。

執行「修改 HTML」時請特別小心，以免整個系統的程式碼錯亂…

執行「修改 HTML」時請特別小心，以免整個系統的程式碼錯亂…

44

Break and Q&A Google Blogger 實作演練 (10 分鐘 )

【練習題三】

1). 將發表文章設定為”一律由管理者管理”

2). 邀請其他作者共同編輯部落格

45

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

46

幾個設計出眾的 Blogger 推薦

http://hakashyu.blogspot.com/2011/10/css.html

http://jinnsblog.blogspot.tw/

http://www.premiumbloggertemplates.com/

http://www.slideshare.net

47

Thank You!

google blogger 的教學簡報

Education