iPlay99玩樂誌

當滑鼠移動過去時，會變色，而且滑鼠不必碰到連結，以區塊的方式來感應變色。

這個算是美化的小技巧，做法並不會太難，但是我覺得蠻漂亮的，效果也不賴，其實我最初是在放形浪High看到這個效果的，可是當我試著實作時，在 Firefox 是成功了，可是 IE 卻沒用，試了好幾個方法都沒用，這篇文章就擱在那邊了，不過最近又看了一些文章，終於OK了，可以在 Firefox 與 IE 兩者正常顯示。

沒辦法，數據顯示 這裡的訪客七成使用 IE

請進到「範本」>>「修改html」>>勾選「展開小裝置範本」，並在 </b:skin> 之前加上 CSS 語法如下所示：

註1：如果你是使用網路上一些用 javascript 寫成的文章列表、回應 hacks，那可能有些細節要再自行修改。

註2：在做之前請先 Ctrl+F尋找一下，你是否有 .sidebar 這個元素，如果沒有，找看看 rightXXX、leftXXX之類的，我自己的也不叫 .sidebar，只是因為 .sidebar 算是 blogger template 的預設命名，較多 blogger template 使用，所以使用它，而如果找不到 sidebar 也找不到 rightXXX、leftXXX，呃…留言吧

.sidebar .blockcolor a {
display:block;
}
.sidebar .blockcolor a:hover {
background:#D7EBEF none repeat scroll 0%;
}

接著請 Ctrl+F 尋找「文章標籤」、「近期文章」（你自己取的 Widget 中文名稱），會看到＜div xxxxx 的語法，如下所示：

<b:widget id='Feed1' locked='false' title='iPlay99近期文章' type='Feed'>
<b:includable id='main'>
<h2><data:title/></h2>
<div class='widget-content'>
<ul expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
<b:loop values='data:feedData.items' var='i'>
底下省略…


080203更新註記：因為 LVChen 的留言，所以改變一下原本的做法

把紅字 widget-content 改成 blockcolor

把紅字 widget-content 改成 widget-content blockcolor 即可兩者兼顧到，這樣就不怕使用者如果有裝什麼其它 hacks 要調用 widget-content 會出問題了

<b:widget id='Feed1' locked='false' title='iPlay99近期文章' type='Feed'>
<b:includable id='main'>
<h2><data:title/></h2>
<div class='widget-content blockcolor'>
<ul expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
<b:loop values='data:feedData.items' var='i'>
底下省略…

改完之後，預覽看看吧，近期文章應該正常，但文章標籤可能會變成底下這種情況，文章數量都跳到下一行了。

這時請 Ctrl+F 尋找 (<data:label.count/>) ，應該只找得到一個，除非你有改過，請將紅字(<data:label.count/>) 搬到藍色的 </a> 之前，這時再預覽看看，應該就ok了。

註：如果 (<data:label.count/>) 被 <span>標籤包著，也要一起移過去喔。

<div class='blockcolor' id='toggle'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
(<data:label.count/>)
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>

以上，有問題歡迎提出~

Technorati 的標籤：blogger hacks,hyperlink,CSS