Google 教學鮮師部落格(玩玩Google及其工具吧): 3-5如何將數位之牆的[部落輪播]功能放入Google的部落格(HTML-JavaScript網頁元素)

3-5如何將數位之牆的[部落輪播]功能放入Google的部落格(HTML-JavaScript網頁元素)
http://econsultant520.blogspot.com/2008/02/3-5googlehtml-javascript.html
先備知識:
2如何申請google的免費電子郵件帳號
http://econsultant520.blogspot.com/2008/01/2google.html

3如何在gmail中啟用Google所提供的對應部落格
http://econsultant520.blogspot.com/2008/01/3gmailgoogle.html

3_1如何在google提供的部落格中,設定接受e-mail的方式來產生新文章
http://econsultant520.blogspot.com/2008/01/31googlee-mail.html

3_4_1如何受邀在他人的部落格發表文章
http://econsultant520.blogspot.com/2008/01/341.html

3_4如何邀請他人來共同發表部落格的文章
http://econsultant520.blogspot.com/2008/01/34.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_5如何在Google提供的部落格中出現投影片(圖片輪播)的功能 (投影片網頁元素)
http://econsultant520.blogspot.com/2008/02/35google.html

3_5如何在Google提供的部落格中，出現Youtube影片區的功能(視訊列網頁元素)
http://econsultant520.blogspot.com/2008/02/35googleyoutube.html

本文:
http://www.digitalwall.com (數位之牆)

提供[部落輪播]功能(能顯示業界動態新聞);

如何透過Google部落格中的[HTML/JavaScript]網頁元素;

將其添加到部落格中指定的位置;

學會此功能;就能將許多網站提供的功能;

添加到自己的部落格喔!

影音教學示範網址如下:
http://video.google.com/videoplay?docid=-9211167074806139343

簡報檔連結及下載網址如下:

http://www.slideshare.net/p_yang/35googlehtmljavascript

Slide 1: 3-5 如何將數位之牆的 [ 部落輪播 ] 功能放入 Google 的部落格 (HTML/JavaScript 網頁元素 ) 楊乾中 2008 年 2 月 cmtycc@gmail.com

Slide 2: 3-5 如何將數位之牆的 [ 部落輪播 ] 功能放入 Google 的部落格 (HTML/JavaScript 網頁元素 ) • 1. 到網址 http://www.digitalwall.com ( 數位之牆 )1, 選 [ 部落輪播 ] 選項 • 2. 出現 [<< 數位之牆 >> 部落輪播 ] 視窗 ; 顯示科技產業動態輪播內容 ; 移動 [ 捲軸 ]1 往下 • 3. 移到輸入網址的文字方塊 1 • 4. 輸入網址 ( 本例為 econsultant520.blogspot.com ) 1, 依序選評論右方色塊 2, 標題右方色塊 3, 邊框右方色塊 4, 底色右方色塊 5, 選 [ 預覽及獲楊乾中 2008 年 2 月 cmtycc@gmail.com 得程式碼 ] 按鈕

Slide 3: 3-5 如何將數位之牆的 [ 部落輪播 ] 功能放入 Google 的部落格 (HTML/JavaScript 網頁元素 ) • 5. 顯示配置效果 , 選口 ( 最大化 )1 圖示 • 6. 出現配置效果與 HTML 碼 • 7. 在碼上按滑鼠左鍵一下自動全部選取 1, 按 Ctrl+V 雙鍵將此碼複製到剪貼簿 • 8. 到網址 mail.google.com, 出現 [ 歡迎使用 gmail 視窗 ], 輸入使用者名稱 ( 本例為 econsultant520)1; 密碼 2; 選 [ 登入 ]3 按鈕楊乾中 2008 年 2 月 cmtycc@gmail.com

Slide 4: 3-5 如何將數位之牆的 [ 部落輪播 ] 功能放入 Google 的部落格 (HTML/JavaScript 網頁元素 ) • 9. 出現 [Gmail 收件匣 ] 視窗 , 選 [ 更多 ]1 按鈕 • 10. 出現 [ 更多 Google 產品 ] 視窗 , 選口 ( 最大化 )1 圖示 • 11. 選 [Blogger]1 選項 • 12. 出現 [blogger 控制主頁 ] 視窗 , 選 [ 版面配置 ]1 選項楊乾中 2008 年 2 月 cmtycc@gmail.com

Slide 5: 3-5 如何將數位之牆的 [ 部落輪播 ] 功能放入 Google 的部落格 (HTML/JavaScript 網頁元素 ) • 13. 出現 [ 修改版面配置 ] 視窗 , 目前在 [ 版面配置 ] 標籤下的 [ 網頁元素 ] 標籤 , 選 [ 加入網頁元素 ]1 按鈕 • 14. [ 選擇新的網頁元素 ] 視窗 , 出現名稱為 [HTML/JavaScript] 的網頁元素 , 選 [ 加入 BLOG]1 按鈕 • 15. 出現 [ 設定 HTML/JavaScript] 視窗 • 16. 移到內容下的文字方塊 , 按 Ctrl+V 雙鍵 1, 出現 html 碼楊乾中 2008 年 2 月 cmtycc@gmail.com

Slide 6: 3-5 如何將數位之牆的 [ 部落輪播 ] 功能放入 Google 的部落格 (HTML/JavaScript 網頁元素 ) • 17. 移到標題下的文字方塊 , 輸入標題名稱 ( 本例為數位之牆 )1, 選 [ 儲存變更 ]2 按鈕 • 18. 返回 [ 修改版面配置 ] 視窗 , 版面出現所加入的網頁元素 ( 本例為 [HTML/JavaScript 網頁元素 ]) • 19. 調動 [ 數位之牆網頁元素 ] 如下圖 , 選 [ 儲存 ]1 按鈕 • 20. 出現您的變更已儲存訊息 , 選 [ 檢視 blog]1 按鈕楊乾中 2008 年 2 月 cmtycc@gmail.com

Slide 7: 3-5 如何將數位之牆的 [ 部落輪播 ] 功能放入 Google 的部落格 (HTML/JavaScript 網頁元素 ) • 21. 出現部落格內容 ( 本例 http://econsultant520.blogspot.com/), 部落格左方出現 HTML/JavaScript 網頁元素區 ( 所在位置與步驟 20 中的 [ 修改版面配置 ] 視窗一致 ), 選口 ( 最大化 )1 圖示 • 22. 移動 [ 捲軸 ]1 往下楊乾中 2008 年 2 月 cmtycc@gmail.com

Slide 8: 3-5 如何將數位之牆的 [ 部落輪播 ] 功能放入 Google 的部落格 (HTML/JavaScript 網頁元素 ) • 23. 左方出現數位之牆的 [ 部落輪播 ] 區 , 顯示產業動態 ( 若數位之牆頻寬不足 ; 有時會顯示不出 ; 可按 F5 鍵重新顯示 ) 楊乾中 2008 年 2 月 cmtycc@gmail.com

Slide 9: 1. 到網址 http://www.digitalwall.com ( 數位之牆 )1, 選 [ 部落輪播 ] 選項 1

Slide 10: 2. 出現 [<< 數位之牆 >> 部落輪播 ] 視窗 ; 顯示科技產業動態輪播內容 ; 移動 [ 捲軸 ]1 往下 1

Slide 11: 3. 移到輸入網址的文字方塊 1 輸入網址 1

Slide 12: 4. 輸入網址 ( 本例為 econsultant520.blogspot.com ) 1, 依序選評論右方色塊 2, 標題右方色塊 3, 邊框右方色塊 4, 底色右方色塊 5, 選 [ 預覽及獲得程式碼 ] 按鈕 1 2 新聞版面 3 的文字顏色 4 新聞版面 5 的 6 底色

Slide 13: 5. 顯示配置效果 , 選口 ( 最大化 )1 圖示 1 配置效果

Slide 14: 6. 出現配置效果與 HTML 碼

Slide 15: 7. 在碼上按滑鼠左鍵一下自動全部選取 1, 按 Ctrl+C 雙鍵將此碼複製到剪貼簿在碼上按滑鼠左鍵一下自動全部選取 1, 按 Ctrl+C 雙鍵 2

Slide 16: 8. 到網址 mail.google.com, 出現 [ 歡迎使用 gmail 視窗 ], 輸入使用者名稱 ( 本例為 econsultant520)1; 密碼 2; 選 [ 登入 ]3 按鈕 1 2 3

Slide 17: 9. 出現 [Gmail 收件匣 ] 視窗 , 選 [ 更多 ]1 按鈕 1

Slide 18: 10. 出現 [ 更多 Google 產品 ] 視窗 , 選口 ( 最大化 )1 圖示 1

Slide 19: 11. 選 [Blogger]1 選項 1

Slide 20: 12. 出現 [blogger 控制主頁 ] 視窗 , 選 [ 版面配置 ]1 選項 1

Slide 21: 13. 出現 [ 修改版面配置 ] 視窗 , 目前在 [ 版面配置 ] 標籤下的 [ 網頁元素 ] 標籤 , 選 [ 加入網頁元素 ]1 按鈕 1

Slide 22: 14. [ 選擇新的網頁元素 ] 視窗 , 出現名稱為 [HTML/JavaScript] 的網頁元素 , 選 [ 加入 BLOG]1 按鈕 1

Slide 23: 15. 出現 [ 設定 HTML/JavaScript] 視窗

Slide 24: 16. 移到內容下的文字方塊 , 按 Ctrl+V 雙鍵 1, 出現 html 碼 Ctrl+V 雙鍵 1

Slide 25: 17. 移到標題下的文字方塊 , 輸入標題名稱 ( 本例為數位之牆 )1, 選 [ 儲存變更 ]2 按鈕 1 2

Slide 26: 18. 返回 [ 修改版面配置 ] 視窗 , 版面出現所加入的網頁元素 ( 本例為 [HTML/JavaScript 網頁元素 ])

Slide 27: 19. 調動 [ 數位之牆網頁元素 ] 如下圖 , 選 [ 儲存 ]1 按鈕 2 1

Slide 28: 20. 出現您的變更已儲存訊息 , 選 [ 檢視 blog]1 按鈕 1

Slide 29: 21. 出現部落格內容 ( 本例 http://econsultant520.blogspot.com/), 部落格左方出現 HTML/JavaScript 網頁元素區 ( 所在位置與步驟 20 中的 [ 修改版面配置 ] 視窗一致 ), 選口 ( 最大化 )1 圖示 1

Slide 30: 22. 移動 [ 捲軸 ]1 往下 1

Slide 31: 23. 左方出現數位之牆的 [ 部落輪播 ] 區 , 顯示產業動態 , ( 若數位之牆頻寬不足 ; 有時會顯示不出 ; 可按 F5 鍵重新顯示 )