有網友問到,如何伸展側邊欄, 趁空整理了一下程式碼及流程.
當部落格玩意愈加愈多時, 如果選擇雙欄者,或多欄也可能會發現, 頁面被拉得很長, 尤其是文章有時候沒那麼多, 反而旁邊的側邊欄拖長整個頁面, 看起來版面就有點長短腳..這時候可以用 伸展這個功能, 讓側邊欄預設是關起來, 想開時, 再打開就行了. 可有效控制頁面長度.
先得修改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 加入這個伸縮功能時, 就可以在原本那段程式碼外, 包一段程式碼
要用<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>
