給 Blogger Blog 建立個簡易的數位時鐘

---

提示 :
1. 本數位時鐘的效果樣式 : 

2. 進行安裝此小工具之前請您先將你的 Blogger Blog 主題作備份。(備份的方法)

安裝此小工具的方法 :

Step 1. 登入您的 Blogger Blog；

Step 2. 點選 Blogger 控制台版面的「主題」項目 > 再點選主題的 " 編輯 HTML "；

Step 3. 將電腦滑鼠點擊所開啟的 HTML 頁面內(任何位置皆可)；

Step 4. 按壓電腦鍵盤上的 CTL+ F 兩按鍵，此時 HTML 版面區域內的右上角將出現一個搜尋欄框；

Step 5. 使用電腦鍵盤在此搜尋欄框內輸入 </style>，再按電腦鍵盤上的 Enter 按鍵，之後，HTML 版區將顯現出黃色襯底的 </style> 內容段；

Step 6. 將如下的程式碼拷貝張貼到 </style> 的上方

#realtime {
    font-family: Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
    font-weight: 700;
    display: block;
    text-align: center;
    font-size: 30px;
    padding: 4rem 0;
}

#realtime span {
    display: inline-block;
    font-family: Avenir Next, Nunito, sans-serif;
    font-weight: 100;
    font-size: 8vw;
    position: relative;
    top: -2vw;
}

@media all and (max-width: 600px) {
    #realtime {
        font-size: 4rem;
        padding: 2rem 0;
    };
}

@media all and (max-width: 350px) {

    #realtime {
        font-size: 3rem;
        padding: 2rem 0;
    };
}

Step 7. 以上動作確認無誤後，點擊 HTML 版面區域左上方位的儲存主題 ;

Step 8. 在 Blogger Blog 後控制台版區，點選 版面配置 > +新增小工具 > 點選(新增)HTML/Javascript(小工具)，在 HTML/Javascript(小工具)的大框格內貼入下方的程式碼 + 並在其標題格內填入 D-Clock (此文字內容可以自訂，或是給于留空) > 再點按 HTML/Javascript(小工具)的儲存。(請參考 : 示意圖)

<time id="realtime"></time>
<script type='text/javascript'>
var currentTime = document.getElementById("realtime");
function zeropadder(n) {
  return (parseInt(n,10) < 10 ? '0' : '')+n;
}
function updateTime(){
  var timeNow= new Date(),
  hh = timeNow.getHours(),
  mm = timeNow.getMinutes(),
  ss = timeNow.getSeconds(),
  formatAMPM = (hh >= 12?'PM':'AM');
  hh = hh % 12 || 12;
  currentTime.innerHTML = hh + ":" + zeropadder(mm) + ":" + zeropadder(ss) + " " + formatAMPM;
  setTimeout(updateTime,1000);
}
updateTime();
</script>

(示意圖)

Step 9. 完成。

提 示 :
1. 變更程式碼內紅色的內容可以改變數字時鐘的外觀 ;
2. 你可以將所增加的 數字時鐘 版塊利用電腦滑鼠給移動安置在你意向的網頁面位置。

---