Bloggerのサイドバーにアコーディオンメニューを導入する方法

折り畳み式のメニューをサイドバーに導入する方法です。うまくいけば画像のようになります。文字とURLは直接指定しないとダメです。

<div id="accordion"><ul>

<li><h3>アフィリエイト関係</h3>
<ul>
<li><a href="//blogger.googleblog.com/search/label/Amazon">Amazon</a></li>
<li><a href="//blogger.googleblog.com/search/label/adsense">アドセンス</a></li>
<li><a href="//blogger.googleblog.com/search/label/ads">広告</a></li>
</ul>
</li>

<li><h3>ブログ関係</h3>
<ul>
<li><a href="//blogger.googleblog.com/search/label/Blogger">Blogger</a></li>
<li><a href="//blogger.googleblog.com/search/label/FTP">FTP</a></li>
<li><a href="//blogger.googleblog.com/search/label/ads">広告</a></li>
</ul>
</li>

<li><h3>メニュー 3</h3>
<ul>
<li><a href="//blogger.googleblog.com">サブメニュー 3-1</a></li>
<li><a href="//blogger.googleblog.com">サブメニュー 3-2</a></li>
<li><a href="//blogger.googleblog.com">サブメニュー 3-3</a></li></ul>
</li>

</ul></div>

<style type="text/css">
#accordion {margin: 0;padding:0; border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #fff; width: 200px;} 
#accordion h3 {font: 16px; padding: 18px 10px; color:#fff; cursor: pointer; background:#333 ;} 
#accordion li {list-style-type: none; padding:0; margin:0; background-color:#f4f4f4;} 
#accordion ul ul li a {border-bottom:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd; color: #3b3b3b; text-decoration: none; font: 16px Verdana; display: block; padding: 15px 0 15px 10px;} 
#accordion ul ul li a:hover {font-weight:bold;} 
#accordion ul ul {display: none;} 
#accordion li.active ul {display: block;} #accordion ul{list-style:none; margin:0; padding:0;}

#accordion h3 {border-bottom:1px solid #fff;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow: 0 1px 0 #ccc;-webkit-box-shadow: 0 1px 0 #ccc;box-shadow: 0 1px 0 #ccc;}
#accordion h3:after{content: '';position: absolute;right: 5px;margin-top: 5px;border-top: 6px solid #fff;border-right: 6px solid transparent;border-left: 6px solid transparent;}
</style>

<script>
$(document).ready(function() { $("#accordion h3").click(function(){$("#accordion ul ul").slideUp(); if(!$(this).next().is(":visible")) {$(this).next().slideDown();}})})
</script>

HTML/JavaScript ガジェットに、上記をそのままコピーしてまずは動作するか確認してください。動作にはjqueryが必要です。

動作が確認で来たら、カスタマイズしましょう。

・メニュー文字の置き換え
・リンク先のURLの置き換え

メニューを増やすには、コピペで行けるかと思います。
メニュー幅は、「width: 200px;」で指定してますので、この数字を調整してください。

補足

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

jqueryが必要なので、テンプレートに組み込んでください。
分からない人は、上記の１行を今回のウジェットの１行目に追記してください