很多的朋友有自己整理Youtube影片的需求,大部份的朋友直接使用Youtube上的播放清單,把自己喜歡的影片都放在清單中,日後可以直接透過這個播放清單就可以看到自己整理的影片列表。但是,如果你整理這些清單的目的,是為了和其它的網友分享,有自己的網頁版面,可能更能突顯您想要表達的訴求。

  建立一個網頁,把這些影片整理在你自己的網頁中,既然是自己的網頁,那麼想要在網頁中放哪些廣告或內容,就可以自己決定,彈性比較大。這篇文章,何老師就要教大家,只要利用這樣現成的TubeLists模板,不需要會Javascript以及jQuery等網頁技術,就可以整理自己喜歡的影片清單,加入自己的廣告內容,變成自己的宣傳網頁或是影片訊息整合網頁。首先,還是請大家先看【賀寶芙影片集】和【旗艦手機影片集】這兩個網站。

  有沒有發現這兩個檔案內容模板一模一樣但是影片內容完全不一樣?!對了,這就是我們要介紹的範本!這個範本主要是以Javascript和jQury寫成的,為了方便大家使用,裡面主要的元素「影片」是放在Javascript的陣列中,所以,你只要把這個網站中的其中兩個檔案index.html以及main.css下載回去,然後使用文字編輯器打開index.html這個檔案,找到檔案中的說明,然後再把你要放在網站中的影片標題程影片的Youtube ID放進去,就大功告成了。沒錯,你只要會編輯文字檔,你就可以把這個網站改為你自己的!下載檔案的連結如下:

[wpdm_package id=’2414′]

  當然,第一個步驟就是要有自己的網址。便宜的網址,可以在這裡:【BuyName4.me】或是這裡:【中華虛擬主機網】中購買,挑一個正在促銷中便宜的就好了。當然您可以使用免費的,不過,免費的網址比較沒那麼漂亮,也比較不穩定。另外,您可以可直接跟有送網址的主機商購買,一次擁有網址和主機空間。有送網址的主機商包括【iPage】、【GreenGeeks】、【Arvixe】【iMaxNOW】等等。

  TubeLists必須放在一台虛擬主機中,Linux或是Windows主機均可。當然也有免費的主機可以選擇,如【Yabi.Me】以及【000webhost】等,但是如果要有比較好的效能,還是以前面所介紹的幾個付費主機商為主。另外,如果您已經有了網址(例如【在PCHOME買國內網址】),那麼可以考慮【HostGator】這個主機,它們在國外的主機評比還算不錯。【什麼是虛擬主機】以及【如何選擇虛擬主機】也請參考這兩篇文章。

 假設你已經有主機以及網址,而且可以登入主機的主控台的話,請把在前面下載完的檔案在你的電腦中解壓縮,就會出現2個檔案,分別是index.html以及main.css。請利用您的文字編輯器(推薦使用Sublime Text),找出index.html中以下的程式片段:

tubelist01

  您要改的地方大到就是兩個,一個是變數webtitle後的文字,那是在網站右上角處的網站標題,另外,在vieolist中,也就是我們用紅色線框起來的地方,就是Youtube影片的連結文字和影片ID,而其中影片ID就是Youtube在播放影片時,網址處我們用紅色線框起來的地方,如下:

tubelist02

  所有在這些列表中的影片,前面8支影片會被放在主選單中連結,而其它的部份則被放在左側邊欄,如下所示:

tubelist03

  另外,我們在範本中還放了3個廣告位置,分別放在上方的橫幅,寬度為728×90,左側邊欄下方,格式是336×280,還有一個是影片的下方,是468×60的廣告格式。您可以置換成自己的Google Adsense廣告單元,或是換成同等大小的圖片內容,做為自己的網站訊息。

  全部改好之後,請直接進入虛擬主機的控制台中,找到檔案管理員,如下所示(在此我們以iMaxNOW的cPanel為例):

tubelist04

  我們這個帳戶的網址是cash.oo.gd,因為在此之前已經建立好一個子網域叫做make.cash.oo.gd,而且把此子網域指向public_html底下的make目錄,所以檔案結構看起來像是下面這個樣子:

tubelist05

  在這裡我們只要確認你目前的目錄是make,然後按下【上傳】按鈕,然後把我們之前改好的那兩個檔案index.html以及main.css分別上傳到目錄中,如下所示:

tubelist06

  基本上就大功告成了。您可以使用http://make.cash.oo.gd或是http://cash.oo.gd/make這兩個網址來連結上我們的影片集網站。在這裡,如果還需要再個別修改影片資料的話,只要點選程式碼編輯器,也可以直接在此編輯,非常方便。

  下一篇文章,我們再來教大家這個模版網頁的編寫Javascript以及jQuery原理,敬請期待。

(666)

%d 位部落客按了讚: