2008年12月10日 星期三

在部落格文章中~~自定個人化區塊 ^ ^ (精簡版)

這個主題大家看了 , 不知道能不能馬上知道比爾所說的東西咧 ?
再講仔細一點 , 就是在你自己的網頁範本中 , 自行定義一種html的類型
將來只需要將所想要呈現的區塊包在這個html類型之中...
呈現出來就都是你自行定義的style囉 ^ ^

OK~~~那廢話不多說 , 接下來就讓比爾說明囉^ ^

因應比爾好友的建議 , 所以比爾將來就會把這類的文章都分出兩篇
一篇 , 就是先將該功能簡單作法直接讓大家看了依步驟操作 ,
而另外的一篇 , 就會是詳盡的解說囉^ ^ , 希望能讓大家依需求來看看囉

那這邊比爾將各Step列在下面囉^ ^

首先
Step 1.我們要在CSS的定義部分加我們自己定義的類型
在"版面配置"->"修改html"->勾選"展開小裝置範本" ,
找到 ]]><[/b:skin>
在其前面加上我們完整定義的類型 , 例如我用billsays
程式碼範例如下 :
.billsays {display: block; font-family: Courier New;font-size: 8pt;overflow:auto;background: #f0f0f0 url(http://sites.google.com/site/bktbktbkt/Home/billsays/title.gif) left top repeat-x;border: 1px solid #ccc;padding: 8px 0px 0px 8px;max-height:200px;line-height: 1.2em;}
完成如下圖 :















Step 2. 就是將想要套用的區塊用我們自定的class包起來囉 , 也就是在文字塊的前後加上
<span class=”billsays”>
以及
</span>
完成如下圖:














Step3. 最後就來看看成果囉 , 就如下圖展示囉~~
這個範例就是比爾個人將來在文章結論的部份會用到的樣式囉^ ^















這次的東西比較簡單囉^ ^ , 就這樣三個步驟而已 , 當然各位可以自己調裡面的參數 ,
設定用到的背景圖 , 背景顏色 , 還有文字區塊放置的位移等等囉 ^ ^ , 那對詳細內容有興趣的各位 , 就期待比爾的下一篇詳細版囉^ ^

沒有留言:

Blank For Space
Blank For Space