如何在Blogger加入時鐘小工具

到Blogger後台，在[版面配置]中點選新增小工具，本範例是新增在側邊欄。

選擇HTML/JavaScript開啟設定視窗。

複製下面的程式碼，貼到HTML/JavaScript設定視窗的內容中然後按儲存。

<div id="simple_clock"></div>

<script>
startTime();
function startTime(){
  var today = new Date();
  var hh = today.getHours();
  var mm = today.getMinutes();
  var ss = today.getSeconds();
  mm = checkTime(mm);
  ss = checkTime(ss);
  document.getElementById('simple_clock').innerHTML = hh + ":" + mm + ":" + ss;
  var timeoutId = setTimeout(startTime, 500);
}

function checkTime(i){
  if(i < 10) {
    i = "0" + i;
  }
  return i;
}
</script>
<style>
#simple_clock{
  color:white; /* 文字顏色 */
  font: 2em sans-serif; /* 文字大小 */
  background: black; /* 背景顏色 */
  margin: 5px; /* 邊框外的留白 */
  padding: 5px; /* 文字和邊框的距離 */
  border: solid gray 2px; /* 邊框樣式 顏色 粗細 */ 
  border-radius: 10px; /* 邊框圓角大小 */
  width:140px; /* 時鐘寬度 */
  text-align:center; /* 文字置中 */
}
</style>

新增完後點選版面配置頁面右上方的儲存排列方式即可，效果如下。