製作屬於自己的月曆 - 部落格

By Hedy
at 2007-02-10T13:31
at 2007-02-10T13:31
Table of Contents
這是我之前嘗試在Blogger中放月曆時無聊的研究,
想說分享給大家知道一下^^
簡單的說就是把某些網站提供的月曆樣式改成你自己的圖片,基本上也不用
用到什麼特殊軟體,記事本就夠了~
如果對改造Blog的人有興趣的人可以參考看看
原月曆:
http://www.free-blog-content.com/Calendars/calendar0032.htm
改過的成品大約是這樣:
http://book90423.googlepages.com/004.html
放在Blog的樣子(請拉到右下角看)
http://book90423.blogspot.com/
簡單做一下說明:
(網誌那個教學雖然是圖文並茂版,但礙於程式碼的表現很難控制,所以寫的很糟~"~)
先到這個網站選取你想要的版型:
http://free-blog-content.com/index.html
我自己是選擇這區的做修改
http://free-blog-content.com/Animal-Calenders.htm
先將網站提供的程式碼貼到記事本上
<!-- FREE-BLOG-CONTENT.com -->
<br><center><iframe
src="http://www.free-blog-content.com/Calendars/calendar0032.htm" width="166"
height="332" marginwidth="0" marginheight="0" frameborder="no" scrolling=no
allowtransparency="true"></iframe></center>
<center><a style="font-size: 3mm"
href="http://www.free-blog-content.com/">Get your own
calendar</a></center></br>
將http://www.free-blog-content.com/Calendars/calendar0032.htm
這種的網址擷取出來,貼在網址列上後按"enter"
接著在此網頁上按檢視→原始檔
然後就會出現一個寫滿程式碼的記事本,我們就要從其中改造出自己的月曆
改造的要點:
在原始檔中的程式碼找出下面幾列
<img border="0" src="pics/cal29.jpg" width="160" height="229"></td>
黃色是圖檔的位置,藍色則是圖檔的大小
接著,找一張圖,長寬比例最好與上列藍色中的長寬比相符,
將圖傳到網路空間,取得一個位址
例如我的是:http://book90423.googlepages.com/calendar.gif
然後將這個圖的圖檔位址貼到上列程式碼中黃色的區域(如下)
<img border="0" src="http://book90423.googlepages.com/calendar.jpg"
width="160" height="214">
之後將記事本裡的內容另存新檔,檔名可任取,副檔名要改成htm/html
(我是改成004.html)
將這個html檔傳至網頁空間,取得一個位址
例如:http://book90423.googlepages.com/004.html
回到一開始月曆網站所提供的那很短的程式碼
將html檔的位址取代掉下列這個網址
http://www.free-blog-content.com/Calendars/calendar0032.htm
然後整段程式碼會變成(注意黃色的地方已經被改掉了)
<!-- FREE-BLOG-CONTENT.com -->
<br><center><iframe src="http://book90423.googlepages.com/004.html"
width="166" height="332" marginwidth="0" marginheight="0" frameborder="no"
scrolling=no allowtransparency="true"></iframe></center>
<center><a style="font-size: 3mm"
href="http://www.free-blog-content.com/">Get your own
calendar</a></center></br>
接下來就到你的Blog新增一個HTML/JavaScript 的網頁元素
將這段貼上去後儲存即可
大略的方式大概是這樣,我的技巧可能還不太好,可能還有
畫蛇添足或缺漏之處,還請大家幫忙指正m(_ _)M
晚點再補上改月曆背景色的部份
--
想說分享給大家知道一下^^
簡單的說就是把某些網站提供的月曆樣式改成你自己的圖片,基本上也不用
用到什麼特殊軟體,記事本就夠了~
如果對改造Blog的人有興趣的人可以參考看看
原月曆:
http://www.free-blog-content.com/Calendars/calendar0032.htm
改過的成品大約是這樣:
http://book90423.googlepages.com/004.html
放在Blog的樣子(請拉到右下角看)
http://book90423.blogspot.com/
簡單做一下說明:
(網誌那個教學雖然是圖文並茂版,但礙於程式碼的表現很難控制,所以寫的很糟~"~)
先到這個網站選取你想要的版型:
http://free-blog-content.com/index.html
我自己是選擇這區的做修改
http://free-blog-content.com/Animal-Calenders.htm
先將網站提供的程式碼貼到記事本上
<!-- FREE-BLOG-CONTENT.com -->
<br><center><iframe
src="http://www.free-blog-content.com/Calendars/calendar0032.htm" width="166"
height="332" marginwidth="0" marginheight="0" frameborder="no" scrolling=no
allowtransparency="true"></iframe></center>
<center><a style="font-size: 3mm"
href="http://www.free-blog-content.com/">Get your own
calendar</a></center></br>
將http://www.free-blog-content.com/Calendars/calendar0032.htm
這種的網址擷取出來,貼在網址列上後按"enter"
接著在此網頁上按檢視→原始檔
然後就會出現一個寫滿程式碼的記事本,我們就要從其中改造出自己的月曆
改造的要點:
在原始檔中的程式碼找出下面幾列
<img border="0" src="pics/cal29.jpg" width="160" height="229"></td>
黃色是圖檔的位置,藍色則是圖檔的大小
接著,找一張圖,長寬比例最好與上列藍色中的長寬比相符,
將圖傳到網路空間,取得一個位址
例如我的是:http://book90423.googlepages.com/calendar.gif

然後將這個圖的圖檔位址貼到上列程式碼中黃色的區域(如下)
<img border="0" src="http://book90423.googlepages.com/calendar.jpg"
width="160" height="214">
之後將記事本裡的內容另存新檔,檔名可任取,副檔名要改成htm/html
(我是改成004.html)
將這個html檔傳至網頁空間,取得一個位址
例如:http://book90423.googlepages.com/004.html
回到一開始月曆網站所提供的那很短的程式碼
將html檔的位址取代掉下列這個網址
http://www.free-blog-content.com/Calendars/calendar0032.htm
然後整段程式碼會變成(注意黃色的地方已經被改掉了)
<!-- FREE-BLOG-CONTENT.com -->
<br><center><iframe src="http://book90423.googlepages.com/004.html"
width="166" height="332" marginwidth="0" marginheight="0" frameborder="no"
scrolling=no allowtransparency="true"></iframe></center>
<center><a style="font-size: 3mm"
href="http://www.free-blog-content.com/">Get your own
calendar</a></center></br>
接下來就到你的Blog新增一個HTML/JavaScript 的網頁元素
將這段貼上去後儲存即可
大略的方式大概是這樣,我的技巧可能還不太好,可能還有
畫蛇添足或缺漏之處,還請大家幫忙指正m(_ _)M
晚點再補上改月曆背景色的部份
--
Tags:
部落格
All Comments

By Doris
at 2007-02-11T22:35
at 2007-02-11T22:35

By Linda
at 2007-02-14T14:37
at 2007-02-14T14:37

By Daph Bay
at 2007-02-16T14:39
at 2007-02-16T14:39

By Daniel
at 2007-02-18T10:05
at 2007-02-18T10:05

By Adele
at 2007-02-21T08:44
at 2007-02-21T08:44

By Madame
at 2007-02-23T13:03
at 2007-02-23T13:03

By Ula
at 2007-02-23T22:49
at 2007-02-23T22:49
Related Posts
Re: PTT Blog板友簽到簿(PTTBlogRolling!)

By Sandy
at 2007-02-10T06:02
at 2007-02-10T06:02
請問BLOGGER背景的問題

By Thomas
at 2007-02-09T23:34
at 2007-02-09T23:34
請問BLOGGER背景的問題

By Bethany
at 2007-02-09T18:28
at 2007-02-09T18:28
樂多"插入欄位"的位置?

By Carol
at 2007-02-09T17:56
at 2007-02-09T17:56
blogger備份

By Elma
at 2007-02-09T14:51
at 2007-02-09T14:51