如何利用捲軸讓邊欄（Sidebar）元件縮短

是否曾經有這種感覺，自己的部落格的邊欄元件太多，造成版面太長，每次滑鼠總要推很多次才能到底，怎麼解決呢?

我常看許多人的部落格，邊欄元件拖得好長，尤其是書籤區或是RSS聯播，常常是長長的一大串，對我這種喜歡版面簡潔又沒耐心的人，閱讀起來真的有點負擔，最近因為改版的緣故，頁面變成兩欄式的，勢必有些Widget元件要拿掉或是縮短，才能達到自己的要求。

以前曾經看過Abin's Tech Note: 讓側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling)，這篇文章提到可以展開和摺疊邊欄元件，這是一個調整自己版面好用工具，但我想利用別種方式，提供以下方法，喜歡用的人再嘗試，至於初學者不懂CSS語法的朋友，建議比較熟悉CSS語法後，再來利用，免得毀了你的部落格。

其實這個方法很簡單，是利用Scrollbar捲頁的控制原理製作，大家可能會想，只要設定它的高度，然後overflow設成auto就能執行了，Yes，You Got it！原先我也是這樣想的，結果出來的是這樣的東西，如下圖，


整個元件都包含在Scrolling裡面，所以元件的標題（我追蹤的網誌），在滑鼠往下捲動時他就會消失不見，


一直想不到方法解決，增加h2的定義也沒有用，最近看到別人的部落格上有這個東西，就研究一下他的原始碼，終於解決了標題跟著捲軸跑的問題。

由於Blogger邊欄的元件，產生方式不太一樣，例如追蹤的網誌，或是清單，這些元素，是在小工具裡是直接產生的，而沒有程式碼可修改，而用新增Html/JavaScript元件，則是直接加入程式碼產生，所以修改方式不太一樣。

首先這個元件須先存在才能修改，記得一樣要備份你的原始模板，

後台→版面配置→修改HTML，展開小裝置範本

１‧在CSS區放入以下程式碼，這是捲動區的定義，記得一定要用scrolling2或是3.4.5..，不可以用scrolling，因為這個scrolling已有內部定義，不能使用的。
.scrolling2 {
overflow: auto; height: 100px; width: 100%;
background-color:#fff; border:0px solid #777;
margin-bottom: 20px; padding:0px; font-size: 12px;
color: #999; text-align: left;
}

高度height: 100px，可以自己調整，我是調整250px，讓整個元件趨近正方形，當然相關的設定，如顏色或是大小，都可自行調整。

２‧找到這個元件的位置，譬如我的元件是「我追蹤的網誌」，按下Ctrl+F，出現搜尋框，然後貼上妳要找的文字--我追蹤的網誌，就可以找到這個元件的位置，
<b:widget id='BlogList2' locked='false' title='我追蹤的網誌' type='BlogList'>

然後往下找，會看到
<div class='widget-content'>
這就是這個元件的內容，在上面加一行語法
<div class='scrolling2'>
當然也要有相對應的語法做結束，通常是在下一個元件的上面，譬如我的是統計園地，


找到</b:includable>
在這個語法上面加上
</div>
按下儲存即可，回到部落格上你就會看見你的元件出現捲軸。

另外有種widget是新增Html/JavaScript小工具產生的，就不用像上面這樣改，只要在修改Html裡加入scrolling2的定義，譬如我現在用的最新回應的Hacks，然後在小工具裡的Html/JavaScript程式碼裡，最前面加上<div class='scrolling2'>最後面加上</div>把程式碼包起來即可，按下儲存就可以了，當然你要照上面這樣修改也是可以的。

在未修正前，因為不想讓元件佔版面太長，所以只顯示最新5則留言，


修正後，可以用捲動軸控制，所以最新回應設定顯示10則，想看的人再利用滑鼠移動即可。


所以可以視你的版面設計和編排來利用Scrollbar這個功能，讓版面更簡潔與美觀，也讓讀者不會有頁面太長的負擔。

2009.11.25修正，
將div id='scrolling2'改為div class='scrolling2'才是較正確的用法。

延伸閱讀：
製作有上下捲軸的公佈欄
幫邊欄的網頁元素(widget)，自訂不同的漂亮圖示