Annie 小婆婆札記: 【部落格圈】側邊欄隱藏/展開語法

Annie 小婆婆札記

Tuesday, July 08, 2008

【部落格圈】側邊欄隱藏/展開語法

部落格小工具:隱藏網頁元素&隱藏側邊欄@地球觀察之山頂秘密基地
【語法來源:建議使用 Firefox 點選該篇文章閱讀;
若使用 IE6 則該篇文章會掉落至其左側欄的下方。】

「側邊欄過長」困擾小婆已經很久了,也曾在之前修習學位的空檔試圖找到適合陽春 Blogger 所使用的版本,但一直都沒有著落;也百般不願意去使用 Blogger 進階版所提供的超醜三角形,於是乎就這麼地擱置著。

但「檔案文章(Archives)」以每個月增加一行的速度迫使小婆不得不再去找解決方案。

結果,前幾天又是在 Google 搜尋且測試某格主所提供之版本不適用後,在其訪客留言中挖到寶!

所以,順便瀏覽「訪客留言」是有其效用的。

>.^

讓側邊列的元件能夠展開和摺疊@Abin's Tech Note
小婆試了「Abin's Tech Note」格主所提供的程式碼,跑出來的版面和前幾個月數次的測試結果一樣;不信邪地看看其訪客留言中其他使用者是否也有類似的問題,於是乎輾轉數個連結畫面後就被小婆找到了期盼已久的答案。

在此,特別感謝「地球觀察之山頂秘密基地」格主 Boy39 不厭其煩地來小婆家留言糾正小婆語法使用上的錯誤。

以下是小婆的使用過程與修正心得。

● 步驟一:公用程式碼 ●

Boy39 格主所言,將下列語法拷貝貼入模版(Template)<head>與</head>之間。【2008.12.06 修改更新】

<head>
...



...

</head>

● 步驟二:參數程式碼 ●

經小婆測試結果,得將下列語法拷貝貼入模版(Template)<body>和</body>之間。或許 Boy39 格主所提供的語法在 Firefox 行得通,但運用在小婆慣用的 IE6 則會碰壁。

<body>
...



...

</body>

● 步驟三:執行程式碼 ●

Boy39 格主所言,將下列兩句語法分別放在想要隱藏段落的前【】與後【】。



【想要隱藏段落的語法】



簡單三步驟就解決了!

接下來就看兩則範例囉~

● 範例一:照表操課 ●

隱藏側邊欄之範例一:照表操課
【點選上圖可放大看清楚】


S1-01. 小婆想讓整段想隱藏的「照表操課」居中放置,所以在【】<div>增列為<div align="center">

S1-02. 小婆想提醒自己該尾端位置,所以加了「"照表操課【展開/隱藏】"」在【】「endbeginopensesame1()」之括弧裡。

以上兩點和 Boy39 格主提供的語法略有不同,至少小婆從 IE6 以及 Firefox 看所修改後的版面都沒問題。

● 範例二:檔案文章 ●

隱藏側邊欄之範例二:檔案文章
【點選上圖可放大看清楚】


為求整齊美觀,小婆想讓所有的「按鈕+標題+【展開/隱藏】」居中放置,而且隨後所有的<ul><li>藍色小豆鈕則居左排列,所以得再加上靠左排列指令。

S2-01. 小婆想讓按鈕和「檔案文章【展開/隱藏】」居中放置,所以在【】<div>增列為<div align="center">

S2-02. 小婆想讓整段附有藍色小豆鈕的「檔案文章」靠左排列,所以加了<div align="left">以及</div>收尾。

S2-03. 小婆想提醒自己該尾端位置,所以加了「"檔案文章【展開/隱藏】"」在「endbeginopensesame1()」之括弧裡。

Firefox
小婆常強調「Blogging is for yourself and sharing with others.

這次應用「隱藏側邊欄之語法」Boy39 格主還教導及提醒了小婆一件重要的事:

修改版面不可只利用自己慣常所用的 IE6 來檢查,還得用 FirefoxSafari 等其它瀏覽器來觀察。也就是說自己看得賞心悅目之餘,還得顧慮到別人是怎麼來看的。

感謝!

>.^

Labels:

♡♡ 加入書籤.網摘分享: AddThis Social Bookmark Button

posted by Annie Chang at