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