365-43 <教學>製作before&after照片的語法─上傳Javascript

之前有預告過要來做照片Before&After效果的教學！！！
關於這個照片Before&After，是在我修改blogger樣式的前置作業。某天就想說如果要做好blogger，這樣展示照片的方是好像很不錯，就決定看看blogger有沒有內建的方式可以做到這個效果((結果沒有))，接著就在谷哥大海裡搜尋~~
搜尋的時候還真的不知道關鍵字要打什麼...照片前後比較？語法？弄了好久還是打英文key words(一陣搜尋之後)發現他是個叫TwentyTwenty的插件(plugin)，完全無法用關鍵字搜尋到阿！！！

他是包含了css和javascript的插件，因為blog的結構不是自己蓋的，無法直接複製語法貼上，加上要插入檔案也不知道要放哪，因此就算看了很多教學，但還是花了我很~~多的時間弄好他！！
如果對於css有些概念的人，這一篇應該很簡單；沒有概念的人也沒關係，我的目標是連猴子都可以輕易上手，各位看官肯定沒有問題！((握拳

這篇前置主要是教大家下載Javascript的檔案，並且上傳到網路(或伺服器)上，以便之後要使用時可以連結到檔案。

[下載Javascript]

首先，先到Wordpress的網站下載TwentyTwenty Version 1.0

下載好的檔案解壓縮之後就會有跟上圖一樣多的檔案！
其中有個「index.html」可以點進去，會有三種TwentyTwenty用法的示範網站，如果會看css的人可以關掉這個網頁了 =D

耶！教學完成！

如果看了還是不會用，那就繼續往下看吧~~

[上傳Javascript]

檔案中有Javascript的檔案，但我們沒有自己的伺服器時，可以將檔案上傳到Google雲端硬碟然後連結到Blogger。如果看不懂「伺服器」那一段的人，就照著接下來的步驟做就可以了！
如果喜歡看英文的朋友，也可以參考這篇How To Host Blogger CSS and Javascript Files in Google Drive。

先選擇要上傳的檔案，在這裡要上傳的是「css」和「js」資料夾裡面各兩個的檔案。

可以新建一個資料夾來放這幾個檔案，檔案名稱就如同上圖的四個。
建立好之後要分享檔案，所以編輯分享權限。

可以按住ctrl選擇四個檔案，一次一起變更。
選好後按右鍵，點「Share」或「分享」

在右下角會有個「Advanced」或「進階」的按鈕，點進去。

上面那一欄就是這個檔案的連結，不過現在還沒完成，之後網址可以從上一頁中得到。
在權限的部分點「Change」或「變更」。

選擇「Public on the web」，就是有地球圖案的那個。
這樣檔案就準備就緒了！

點開每個檔案都會有個連結網址，例如：
https://drive.google.com/file/d/0B7FtV5AdumvUNGppVDNyUTdYQmM/view?usp=sharing
這個網只可以複製檔按給別人，不過不能夠直接放在網站當中

必須要先把"https://drive.google.com/file/d/"和"/view?usp=sharing"移除，並在網址最前面加入"https://googledrive.com/host/"
簡單來說，就是把上面兩段當中紅色的部分結合在一起：
https://googledrive.com/host/0B7FtV5AdumvUNGppVDNyUTdYQmM

之後要用到這四個檔案的時候都要這樣子先處理過，這很重要，沒有處理過的話就算放入網址也沒用。

下一篇會教大家如何修改Blogger語法，崁入這次的插件，並在每篇發文當中放入before&after的圖片，請點擊365-44 <教學>製作before&after照片的語法─編輯html收看