怎么让过长的边栏缩短用卷轴来看
首先這個元件須先存在才能修改,記得一樣要備份你的原始模板,
後台→版面配置→修改HTML,展開小裝置範本
1‧在CSS區放入以下程式碼,這是捲動區的定義,記得一定要用scrolling2或是3.4.5..,不可以用scrolling,因為這個scrolling已有內部定義,不能使用的。#scrolling2 {
overflow: auto; height: 400px; width: 100%;
background-color:#000; border:0px solid #000;
margin-bottom: 20px; padding:0px; font-size: 12px;
color: #f2984c; text-align: left;
}
高度height: 100px,可以自己調整,我是調整250px,讓整個元件趨近正方形,當然相關的設定,如顏色或是大小,都可自行調整。
2‧找到這個元件的位置,譬如我的元件是「我追蹤的網誌」,按下Ctrl+F,出現搜尋框,然後貼上妳要找的文字--我追蹤的網誌,就可以找到這個元件的位置,<b:widget id='BlogList2' locked='false' title='我追蹤的網誌' type='BlogList'>
然後往下找,會看到<div class='widget-content'>
這就是這個元件的內容,在上面加一行語法<div id='scrolling2'>
當然也要有相對應的語法做結束,通常是在下一個元件的上面
往下找到</b:includable>
在這個語法上面加上</div>
按下儲存即可,回到部落格上你就會看見你的元件出現捲軸。
另外有種widget是新增 Html/JavaScript小工具產生的,就不用像上面這樣改,只要在修改Html裡加入scrolling2的定義,譬如我現在用的最新回應的 Hacks,然後在小工具裡的Html/JavaScript程式碼裡,最前面加上
在未修正前,因為不想讓元件佔版面太長,所以只顯示最新5則留言,
修正後,可以用捲動軸控制,所以最新回應設定顯示10則,想看的人再利用滑鼠移動即可。
所以可以視你的版面設計和編排來利用Scrollbar這個功能,讓版面更簡潔與美觀,也讓讀者不會有頁面太長的負擔。
发表评论