v 如何利用捲軸讓邊欄(Sidebar)元件縮短 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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. 啊,我弄到了可是首頁沒出現??

    回覆刪除
  25. 如果是熱門文章,你可以試用另種方式,不要用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;
    }

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

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

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

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

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

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

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

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

    回覆刪除

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

Related Posts Plugin for WordPress, Blogger...