2007/07/12

讓blogspot的側邊欄 sidebar 伸縮自如




有網友問到,如何伸展側邊欄, 趁空整理了一下程式碼及流程.

當部落格玩意愈加愈多時, 如果選擇雙欄者,或多欄也可能會發現, 頁面被拉得很長, 尤其是文章有時候沒那麼多, 反而旁邊的側邊欄拖長整個頁面, 看起來版面就有點長短腳..這時候可以用 伸展這個功能, 讓側邊欄預設是關起來, 想開時, 再打開就行了. 可有效控制頁面長度.





先得修改HTML碼時, 先備分 template囉!

然後 選範本 --> 修改 HTML --> 展開小裝置範本 打勾 後, 就準備開工啦!

1. 在<head> 之後, 加入以下程式碼

<script type='text/Javascript'>
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className==&#39;commentshown&#39;) { whichpost.className=&#39;commenthidden'; } else { whichpost.className=&#39;commentshown&#39;; }
} </script>


2. 在 css 區段, 也就是在 ]]></b:skin> 前, 加入以下程式碼
.commenthidden {display:none}
.commentshown {display:inline}


3. 再來就是每當想在side bar 加入這個伸縮功能時, 就可以在原本那段程式碼外, 包一段程式碼.

[謝謝你們來看我] 為例, 本來我這部分的程式碼是長這樣的

<script src="http://pub.mybloglog.com/comm2.php?mblID=2007041119294954&amp;c_width=180&c_sn_opt=n&amp;amp;amp;c_rows=5&amp;c_img_size=h&amp;c_heading_text=Recent+Readers&amp;c_color_heading_bg=005A94&c_color_heading=ffffff&c_color_link_bg=E3E3E3&c_color_link=005A94&c_color_bottom_bg=005A94" type="text/javascript"></script>

要用<div id=唯一值 class="commenthidden"> </div> 先包住這段程式碼, 而且要給這個div 一個唯一值. 如我給了這段一個ID"whoiswho", 是在整頁程式碼中沒有重覆的.

那麼程式碼會長這樣了.
<div id="whoiswho" class="commenthidden">
<script src="http://pub.mybloglog.com/comm2.php?mblID=2007041119294954&amp;c_width=180&c_sn_opt=n&amp;amp;amp;c_rows=5&amp;c_img_size=h&amp;c_heading_text=Recent+Readers&amp;c_color_heading_bg=005A94&c_color_heading=ffffff&c_color_link_bg=E3E3E3&c_color_link=005A94&c_color_bottom_bg=005A94" type="text/javascript"></script></div>


4. 然後在這段程式碼上面, 加入這段程式碼,其中togglecomments('')內, 要填的就是 div 那個唯一值 "whoiswho"
<a href="javascript:togglecomments('whoiswho')" title="click to expand">[+/-] 展開/收回</a>

整段程式碼就變成這樣了.藍字部分, 就是要伸縮用的, 所加入的程式碼...
<a href="javascript:togglecomments('whoiswho')" title="click to expand">[+/-] 展開/收回</a>
<div id="
whoiswho" class="commenthidden">
<script src="http://pub.mybloglog.com/comm2.php?mblID=2007041119294954&amp;c_width=180&c_sn_opt=n&amp;amp;amp;c_rows=5&amp;c_img_size=h&amp;c_heading_text=Recent+Readers&amp;c_color_heading_bg=005A94&c_color_heading=ffffff&c_color_link_bg=E3E3E3&c_color_link=005A94&c_color_bottom_bg=005A94" type="text/javascript"></script></div>



相關文章 :

28 comments:

Lica Tsai 提到...

想玩這個,可是好難啊~ 我要試標籤雲也都失敗,嗚...有空再來慢慢try了....

Skyvee 提到...

如果有哪裡你覺得不明白意思, 可以跟我說哦, 我怕我寫的不夠清楚..

Lica Tsai 提到...

不是不清楚啦
是好多字,好多語法,看了頭就昏了....
標籤雲的話,不知為何都不能存檔,
會出現XML錯誤還什麼的訊息,
試了二次都醬,想說等有空再來試好了^^
謝謝你哩,你的站真是個挖寶的好地方!

Skyvee 提到...

原來是這樣啊, 如果標籤雲還試不成功, 再跟我說一下哦! 看看能不能找出什麼問題? :)

momo 提到...

您好我是blogger新手,請問你這樣的網頁要如何設計才可以像你一樣?,有關CSS.HTML套用等等和教學= =",您可以做教學嗎?希望您可以分享你從blogger無作到現在這樣子美美網頁.再次感謝^^.

Skyvee 提到...

momo你好, 其實從無到有, 我都有慢慢留記錄在部落格中呢!可見得我的版面沒有設計的夠好, 夠直覺, 所以您沒發現..>_<.

在[我的標籤]那個框框中, 您點一下 Blog Element, 會顯示出一些教學文章, 是介紹可加入部落格的一些玩意. blogger tips, 是針對使用blogspot 部落格, 可改變版型的一些教學文章

CSS, HTML 這部分, 最好要先有一些概念, 這樣下去改版型時, 可以節省一些時間.可以先去翻一下書本, 有基礎後, 實作會比較順手哦!

如果您才剛開始, 您也可以先參考這篇文章, 看一下是否有幫助.

部落格的小玩意整理

如果您要練習CSS, HTML, 建議可以用微軟的frontpage來操作, 就很夠用了呢!

monster 提到...

您好~~
無意間逛到這裡來...
發現這個新大陸
哇~~~好厲害喔(嘴都合不起來了)
我要好好向你學習學習....
呵呵

羅傑 提到...

Dear Skyevee..
非常感謝您的教學,總算讓我成功地「移植」,謝謝啦,並祝週末愉快。

Skyvee 提到...

Monster, 我也是在學習中, 有問題,歡迎一起研究吧! :)

Skyvee 提到...

羅傑你好, 恭喜你成功移植啦!:)

Rack Lin 提到...

Dear:
自推一下, 用 "輕鬆擴充 Blogger 功能:Blogger_ext2.js (jQuery way)!" 不用懂任何 CSS/Template/Javascript 也能擴充您的 Blogger.
http://racklin.blogspot.com/2007/01/blogger-jquery-way.html

而網友開發的無腦安裝在此:
http://joshnote.blogspot.com/2007/04/blogger.html

SPEAKER 提到...

哈囉 Skyvee

這篇文章有出現我們的圖耶哈
在謝謝你們來看

我是標籤雲的時候也是一直有問題
再去試試看
有問題再來請教您喔
加油

Skyvee 提到...

呵, 希望你不會介意出現你們的圖哦.. 有問題再跟我說囉!

Annie Chang 提到...

小婆今天下午測試了這項功能但不成功!

小婆的 template 沒有 /b:skin
但有 /* CSS */

應該是這裡出了問題
但不知如何解決?

可否指導一下?謝謝!

>.^

Skyvee 提到...

小婆你好,

請你把那2列程式碼改成以下,
整段程式碼放在 </head> 前,試看看..

<style type="text/css">
.commenthidden {display:none}
.commentshown {display:inline}
</style>

其中, 兩個大括弧<,請改成半形的 <

匿名 提到...

我改了半天
邊欄還是一直掉下去耶
請問我哪邊出錯了呢謝謝
http://blog.roodo.com/delfitalia
這是我的網址
請幫我看看喔感謝

our blog 提到...
作者已經移除這則留言。
洋蔥頭 提到...

↑上面貼錯了 抱歉
站長~
文章下面的留言版可以改嗎?
就是那個留言的區塊

Skyvee 提到...

洋蔥頭,
原則上是可以的, 就怕你的template中有其他與此有衝突. 請在<dl id='comments-block'> </dl> 那段區塊外, 再加入第3, 4步驟的程式包住.

Skyvee 提到...

詩您好,
剛去看了你的blog, 我沒有用過roodo的格式, 所以不能確定這樣的方式是不是在roodo也可以行得通. 可能是在改css的步驟不一樣哦!

Runner 提到...

awesome job skyvee !
從你這裡學到很多東西,謝謝囉。:)

Skyvee 提到...

:) 謝謝Runner的留言!

嬌嬌 提到...

噗~~ 我也看到我的圖片了耶!!
不知這個伸縮列 可否改善網頁開啓速度呢??
我也來試試 謝謝分享~~

Skyvee 提到...

嬌嬌您好, 這個伸縮其實是已載入網頁了, 只是要點展開後,才會列出全部的內容,對加速網頁的速度可能沒什麼幫助呢! :)

不過嬌嬌的網頁載入速度比我的還快呢!

嬌嬌 提到...

嗯~~ 我想也是的...
嬌嬌的網頁 有時快有時慢
我想讓人等的感覺
真的會降低訪客來的慾望

Skyvee 提到...

嬌嬌, 是的, 所以如果像我一樣裝了太多widget, 拖慢網頁的原因, 就很難找出來了.:P

LucKy☆sTaR 提到...

我不明白啊,
象那种连接的sidebar也能弄吗?

因为我看到人家弄,
我的却弄不了T。T

Skyvee 提到...

luckystar,你指的是放一些網路連結嗎? 當然可以囉!請參考第4步驟的做法.