[分享] Blogger 讓側邊的工作列元件，能夠展開並且收闔的Java

相信大家玩Blogger一陣子之後，
想要放的widget太多，而首頁開啟的速度太慢。
尤其是有時候要用智慧型手機開啟，會等很久的時間。
就像在玩Android手機一樣，程式把內建記憶體灌到滿後，
就會開始找方法把程式灌到記憶卡中。

Kuo在網路上找到能夠把側邊的工作列元件，參考於ABIN'S TECH NOTE。
想要在預設的時候展開或是收闔，都能自己設定的Java程式碼。
想當然爾，完全不懂程式碼的Kuo一定是參考網路上神人的程式碼一步一步的做。
現在就把這個過程記錄下來，分享給之後需要用到的人。

使用前先存檔喔！

1. 先到『版面配置』→『修改HTML』→點選『展開小裝置範本』。
2. 然後把以下的程式碼貼在，〈head〉〈/head〉標籤內，並且在〈/style〉後面。
〈Kuo找自己的程式碼，不管怎樣〈/style〉老是在〈/head〉的後面，所以就乾脆把程式碼貼在〈/head〉的上面。〉

<script type='text/javascript'>

<!-- Function used for Sidebar Element Toggling: ElementToggle()-->

function ElementToggle(id) {

var element = document.getElementById(id).getElementsByTagName(&#39;div&#39;);

for(i = 0; i &lt; element.length; i++) {

attribute = element[i].getAttribute(&#39;id&#39;);


if(attribute == &#39;toggle&#39;)

{

if (element[i].style.display == &#39;none&#39;)

element[i].style.display = &#39;inline&#39;;


else

element[i].style.display = &#39;none&#39;;

}

}

}


</script>

3. 找到你想要展開並且收闔的widget的開頭。可以收尋〈b:widget，然後再確定您要收闔的元件。我想要收闔的元件如下：



<b:widget id='HTML1' locked='false' title='Plurk' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

<h2><data:title/></h2>

</b:if>


<div class='widget-content'>

黃色的代表這個元件在這整著程式碼所命名的名字，
綠色則代表這個元件在首頁的名字。
4. 找出來的這個元件，就是預設要收闔的，所以把剛剛找出來的程式碼，照著下面的顏色去做修改。

<b:widget id='HTML1' locked='false' title='Plurk' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2><a href='javascript:void(0);' onclick='javascript:ElementToggle(&quot;HTML1&quot;);'>[+/-]</a>
<data:title/></h2>
</b:if>
<div class='widget-content' id='toggle' style='display:none;'>
<data:content/>
</div>



※請注意，HTML1，這兩個ID要一樣。
※藍色的就是要另外加上去的。
※而橘色的就是在預設，是要展開還是收闔的程式碼。也是要另外加上去喔！
   style='display:none;' 就是預設收闔。如果要預設展開，就把這行刪掉就可以了。
   〈但是我們那麼辛苦不就是為了要讓他可以收闔起來嗎？XDD〉


至於是甚麼原理，就別傷神去知道了，最重要就是要成功地達成我們的目的！XDDD