3-19

Blo

gg

er

與Go

og

le

工具應用

Chapter用 Google Blogger 打造零成本專業級官方形象網站，連網路行銷也 Easy! 03

3.2 Blogger插入 YouTube影片

影片在網路行銷工具組合裡佔了舉足輕重的地位，隨著行動裝置的普及，影片

所能觸及的受眾也無所不在，而影像又比文字更能達到宣傳的效益，透過網路

的傳播，可以讓你的商品或服務加分，創造市場商機。而 Google 現更已對加

入影片、音樂或地圖等具吸引力主體的網站優先排序。在你的網站加入影片，

更能有效提升你的網站在 Google或其他搜索引擎上的排名。

其實現在 Blogger 已經可以讓你直接上傳影片！但 YouTube畢竟是 Google另

外一個獨立的平台，以流量的考量來說，將影片上傳至 YouTube後再嵌入至

Blogger，對網路行銷而言也能多增加曝光的機會。

用小工具插入YouTube影片

Step01 首先在 YouTube上將你欲插入至 Blogger的影片下方處點擊 [分享 ]。

YouTube網址：https://www.youtube.com

3-20

Google B

logger

用 Google Blogger 打造零成本專業級官方形象網站，連網路行銷也 Easy!

Step02 點擊後於下方顯示如下圖內容 → 此時在選項處點擊 [嵌入 ] → 隨即

出現一段程式碼 → 在程式碼下方點擊 [顯示完整資訊 ]。

Step03 點擊後會顯示影片「預覽」與「影片大小」等選項 → 點擊下方下拉

式選單 → 選擇 [自訂大小 ] → 填入寬度 → 於核取方塊勾選是否允許

其他選項 → 將整段程式碼選取複製。

3-21

Blo

gg

er

與Go

og

le

工具應用

Chapter用 Google Blogger 打造零成本專業級官方形象網站，連網路行銷也 Easy! 03

因小工具側欄寬度通常介於 200~300px之間，所以在設定上需選擇自訂大

小，你只需填入寬度數值後，系統會自動產生高度的數值，建議你選擇其一填

寫，畫面呈現才能維持正常的等比例。

取得 YouTube影片程式碼後，接下來請回到 Blogger的「版面配置」後台，點

擊開啟 [新增小工具 ] 後，選用 [HTML/JavaScript] 小工具。

Step01 至「版面配置」開啟小工具 [HTML/JavaScript]

Step02 將前述已複製的 YouTube影片程式碼貼至內容區塊 → 建立標題 (可

空白 ) → 點擊 [儲存 ]。

3-22

Google B

logger

用 Google Blogger 打造零成本專業級官方形象網站，連網路行銷也 Easy!

於網誌檢視後，若有變更影片大小的需求，可再次開啟編輯小工具，直接於程

式碼內的「width="xxx"」( 寬度 ) 與「height="xxx"」( 高度 ) 雙引號內修改

數值。

特別注意上述數值並無法直接變更為等比例數值，需兩項數值皆要做修改，如

果你不知道該如何計算等比例數值，請再次回到 YouTube嵌入介面重新填寫大

小設定，再回來修改，才不會導致影片看起來呈現奇怪的比例。

� 網誌上顯示樣式：

3-23

Blo

gg

er

與Go

og

le

工具應用

Chapter用 Google Blogger 打造零成本專業級官方形象網站，連網路行銷也 Easy! 03

將 YouTube影片插入至文章 (一 )

如果你插入的 YouTube影片是要放置在網頁文章區塊，讓影像畫面呈現較大比

例的顯示，此時我們便可使用「所見即所得編輯器」將影片嵌入至文章頁面。

Step01 首先請依照上一段 YouTube操作流程取得影片程式碼。

Step02 至 Blogger後台功能區 → 點擊 [新文章 ] 或 [新網頁 ]。

或

Step03 點擊後即開啟「所見即所得編輯器」 → 點擊左上方 [HTML]按鈕 →

將 YouTube取得的程式碼貼至內容區 → 建立標題。

若有變更影片大小的需求，可直接編輯程式碼內的 width="xxx"與

height="xxx" 雙引號內的數值即可。

3-24

Google B

logger

用 Google Blogger 打造零成本專業級官方形象網站，連網路行銷也 Easy!

Step04 點擊編輯器左上方 [撰寫 ] 按鈕 → 檢視影片是否正確 → 點擊 [發

佈 ]。

貼心提醒

在文章發佈前，你可先點擊右上方 [ 預覽 ] 按鈕，確認影片的長寬比例是否

符合頁面的寬度後，再點擊發佈建立文章。

� 網誌上顯示樣式：

7-7

會員群組系統網站運用

Chapter用 Google Blogger 打造零成本專業級官方形象網站，連網路行銷也 Easy! 07

7.2 利用協作平台製作 [專屬會員 ] 網站

本章開頭提到，如果你想建置一個必須經由登入後才能使用該網站內容或功能

的會員系統，那麼，我們可以利用 Google協作平台的「共用」機制，將站台

設置為「特定使用者才可以存取」的模式，如此便能建置一個簡單不花錢的會

員群組系統網站了！

其實，這就是工具應用上的一點小觀念改變。我們只要透過 Google協作平台

的「共用」機制，將站台變更為只有特定人員可以使用，那麼和一般的會員網

站有什麼不一樣，差別只在於使用者無法直接在我們的網站上申請註冊「加入

會員」罷了！

我們以下圖來展示運用的流程：

寄發產品頁連結與感謝歡迎郵件

進入會員網站

設定「共用」 權限

收到已「收取 付款」通知

銷售頁

金流付款PayPal

當然，以自動化和運用功能上可能沒辦法像一般的會員網站那麼的方便，因為

我們必須得用「手動」的方式逐一將會員的 Google帳號新增至我們的網站。

而會員網站的運用功能上，大致也只能做成教學平台、圖檔或音樂檔的下載平

台，或簡易的論壇。但對於不需要太多會員網站功能的建置者來說，也算是足

夠了。

7-8

Google B

logger

用 Google Blogger 打造零成本專業級官方形象網站，連網路行銷也 Easy!

共用和權限設定流程

首先，你的會員是必須具備與擁有 Google Gmail帳號。雖說這和一般的註冊

會員使用習慣會有所不同 (一般網站在註冊會員時可使用自己常用的電子郵件

信箱 )，對使用者可能會感覺不便；如果你的會員沒有 Gmail帳號，也只能請

他多擔待些，再去申請一個 Google帳號囉！

Step01 登入 Google協作平台會員網站頁面 → 於右上方點擊 [共用 ] 按鈕。

Step02 點擊後開啟「管理協作平台」頁面 → 於擁有者上方點擊 [變更 ] 。

7-9

會員群組系統網站運用

Chapter用 Google Blogger 打造零成本專業級官方形象網站，連網路行銷也 Easy! 07

Step03 點擊後會開啟三組選項按鈕頁面 → 選擇「特定人員」 → 點擊 [儲

存 ]。

Step04 此時「擁有存取權的使用者」即變更為「私人」 → 再於下方「邀請別

人 : 」的框內用滑鼠點擊左鍵一下。

變更為「私人」

用滑鼠點擊左鍵一下

7-10

Google B

logger

用 Google Blogger 打造零成本專業級官方形象網站，連網路行銷也 Easy!

Step05 點擊後於框內寫入會員的 Gmail帳號 → 於右方下拉式選單內選擇

[可以檢視 ] → 勾選透過電子郵件通知對方 (如需於信件中撰寫其他

內容可點擊 [新增郵件 ] 編輯 ) → 點擊 [傳送 ]。

Step06 完成後即於「是擁有者」的下方儲存與顯示該共用者的會員帳號並顯

示其權限。

經由以上的設定流程，只有經由你加入「共用」的會員能存取這個網站，其他

人便無法進入，如此便達成運用協作平台來製作 [專屬會員 ] 網站的目的了。

7-11

會員群組系統網站運用

Chapter用 Google Blogger 打造零成本專業級官方形象網站，連網路行銷也 Easy! 07

啟用頁面層級權限設定流程

此項功能幫助我們針對會員的層級來設定其存取控制。例如：你所販售的線上

課程區分為基礎、進階與全套，那麼你只要將各項區分課程內容建置於不同的

獨立網頁，再啟用頁面層級權限的設定，便能對會員限定各區分內容的存取控

制了。

Step01 開啟「管理協作平台」頁面 → 於右上方點擊 [啟用頁面層級權限 ] 。

Step02 點擊後彈出浮動說明視窗 → 點擊下方 [開啟頁面層級權限 ] 。

7-12

Google B

logger

用 Google Blogger 打造零成本專業級官方形象網站，連網路行銷也 Easy!

Step03 開啟後會於左側顯示頁面選項 → 點擊欲設定使用者權限的頁面標題

→ 於右方點擊 [變更 ] 。

選擇頁面標題

Step04 點擊後開啟權限設定浮動式窗 → 點選 [使用自訂權限 ] → 再選擇針

對使用者的權限是「加入」還是「不要加入」 → 點擊 [儲存 ] 。