3-5如何將Google Talk視窗嵌入到Google提供的部落格(Blogger)

先備知識:
2如何申請google的免費電子郵件帳號
http://econsultant520.blogspot.com/2008/01/2google.html

3如何在Google所提供的部落格，建立自己的部落格
http://econsultant520.blogspot.com/2008/01/3google.html

3_1如何在Google所提供的部落格，建立文章
http://econsultant520.blogspot.com/2008/01/31google.html
3_5如何在部落格中出現標籤區,讓使用者根據標籤找文章
http://econsultant520.blogspot.com/2008/01/35.html

3_5_1如何調動Google部落格中網頁元素的位置
http://econsultant520.blogspot.com/2008/02/351google.html

3_5_2如何將部落格中某一網頁元素移除 (標籤網頁元素)
http://econsultant520.blogspot.com/2008/02/352.html

相關單元:
3_3如何將MSN聊天視窗(即時熱線)嵌入到Google提供的部落格(Blogger)
http://econsultant520.blogspot.com/2008/01/33msngoogleblogger.html
3_3_1部落格嵌入MSN聊天視窗,訪客要如何使用
http://econsultant520.blogspot.com/2008/01/331msn.html
3-5如何將數位之牆的[部落輪播]功能放入Google的部落格(HTML-JavaScript網頁元素)
http://econsultant520.blogspot.com/2008/02/3-5googlehtml-javascript.html
3_3如何在Google所 提供的部落格，嵌入Youtube影片http://econsultant520.blogspot.com/2008/01/33google-youtube.html

本文:
MSN提供即時熱線,將聊天視窗嵌入到部落格或網站,
與MSN功能相近的Google Talk 當然不甘示弱;
亦提供此種用法,
所以您可以將Google Talk 嵌入到部落格或網站,
方便您做線上客服專線
3-5如何將Google Talk視窗嵌入到Google提供的部落格(Blogger)

影音教學示範網址如下:
http://video.google.com/videoplay?docid=9080579874517627642
簡報檔連結及下載網址如下:
http://www.slideshare.net/p_yang/35google-talkgoogleblogger















































Slide 1: 如何將 Google Talk 視窗嵌入 到 Google 提供的部落格 (Blogger) 楊乾中 2008 年 3 月 cmtycc@gmail.com
Slide 2: 如何將 Google Talk 視窗嵌入到 Google 提供的部落格 (Blogger) • 1. 輸入網址 http://www.google.com/talk/service/badge/ New 自動轉址到要您輸入 Google 帳號的 畫面 • 2. 輸入使用者名稱 ( 本例為 cmtycc)1; 密碼 2; 選 [ 登入 ]3 按鈕 • 3. 出現 [Create a Google Talk chatback badge] 畫面 , 選 [Edit]1 按鈕 • 4. 出現設定畫面 楊乾中 2008 年 3 月 cmtycc@gmail.com
Slide 3: 如何將 Google Talk 視窗嵌入到 Google 提供的部落格 (Blogger) • 5. 輸入標題 Title (optional):( 本例為 按此線 上語音溝通喔 )1, 及別名 Your nickname:( 本例為線上客服專線 )2, 將 Show your status message 打勾 3 • 6. 選 [update badge]1 按鈕 , 畫面及程式碼 馬上根據剛才設定 ( 步驟 5) 的翻新 • 7. 到程式碼區按右鍵 1, 出現選單 , 選 [ 全選 ]2 按鈕 • 8. 程式碼區的內容反白 , 呈現藍色區塊 楊乾中 2008 年 3 月 cmtycc@gmail.com
Slide 4: 如何將 Google Talk 視窗嵌入到 Google 提供的部落格 (Blogger) • 9. 藍色區塊按右鍵 1, 出現選單 , 選 [ 複製 ] 2 按鈕 • 10. 選 [sign out]1 脫離 • 11. 到網址 mail.google.com, 出現 [ 歡迎使 用 gmail 視窗 ], 輸入使用者名稱 ( 本例為 cmtycc)1; 密碼 2; 選 [ 登入 ]3 按鈕 • 12. 出現 [Gmail 收件匣 ] 視窗 , 選 [ 更多 ]1 按鈕 楊乾中 2008 年 3 月 cmtycc@gmail.com
Slide 5: 如何將 Google Talk 視窗嵌入到 Google 提供的部落格 (Blogger) • 13. 出現 [ 更多 Google 產品 ] 視窗 , 選口 ( 最大化 )1 圖示 • 14. 選 [Blogger]1 選項出現 [blogger 控制主 頁 ] 視窗 , 選 [ 版面配置 ]1 選項 • 15. 出現 [blogger 控制主頁 ] 視窗 , 選 [ 版 面配置 ]1 選項 • 16. 出現 [ 修改版面配置 ] 視窗 , 目前在 [ 版 面配置 ] 標籤下的 [ 網頁元素 ] 標籤 , 選 [add a page element]( 加入網頁元素 )1 按 鈕 楊乾中 2008 年 3 月 cmtycc@gmail.com
Slide 6: 如何將 Google Talk 視窗嵌入到 Google 提供的部落格 (Blogger) • 17. [ 選擇新的網頁元素 ] 視窗 , 出現名稱 為 [HTML/JavaScript] 的網頁元素 , 選 [ 加 入 BLOG]1 按鈕 • 18. 出現 [ 設定 HTML/JavaScript] 視窗 • 19. 移到標題下的文字方塊 , 輸入標題名稱 ( 本例為線上專線 )1, 移到內容下的文字方 塊 • 20. 按滑鼠右鍵 1 出現選單 , 選 [ 貼上 ]2 按 鈕 楊乾中 2008 年 3 月 cmtycc@gmail.com
Slide 7: 如何將 Google Talk 視窗嵌入到 Google 提供的部落格 (Blogger) • 21. 出現步驟 9 的程式碼 , 選 [ 儲存變更 ]1 按鈕 • 22. 返回 [ 修改版面配置 ] 視窗 , 版面出現所加入 的網頁元素 ( 本例為 [ 線上專線 ]), 選 [ 儲存 ]1 按 鈕 • 23. 出現您的變更已儲存訊息 , 選 [ 檢視 blog]1 按 鈕 • 24. 出現部落格內容 ( 本例 http://econsultant520.blogspot.com/), 部落格左方 出現線上專線網頁元素區 ( 所在位置與步驟 22 中 的 [ 修改版面配置 ] 視窗一致 ) 楊乾中 2008 年 3 月 cmtycc@gmail.com
Slide 8: 1. 輸入 http://www.google.com/talk/service/badge/New 網 址 1, 自動轉址到要您輸入 Google 帳號的畫面 轉址成 輸入 http://www.google.com/talk/service/badge/New 網址 1
Slide 9: 2. 輸入使用者名稱 ( 本例為 cmtycc)1; 密碼 2; 選 [ 登入 ]3 按鈕 1 2 3
Slide 10: 3. 出現 [Create a Google Talk chatback badge] 畫面 , 選 [Edit]1 按 鈕 1
Slide 11: 4. 出現設定畫面
Slide 12: 5. 輸入標題 Title (optional):( 本例為 按此線上語音溝通喔 )1, 及別名 Your nickname:( 本例為線上客服 專線 )2, 將 Show your status message 打勾 3 顯示 此帳號 1 的現狀 3 2
Slide 13: 6. 選 [update badge]1 按鈕 , 畫面及程式 碼馬上根據剛才設定 ( 步驟 5) 的翻新 翻新 1
Slide 14: 7. 到程式碼區按右鍵 1, 出現選單 , 選 [ 全選 ]2 按鈕 2 程式碼區按右鍵 1
Slide 15: 8. 程式碼區的內容反白 , 呈現藍色區 塊
Slide 16: 9. 藍色區塊按右鍵 1, 出現選單 , 選 [ 複製 ]2 按鈕 2 藍色區塊按右鍵 1
Slide 17: 10. 選 [sign out]1 脫離 1
Slide 18: 11. 到網址 mail.google.com, 出現 [ 歡迎使用 gmail 視窗 ], 輸入使用者名稱 ( 本例為 cmtycc)1; 密碼 2; 選 [ 登入 ]3 按鈕 1 2 3
Slide 19: 12. 出現 [Gmail 收件匣 ] 視窗 , 選 [ 更多 ]1 按鈕 1
Slide 20: 13. 出現 [ 更多 Google 產品 ] 視窗 , 選口 ( 最大化 )1 圖示 1
Slide 21: 14. 選 [Blogger]1 選項 1
Slide 22: 15. 出現 [blogger 控制主頁 ] 視窗 , 選 [ 版面配置 ]1 選項 1
Slide 23: 16. 出現 [ 修改版面配置 ] 視窗 , 目前在 [ 版面配置 ] 標籤下的 [ 網頁元素 ] 標籤 , 選 [add a page element]( 加入網頁元素 ) 1 按鈕 1
Slide 24: 17. [ 選擇新的網頁元素 ] 視窗 , 出現名稱為 [HTML/JavaScript] 的網頁 元素 , 選 [ 加入 BLOG]1 按鈕 1
Slide 25: 18. 出現 [ 設定 HTML/JavaScript] 視 窗
Slide 26: 19. 移到標題下的文字方塊 , 輸入標題名稱 ( 本例為線上專線 )1, 移到內 容下的文字方塊 1 插入點
Slide 27: 20. 按滑鼠右鍵 1 出現選單 , 選 [ 貼 上 ]2 按鈕 2 按滑鼠右鍵 1
Slide 28: 21. 出現步驟 9 的程式碼 , 選 [ 儲存 變更 ]1 按鈕 1
Slide 29: 22. 返回 [ 修改版面配置 ] 視窗 , 版面出現所加入的網頁元素 ( 本例為 [ 線上專線 ]), 選 [ 儲存 ]1 按鈕 1
Slide 30: 23. 出現您的變更已儲存訊息 , 選 [ 檢視 blog]1 按鈕 1
Slide 31: 24. 出現部落格內容 ( 本例 http://econsultant520.blogspot.com/), 部落格 左方出現線上專線網頁元素區 ( 所在位置與 步驟 22 中的 [ 修改版面配置 ] 視窗一致 )
Slide 32: 補充 1 • 到 http://www.google.com/talk/網址可下載 Google Talk 及使用線上 Google Talk 及取 得線上 Google Talk 程式碼嵌入部落格
Slide 33: 1. 到 http://www.google.com/talk/ 網 址 1, 選吐舌頭 2 按鈕 1 2 取得線上 Google Talk 程式碼
Slide 34: 2. 出現選單 , 選 [ 中文繁體 ]1 選 項 1
Slide 35: 3. 出現中文畫面 下載 Google talk 線上 Google Talk


先備知識:
2如何申請google的免費電子郵件帳號
http://econsultant520.blogspot.com/2008/01/2google.html

3如何在Google所提供的部落格，建立自己的部落格
http://econsultant520.blogspot.com/2008/01/3google.html

3_1如何在Google所提供的部落格，建立文章
http://econsultant520.blogspot.com/2008/01/31google.html
3_5如何在部落格中出現標籤區,讓使用者根據標籤找文章
http://econsultant520.blogspot.com/2008/01/35.html

3_5_1如何調動Google部落格中網頁元素的位置
http://econsultant520.blogspot.com/2008/02/351google.html

3_5_2如何將部落格中某一網頁元素移除 (標籤網頁元素)
http://econsultant520.blogspot.com/2008/02/352.html

相關單元:
3_3如何將MSN聊天視窗(即時熱線)嵌入到Google提供的部落格(Blogger)
http://econsultant520.blogspot.com/2008/01/33msngoogleblogger.html
3_3_1部落格嵌入MSN聊天視窗,訪客要如何使用
http://econsultant520.blogspot.com/2008/01/331msn.html
3-5如何將數位之牆的[部落輪播]功能放入Google的部落格(HTML-JavaScript網頁元素)
http://econsultant520.blogspot.com/2008/02/3-5googlehtml-javascript.html
3_3如何在Google所 提供的部落格，嵌入Youtube影片http://econsultant520.blogspot.com/2008/01/33google-youtube.html