為何要寫這篇文章呢!其實我也是怕自己忘記一切東西SO~~寫下來留底!
當然如果對於喜歡自己編輯部落格的朋友又覺得自訂欄位不夠用的話!
這篇文章幫助可就大囉!
學習必備基礎:
1.基本的HTML 2.喜歡DIY的精神
這樣就夠啦!好啦!開始上課了!
談到自訂欄位,首先要了解自訂欄位的限制在哪?先了解規則百戰百勝
1. 自定欄位上限是5個 超過無法再增加
2. 每個欄位只能5000個字包含符號
3. 寬不能超過145像素
4. 不支援JavaScript語法
5. 開啟太多特效會讓部落格開啟緩慢喔(看你的CPU使用率就知道啦!)
6. 不支援<iframe>標籤,必須使用<embed>標籤讓他自動轉換
當然自訂這個欄位還是有許多的地方要控制好例如不必要的語法,多餘的屬性這都是必須要處理掉的部分才不會造成開啟過慢(佔用處理器過多的資源)要了解這些之前阿龍先幫大家複習一下HTML語法!HTML是標籤式語法以下來簡易的介紹一下HTML標籤的格式
<起始標籤 屬性=”設定值”></結束標籤>
當然一個標籤裡頭可以有很多個屬性啦!舉個例子!
EX:
<img src=”http://www.test.com/000.jpg” alt="” 這是假的圖片” width=” 120” ></img>
這就是個很標準的貼圖標籤!SRC屬性是用來指定圖片位置,ALT屬性是簡述圖片(突現式說明),Width是指定圖片寬度!當然啦一個標籤可以用的屬性不只是這樣詳情的話等哪天阿龍比較有空在來整理篇HTML教學!
接著進入正題!如何的自己指定「自訂欄位」呢!首先要打開你的部落格(並且登入)在來按下右上角的「管理部落格」按下去!
接著看右手邊有個「管理自訂欄位」按下去後就可以開始編輯內容內容可以編輯些什麼呢!當然就是標準的html語法囉!可以掛的內容有撥放器、圖片、超連結當然就這些組合就可以玩出很多花樣囉!
接著編輯完畢後在點左手邊的「版型設定」即可自己排定你編輯的欄位位置!
重點來了!只有五千字而且只能自訂五個欄位的規則要怎麼用呢!當然是能塞越多東西越好阿!舉個例子,阿龍的「數位造林」、「部落格觀察」他們的語法結構都是簡單的<a href>包<img>而已所以在數量有限下!阿龍就把他們給合體了!範例如下!
EX:
數位造林
<p><font size="3" color="black"><b>支持數位造林</b></font></p>(阿龍加油添醋的一行)
<a href="http://tw.promo.yahoo.com/2007marketing/tree/" target="_blank">
<img src="http://tw.yimg.com/i/tw/blog/editor/blog_12090_0703.gif" width="120" height="90" alt="" 數位造林用網路多棵樹"></a>
<p>來點我吧!中華電信會去種樹低!讓我們的地球更美麗!</p>
部落格觀察
<p><font size="3" color="black"><b>我的部落格觀察</b></font></p>(阿龍加油添醋的一行)
<a href="http://look.urs.tw/showhistory.php?BlogID=16702" target="_blank">
<img src="http://look.urs.tw/images/s4.php?BlogID=16702" width="120" height="100" alt="" 部落格觀察分數與等級" border="0">
仔細看他們的語法都是<a href>內包<img>夠簡單吧!
所以把他們放在一起記得前後家個<P>標籤表示段落!就不會粘在一起了!
另外一個重點就是刪除多於無效的語法!怎麼講呢!如果常來逛阿龍的部落格應該會注意到!阿龍氣象台這個自訂欄位原本只有三個地區!現在變成一大串了!為何呢?原因就在5000字的限制!原本阿龍塞三個地區就爆了!自從過濾過後就可以塞下將近全台的喔!阿龍我有在刪除掉一些短時間內不可能去的地方!SO~~~就剩下下列的列表囉!那怎麼看多餘的部分呢!或是用精簡的語法代替以下阿龍用其中一個縣市天氣來說明!
原始語法:
<table cellspacing="0" cellpadding="3" border="0">
<tr>
<td rowspan="2"><img height="31" src="http://udn.com/WEATHER/IMAGES/taoyuanicon.gif" width="38"></td>
<td colspan="3"><strong><a href="http://udn.com/WEATHER/taoyuan.htm" target="_blank" style="text-decoration: none">桃園</a></strong></td>
</tr>
<tr>
<td><img height="13" src="http://udn.com/WEATHER/IMAGES/taoyuanlowtemp.gif" width="27"></td>
<td>-</td>
<td><img height="13" src="http://udn.com/WEATHER/IMAGES/taoyuanhightemp.gif" width="27"></td>
</tr>
</table>
上面是稍微的整理過的結果注意我標紅字的部分,這些都是可以省略的部分喔!怎說呢!以下阿龍爲您一一解釋!
首先看這個<table cellspacing="0" cellpadding="3" border="0">這一行!
Table標籤的cellspacing屬性是指表格的「立體效果」要多少!也就是最外的邊框要多粗啦!預設值(不打就是預設值)是0,那何必打哩!不是多的咩!border就是邊框粗度這個預設值不打也是0同理可証這兩個字串是多餘的啦!再來每個<img>標籤內指定長寬的問題!其實我利用自己寫的網頁把這些圖片down下來看!他的大小就剛好是上頭指定的大小!這就說明了那個指定大小的屬性也是多餘的!可以刪!效果沒差!最後就是中間那段
<td colspan="3"><strong><a href="http://udn.com/WEATHER/taoyuan.htm" target="_blank" style="text-decoration: none">桃園</a></strong></td>
這段是把「桃園」這兩個字加上一個超連結<a href>跟指定粗體<strong>可是連結出去這功能我想不是必要的而且會多一大串字SO~~砍!在來<strong>有個異曲同工的語法<B>SO~~就用這個取代啦!或是覺得粗體也不重要的話可以刪掉,但是「桃園」二字一定要留下喔!修改完後就變成
<table cellpadding="2"><tr><td rowspan="2">
<img src="http://udn.com/WEATHER/IMAGES/taoyuanicon.gif"></td>
<td colspan="3"><b>桃園</b></td></tr><tr><td>
<img src="http://udn.com/WEATHER/IMAGES/taoyuanlowtemp.gif"></td>
<td>-</td><td>
<img src="http://udn.com/WEATHER/IMAGES/taoyuanhightemp.gif"></td></tr></table>
接著來個字數比一比
原始 | 489字元 |
減肥後 | 300字元 |
差了189個字元
一個縣市差了189個字元我的部落格共有15個縣市就差了2835個字元!這個差距就夠讓你在塞下很多東西了!部落格讀取速度有個很重要的因素除了你外掛的檔案空間(外連的圖)的速度外在來就是你的自訂攔位不要太多會增加CPU負擔喔!打開工作管理員看了你就知道啦!
剩下的語法部落格服務首頁搜尋滿天飛我就不多介紹啦!今日重點就是介紹怎麼設定自己欄位才能達到最佳效益與最佳成效囉!希望大家都能把自己的部落格弄得漂漂亮亮的!有問題請留言囉!要引用當然是歡迎之致啦!