是否曾經有這種感覺，自己的部落格的邊欄元件太多，造成版面太長，每次滑鼠總要推很多次才能到底，怎麼解決呢?
許多人的部落格，邊欄元件拖得好長，尤其是書籤區或是RSS聯播，常常是長長的一大串，對於喜歡版面簡潔又沒耐心的人，閱讀起來真的有點負擔。
由於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，讓整個元件趨近正方形，當然相關的設定，如顏色或是大小，都可自行調整。
２‧找到這個元件的位置：
<b:widget id='BlogList2' locked='false' title='我追蹤的網誌' type='BlogList'>
然後往下找，會看到
<div class='widget-content'>
這就是這個元件的內容，在上面加一行語法
<div class='scrolling2'>
當然也要有相對應的語法做結束，通常是在下一個元件的上面。
找到</b:includable>
在這個語法上面加上
</div>
按下儲存即可，回到部落格上你就會看見你的元件出現捲軸。
另外有種widget是新增Html/JavaScript小工具產生的，就不用像上面這樣改，只要在修改Html裡加入scrolling2的定義，然後在小工具裡的Html/JavaScript程式碼裡，最前面加上
<div class="scrolling2">
最後面加上
</div>
把程式碼包起來即可，按下儲存就可以了，當然你要照上面這樣修改也是可以的。
所以可以視你的版面設計和編排來利用Scrollbar這個功能，讓版面更簡潔與美觀，也讓讀者不會有頁面太長的負擔。
訂閱
回應
