LifeType Bloggers 進階使用（二） @ 閒人站 (收集好文章，分享全世界! )

LifeType Bloggers 進階使用（二）

有部落格的請登入自己的部落格，沒有部落格的可以使用虛擬伺服器架設的來玩，如果以上兩個都沒有的，上課時，再借用。

修改 CSS 樣式：
- 如果您美感不錯，就將模版下載，開啟其中的 CSS 利用 Dreamweaver、Firebug（這有教使用方法）等來修改。
- 美感跟我差不多的人，喔，感謝網路善心人士，有 CSS 可以下載使用耶！（一）、（二）
- 我利用前者為例說明，選擇一個適合自己模版欄位的 CSS 複製全部語法，我選擇的是「貓咪踏青」
- 打開純文字編輯器，例如筆記本貼上存檔，我就存為 cat.css
- 將圖檔下載再上傳到自己的網頁空間，或者也可以選擇自己網頁空間原本的圖檔，然後修改 cat.css 裡面的圖檔路徑。
- 登入→個人網誌設定→網誌模版編輯器
- 找到自己自製的模版，點選編輯。
- 找到 CSS 點編輯
- 先將原來的 CSS 複製存檔起來，萬一改的一團糟或者不滿意時，還可以恢復。
- 接著將下載修改後的 CSS 複製貼上，按下去更新，就OK了！
- 弄清楚首頁版面的樣式結構表，可以自己修改創作喔！
- CSS修改利用模版編輯器就不用考慮語系，如果是下載回來編輯，就要注意自己使用的文字編輯軟體，存檔要存UTF-8喔！
加入 Flash 小時鐘、GIF小動畫：
Flash 小時鐘
- 登入→個人網誌設定→網誌模版編輯器
- 大部份這類小玩意都放在側邊，所以點選編輯 links.template
- 將語法貼在適當位置。
  小時鐘語法如下，flash 的連結網址和寬、高 width height，請依需要修改
  <embed src="http://www.stes.tc.edu.tw/~yunol/swf/cat05-rakyu.swf" _fcksavedurl=""http://www.stes.tc.edu.tw/~yunol/swf/cat05-rakyu.swf"" width="127" height="87" type="application/x-shockwave-flash" border="0" wmode="transparent">
- 小時鐘可參考這個網站，收了好多，連語法都備好囉！有興趣的可以上網再找，也可以自己製作。
  http://www.tiec.tp.edu.tw/lifetype/post/1/284
GIF小動畫
- 放置編輯位置相同，小動畫語法如下，連結的網址和寬高 width height，還有圖片的替代文字，請依需要修改：
  <img src="http://www.stes.tc.edu.tw/~yunol/images/gears2.gif" alt="新的一年，繼續努力！" width="80" height="84">
加入音樂播放器，也是編輯 links.template，放個一兩首老歌就好，免得觸犯著作權。

MediaPlayer語法如下，僅需改音樂網址。

簡易：
<embed src='http://www.stes.tc.edu.tw/~yunol/sounds/AnitaMui/test.asx' width='180' height='25' autoStart='0' >

複雜（有畫面）：
<embed src='http://www.stes.tc.edu.tw/~yunol/sounds/AnitaMui/test.asx' type='video/x-ms-wmv' width='320' height='240' autoStart='1'
showControls='0' AutoSize='0' AnimationAtStart='1' ClickToPlay='1' EnableContextMenu='0' EnablePositionControls='1' EnableFullScreenControls='1' ShowControls='1' ShowAudioControls='1' ShowDisplay='0'
ShowGotoBar='0' ShowPositionControls='1' ShowStatusBar='1' ShowTracker='1' ></embed>

asx播放清單語法如下，曲名和歌曲路徑請自行修改（歌曲路徑雖然可以抓人家的，例如第一首，但最好不要）：
<Asx Version="3.0">
<Param Name="AllowShuffle" Value="yes"/>
<Entry>
<Title>長藤掛銅鈴</Title>
<Ref href="http://www.fcu.org.tw/~f93b0229/wma05/03002.wma"/>
</Entry>
<Entry>
<Title>胭脂扣</Title>
<Ref href="http://www.stes.tc.edu.tw/~yunol/sounds/AnitaMui/15.wma"/>
</Entry>
</Asx>

有一款簡易可愛的 FlashPlayer，也順便介紹給大家，網站提供下載喔！
要特別注意的是，FlashPlayer 所放置的歌曲必須是 mp3 格式，還有要注意到轉速問題。
反正貼貼歌曲有問題就拿掉，放沒問題的就對啦！還有 LifeType內文頁不可貼 object 標籤，但是貼在 template 就沒問題。
語法如下（歌曲路徑是好友國華的部落格轉貼，路徑修改放在自己網頁空間囉！）：
<object type="application/x-shockwave-flash" data="http://yunol.stes.tc.edu.tw/swf/dewplayer.swf?son=http://www.stes.tc.edu.tw/~yunol/sounds/denglijun/Drunken_tango.mp3" width="180" height="20"><br /><param name="movie" value="http://yunol.stes.tc.edu.tw/swf/dewplayer.swf?son=http://www.stes.tc.edu.tw/~yunol/sounds/denglijun/Drunken_tango.mp3" /></object>
多增加一些選單，語法如下，編輯 header.template
連結的網址和 title 文字以及 div 標籤位置請自行修改，表情可以讓大家轉貼，因為放在 google 的網頁空間，不擔心吃掉自己主機或者學校主機的頻寬。
<div align="right"><font size="2">※<a href="{$url->getBaseUrl()}/summary.php">{$locale->tr("summary")}</a>※<a _fcksavedurl=""{$url->getBaseUrl()}/summary.php">{$locale->tr("summary")}</a>※<a" title="洋蔥頭＆米滷蛋＆麻糬人-更多的表情圖示" href="http://www.yunol.stes.tc.edu.tw-a.googlepages.com/face" target="_blank">表情</a>※<a href="http://yunol.stes.tc.edu.tw/05.htm" target="_blank" title="相簿展示&製作教學">網路相簿集錦</a>
※<a href="http://uv.stes.tc.edu.tw:8080/yunol/yunol_gb/guest.php" target="_blank" title="留言版，歡迎留言給我！" >留言版</a>※<a href="http://unas.stes.tc.edu.tw/calendar/cal2.php" target="_blank" title="我的行事曆">行事曆</a>※<a href="http://yunol.stes.tc.edu.tw" title="我的主站，歡迎光臨！">于老師教室</a></font></div>

部落格要個人化的兩個必要條件，其一是管理者需加掛「網誌模版編輯器」，其二是使用者要自製模版，簡易的就直接複製已有模版即可。語法不難，就開啟網頁編寫軟體，先在設計頁面處理好，再切到程式碼看語法即可，唯一要注意的是，用到的圖檔、音樂檔都要上傳到有效的網頁空間，然後路徑改成絕對路徑，最好不要抓別人的網頁路徑，萬一該網站關閉，自己的也會跟著掛了。

Demo 網站：

研習時間非常短促，本內容主要著重在部落格外觀的立即改變，有興趣者，可以多多參看一些更完整深入的網路教學文件。