自定義背景的部落格時鐘小物

4   Comments

Web Clock
有時看到某些部落格或網頁放上時鐘、日曆、倒數器等小玩物, 這類借用網站分享的小玩意似乎常見於個人風格. 相較於個人風格的就少見內嵌這些物件, 例如雜誌樣式這類大眾風格.
啊! 我一直想換成簡約風, 重整範本讓載入能夠非常流暢又具有未來感, 並移除"多餘"的物件.  離題了...
採用分享網站的小玩意有個遺憾, 那就是樣式制式;雖然樣式很多可供選擇. 如能自訂背景應該很有趣! Flash小物經由轉檔成HTML5之後有個好處, 可利用簡單的Html新增背景; 而且方便修改. 個人化的訴求與方便修改內容是Html的優點.

以部落格時鐘為例, 首先要確定背景可移除, 請見舊文 HTML5背景透明的設定
Step 1. 製作一個同物件尺寸的背景, 如個人照片或喜愛的圖形. 當然, 懂得尺寸縮放語法的網友無須在意背景尺寸的限制.
Step 2. 在物件背景透明的狀態下, 修改內嵌網頁的背景語法即可.


<iframe style="background:url(圖片網址) no-repeat;" allowtransparency="true" border="0" frameborder="0" height="200" scrolling="no" src="物件網址" width="200"></iframe>

我很想依照往例一樣多做幾個分享給好友, 最近真的太忙了!
趁著元宵節搭個新年末班車趕緊發篇文章, 有機會再推出可強調背景的新款.
這裡分享一個範例, 請自行下載至個人空間.
原版與自訂背景版的示範 :
  


Author Summary
自定義背景的部落格時鐘小物
Subject : 自定義背景的部落格時鐘小物
Author : - Dream Talker Updated at: 3:50 AM
Votes : 100% - 5.0 - based on 2015
Flash轉檔成HTML5文檔,自訂內嵌網頁背景.
5 Stars - Reviews
留言提示 - Comment Tips
◆ 如果您有任何想法或意見,歡迎參與留言。
◆ Disqus匿名留言,信箱及個人資訊不會公開顯示。
◆ 請多使用社群帳號留言,可簡化流程並訂閱回復。
◆ 『私密留言』請使用Google+分享按鍵,留言須使用『@Mark X』在訊息中,以免遺漏通知。
◆ G+ 訊息中指名分享對象的參考文件: 『 說明
  • Disqus
  • Blogger
  • Facebook
Anonymous left your nick please
  1. Anonymous1:22 AM

    原來能這樣用啊?學起來,多謝!

    ReplyDelete
    Replies
    1. 請取用, 不用客氣. :)

      Delete
  2. Anonymous4:15 PM

    想請問一下,這樣的圖形數字時鐘要怎樣做?
    我下載了檔案是.html,要如何改成我要的圖案呢?

    ReplyDelete
    Replies
    1. 下載檔案是讓您練習用的, 依照語法添加背景的效果. html 文件裡的圖案已經被編成 SVG, 所以很難替換圖案; 還不如重作再轉檔.
      至於數字以圖形顯示, 是 Flash 編寫時以程式碼呼叫不同元件的方式. 由於這個部落格不打算談到太多 Flash 的內容, 所以您最好請教專門寫 Flash 教學的網友. 嗯... 至於 HTML5 目前的設計軟體是否容易操作, 我就不太清楚了. 很抱歉呢!

      Delete