有網友問到,如何伸展側邊欄, 趁空整理了一下程式碼及流程.
當部落格玩意愈加愈多時, 如果選擇雙欄者,或多欄也可能會發現, 頁面被拉得很長, 尤其是文章有時候沒那麼多, 反而旁邊的側邊欄拖長整個頁面, 看起來版面就有點長短腳..這時候可以用 伸展這個功能, 讓側邊欄預設是關起來, 想開時, 再打開就行了. 可有效控制頁面長度.
先得修改HTML碼時, 先備分 template囉!
然後 選範本 --> 修改 HTML --> 展開小裝置範本 打勾 後, 就準備開工啦!
1. 在<head> 之後, 加入以下程式碼<script type='text/Javascript'>
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=='commentshown') { whichpost.className='commenthidden'; } else { whichpost.className='commentshown'; }
} </script>
2. 在 css 區段, 也就是在 ]]></b:skin> 前, 加入以下程式碼.commenthidden {display:none}
.commentshown {display:inline}
3. 再來就是每當想在side bar 加入這個伸縮功能時, 就可以在原本那段程式碼外, 包一段程式碼.
以 [謝謝你們來看我] 為例, 本來我這部分的程式碼是長這樣的
<script src="http://pub.mybloglog.com/comm2.php?mblID=2007041119294954&c_width=180&c_sn_opt=n&amp;amp;c_rows=5&c_img_size=h&c_heading_text=Recent+Readers&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&c_width=180&c_sn_opt=n&amp;amp;c_rows=5&c_img_size=h&c_heading_text=Recent+Readers&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&c_width=180&c_sn_opt=n&amp;amp;c_rows=5&c_img_size=h&c_heading_text=Recent+Readers&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>
2007/07/12
讓blogspot的側邊欄 sidebar 伸縮自如
28 comments:
想玩這個,可是好難啊~ 我要試標籤雲也都失敗,嗚...有空再來慢慢try了....
如果有哪裡你覺得不明白意思, 可以跟我說哦, 我怕我寫的不夠清楚..
不是不清楚啦
是好多字,好多語法,看了頭就昏了....
標籤雲的話,不知為何都不能存檔,
會出現XML錯誤還什麼的訊息,
試了二次都醬,想說等有空再來試好了^^
謝謝你哩,你的站真是個挖寶的好地方!
原來是這樣啊, 如果標籤雲還試不成功, 再跟我說一下哦! 看看能不能找出什麼問題? :)
您好我是blogger新手,請問你這樣的網頁要如何設計才可以像你一樣?,有關CSS.HTML套用等等和教學= =",您可以做教學嗎?希望您可以分享你從blogger無作到現在這樣子美美網頁.再次感謝^^.
momo你好, 其實從無到有, 我都有慢慢留記錄在部落格中呢!可見得我的版面沒有設計的夠好, 夠直覺, 所以您沒發現..>_<.
在[我的標籤]那個框框中, 您點一下 Blog Element, 會顯示出一些教學文章, 是介紹可加入部落格的一些玩意. blogger tips, 是針對使用blogspot 部落格, 可改變版型的一些教學文章
CSS, HTML 這部分, 最好要先有一些概念, 這樣下去改版型時, 可以節省一些時間.可以先去翻一下書本, 有基礎後, 實作會比較順手哦!
如果您才剛開始, 您也可以先參考這篇文章, 看一下是否有幫助.
部落格的小玩意整理
如果您要練習CSS, HTML, 建議可以用微軟的frontpage來操作, 就很夠用了呢!
您好~~
無意間逛到這裡來...
發現這個新大陸
哇~~~好厲害喔(嘴都合不起來了)
我要好好向你學習學習....
呵呵
Dear Skyevee..
非常感謝您的教學，總算讓我成功地「移植」，謝謝啦，並祝週末愉快。
Monster, 我也是在學習中, 有問題,歡迎一起研究吧! :)
羅傑你好, 恭喜你成功移植啦！:)
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
哈囉 Skyvee
這篇文章有出現我們的圖耶哈
在謝謝你們來看
我是標籤雲的時候也是一直有問題
再去試試看
有問題再來請教您喔
加油
呵, 希望你不會介意出現你們的圖哦.. 有問題再跟我說囉!
小婆今天下午測試了這項功能但不成功！
小婆的 template 沒有 /b:skin
但有 /* CSS */
應該是這裡出了問題
但不知如何解決？
可否指導一下？謝謝！
>.^
小婆你好,
請你把那2列程式碼改成以下,
整段程式碼放在 ＜/head> 前,試看看..
＜style type="text/css">
.commenthidden {display:none}
.commentshown {display:inline}
＜/style>
其中, 兩個大括弧＜,請改成半形的 <
我改了半天
邊欄還是一直掉下去耶
請問我哪邊出錯了呢謝謝
http://blog.roodo.com/delfitalia
這是我的網址
請幫我看看喔感謝
↑上面貼錯了 抱歉
站長~
文章下面的留言版可以改嗎?
就是那個留言的區塊
洋蔥頭,
原則上是可以的, 就怕你的template中有其他與此有衝突. 請在＜dl id='comments-block'> ＜/dl> 那段區塊外, 再加入第3, 4步驟的程式包住.
詩您好,
剛去看了你的blog, 我沒有用過roodo的格式, 所以不能確定這樣的方式是不是在roodo也可以行得通. 可能是在改css的步驟不一樣哦!
awesome job skyvee !
從你這裡學到很多東西，謝謝囉。:)
:) 謝謝Runner的留言!
噗~~ 我也看到我的圖片了耶!!
不知這個伸縮列 可否改善網頁開啓速度呢??
我也來試試 謝謝分享~~
嬌嬌您好, 這個伸縮其實是已載入網頁了, 只是要點展開後,才會列出全部的內容,對加速網頁的速度可能沒什麼幫助呢! :)
不過嬌嬌的網頁載入速度比我的還快呢!
嗯~~ 我想也是的...
嬌嬌的網頁 有時快有時慢
我想讓人等的感覺
真的會降低訪客來的慾望
嬌嬌, 是的, 所以如果像我一樣裝了太多widget, 拖慢網頁的原因, 就很難找出來了.:P
我不明白啊，
象那种连接的sidebar也能弄吗？
因为我看到人家弄，
我的却弄不了T。T
luckystar,你指的是放一些網路連結嗎? 當然可以囉!請參考第4步驟的做法.
不接受新意見。