在 Weebly 上製作倒數計時器

本文摘自 <Weebly in 3 Min>

前言:本文將假設你已經了解  <如何善用 App Center>

做網站時常遇到需要倒數計時器,像是促銷專案將到什麼時候結束,活動報名到什麼時候截止。有了倒數計時器就更能將訪客流量轉換成使用者行動,像是增加購買人數或是報名人數。小米之前的飢餓行銷某種程度上就是善用倒數計時器。

本文將要教你兩種方法如何在 Weebly 上安裝倒數計時器。



1. App Center 

首先,因為倒數計時器並不是 Weebly 的預設套件,我們得先去 App Center 下載倒數計時器。搜尋 Countdown,並選擇第一個的 Countdown (免費) 或是第三個的 Countdown Timer (免費),如下圖。

圖 1

這邊我選擇第一個的 Countdown,點擊後再點 Add,然後將他連到你的 Weebly 網站,如下圖。
圖 2

這個 Countdown 套件就會出現在你的 Weebly 網頁上了。
回到你的 Weebly Drag & Drop page,將 Countdown 套件拖曳到你想要的位置。接著,點擊 Countdown,他的編輯欄就會冒出來,就像其他的 Weebly 套件一樣,如下圖。
圖 3

你可以透過 Edit 進去來調整 Countdown Timer 上的文字,時間,大小,和設計,如下圖。
圖 4
使用第三方為 Weebly 寫的外加套件雖然方便但有個壞處。它們常常提供你兩個版本:免費版和付費版 ; 免費版功能常常有局限外,也常常有他們的 logo。如果你不介意他們的 logo,自然沒問題 ; 如果你介意,可能要自己來寫點 code,請繼續看第二個方法。


2. DIY

在使用第二個方法前,請先閱讀 <如何修改程式碼> 以及 <如何修改 JavaScript>。將以下提供的 HTML, CSS 和 JavaScript 個別貼在所屬的地方。你可以將 HTML code 用 Drag & Drop 的方式貼在網頁上任何地方 ; CSS 則是用 <style></style> 包裹起來後貼在   Page > 有用到 Countdown 的 page > SEO Settings > Footer。



因為製作 Countdown Timer 將需要為數較多的 JavaScript,所以我們特地把 JavaScript 獨立出來成一個檔案。進入 Theme > Edit HTML/CSS > Assets,成立新的檔案叫 countdown.js,並將提供的 JavaScript code 貼上,如下圖。
圖 1
最後,到 Page > 有用到 Countdown 的 page > SEO Settings > Footer,並將下列的 code 貼上。這是用來呼叫獨立出來的 JavaScript 檔案。

<script type="text/javascript" src="/files/theme/countdown.js">
</script>


這樣就大功告成啦~。







延伸閱讀 <如何製作 Count 套件>
comments powered by Disqus