2009年2月20日 星期五

如何利用捲軸讓邊欄(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,展開小裝置範本

1‧在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,讓整個元件趨近正方形,當然相關的設定,如顏色或是大小,都可自行調整。

2‧找到這個元件的位置,譬如我的元件是「我追蹤的網誌」,按下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'才是較正確的用法。

33 則留言:

  1. 真棒,在這裡總是能看到新東西

    回覆刪除
  2. 有需要,有創造。

    回覆刪除
  3. 對不起我不是很在行,第一步驟怎麼作?

    回覆刪除
  4. 把#scrolling2 加到你的模板裡,如果不清楚要放哪裡,可以看這篇,http://01mistery.blogspot.com/2008/08/blooger-template.html,應該會有些概念,記得要先備份。

    回覆刪除
  5. 您好,我有嚐試您說的方法,但是改完之後的板面卻變成無法顯示的狀態~
    我的訂閱網誌的部分是使用原本blogger內建的新增小工具的部分,改了兩次都無法成功ㄟ~

    回覆刪除
  6. 你一個網誌未開放,一個網誌Jowei沒有看到用這語法,我也沒法幫你判斷哪裏有問題。

    回覆刪除
  7. 我一定要說~我成功了,是你讓我這個電腦白痴踏出這一步,真的太感謝你了,論太郎

    回覆刪除
  8. 自己完成很有成就感吧,這就是Google Blogger的神奇之處。

    回覆刪除
  9. 我有看了CCS的語法介紹.但我還是不怎麼了解"#scrolling2 加到CCS"..這是指加到CCS範圍內任一個段落都可以嗎?

    回覆刪除
  10. 想說什麼是CCS,愣了一下,是CSS,你累了吧,該休息了,是啊,範圍內都可,通常是在</head>前面,不過我的習慣是相關的定義就放在相關的那一區裏面,例如.sidebar-wrapper附近,自己也比較看得懂。

    回覆刪除
  11. CCS? CSS?傻傻分不清楚..是真的累了,連兩個星期來天天在做blogger,沒日沒夜的.等等去喝幾瓶蠻牛吧.
    對於初學者的我,從你的文章學習到不少相關的知識,獲益良多,雖然有些還是有看沒有懂,而且我都是套用現成的模板及工具,但這條路走下去是不會錯的.謝謝你.
    我也順利將捲軸套到我的模板上了..請問捲軸這條bar能改顏色嗎,我嘗試改了幾各地方的顏色都沒成功.來有若是最新回應也要做捲軸,也是如法泡製嗎

    回覆刪除
  12. 學到的都是你的,加油,捲軸可改顏色,但是只在IE下有效果,Firefox無效,語法請參考http://mikeshen.infor.org/css_class.htm裡面的捲軸設定,至於最新回應就看你是使用官方或是Hacks在用上述文章的作法即可。

    回覆刪除
  13. 太郎:
    感謝分享,有一個問題是,你如何將最新迴響設定成顯示10個,我是用官方的小工具(最多提供5則迴響),在CSS區裡找不到可以修改的地方,請指導一下謝謝

    回覆刪除
  14. 我是利用Abin's Tech NOte的方式
    Abin's Tech Note: 「最新回應」模組 ,我在"新增最新文章&最新回應"這篇有提到。

    回覆刪除
  15. 謝謝您解決我的問題,讓我的blog不會那麼雜了,感恩~~

    回覆刪除
  16. 不客氣,這東西還蠻好用的,我是因為懶,所以想到把邊欄縮短,滑鼠可以少滑幾下,哈哈。

    回覆刪除
  17. 您好,想請問:為什麼一定要用scrolling2或是3.4.5..,不可以用scrolling,而我的版底剛好是scrolling,不能改了嗎..(好想用捲軸...因為看起來很簡單明瞭..)
    謝謝綸太郎哦...

    回覆刪除
  18. 文章裡已經提到了,"記得一定要用scrolling2或是3.4.5..,不可以用scrolling,因為這個scrolling已有內部定義,不能使用的。"
    因為scrolling應該也牽涉到文章如果超過寬度也會顯示捲軸,還有有的java語言也會用到scrolling,所以不只是邊欄的元件,所以還是給個新的定義比較好,你可先試用看看,不行再來討論,記得備份。

    回覆刪除
  19. 版大真的很感謝你的教學,小妹在這裡學到很多blogger相關的資訊,有空來小妹的網站看看

    回覆刪除
  20. 非常詳細的教學呢
    得空來我部落格觀賞觀賞
    http://tbsmymiri.blogspot.com/
    我的有下拉式菜單,
    以及自定義圖片輪播程式~~

    回覆刪除
  21. 我弄不到~我加到~但是save之后沒顯示~然后才發現我沒加 .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;
    }

    問題來了~要加在那里?頭暈

    回覆刪除
  22. To Mickey,文章裡有寫到,加在css區域內,就是有一大堆元素定義的地方,通常是在]]></b:skin>之前。

    回覆刪除
  23. 啊,我弄到了可是首頁沒出現??

    回覆刪除
  24. 如果是熱門文章,你可以試用另種方式,不要用scrolling2這個定義,新增下方這個定義即可

    #PopularPosts1 .widget-content {
    verflow: 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;
    }

    回覆刪除
  25. 加在]]>前面還是??
    那後面步驟還需要跟著做嗎,就是加上div那些的~

    回覆刪除
  26. 是的,不用後面的動作,只要在css區多加上面的定義。

    回覆刪除
  27. 我加在skin前面,可是还是没有什么东西啊~

    回覆刪除
  28. 抱歉,少了一個英文字 o
    verflow: auto; height: 100px; width: 100%;
    最前面應該是
    overflow
    另外你好像多了一行
    <b:if cond='data:blog.pageType == "item"'>

    回覆刪除
  29. 您好
    可否請教
    最近剛開始架設BLOGGER
    目前WIDGET我想用多個圖片連結至我想要的功能或網站
    所以設計了一個連續的圖片 並切割好打算分個設置圖片連結

    但是我策是一次後發現 工具與工具間(圖片與圖片間)會有間隔 如此就沒辦法達到我想要圖片串連的感覺了
    請問我該從哪裡修改可以讓工具間的間隔(上下)消失?

    這是我的BLOG 非常感謝
    http://lfleurs.blogspot.com/

    回覆刪除
  30. 你把有img語法,裡面的padding都設成0試看看,另外如果是工具與工具間,因為牽涉到工具的抬頭,所以一定會有空隙的,如果你都放在同一個Html/scipt的工具裏,應該就不會有間隔。

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能