blogger 3.0:为博客 添加能够切换的按钮

首先感谢原作者 Martial B
英文原文点击这里。

作用: 此hack/扩展 能够让你添加一个能够上下切换来切换去的菜单，说不太清楚，大家看我测试博客的例子。

安装方法:第一步首先在你的xml模板里的</head>上边，]]<>/b:skin>下边，放上以下代码：


<script src='http://ggpi.googlecode.com/files/swichmenu.js' type='text/javascript'/>
<style type='text/css'>
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}

.submenu{
margin-bottom: 0.5em;
}
</style>

第二步，在页面元素项目那边添加一个 html/js页面元素，放上以下代码:

<!-- Keep all menus within masterdiv-->
<div id="masterdiv">

<div class="menutitle" onclick="SwitchMenu('sub1')">修改我成你要的按钮名称</div>
<span class="submenu" id="sub1">
- <a href="new.htm">What's New</a><br>
- <a href="hot.htm">What's hot</a><br>
- <a href="revised.htm">Revised Scripts</a><br>
- <a href="morezone/">More Zone</a>
</span>

<div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>
<span class="submenu" id="sub2">
- <a href="notice.htm">Usage Terms</a><br>
- <a href="faqs.htm">DHTML FAQs</a><br>
- <a href="help.htm">Scripts FAQs</a>
</span>

<div class="menutitle" onclick="SwitchMenu('sub3')">Help Forum</div>
<span class="submenu" id="sub3">
- <a href="http://www.codingforums.com">Coding Forums</a><br>
</span>

<div class="menutitle" onclick="SwitchMenu('sub4')">Cool Links</div>
<span class="submenu" id="sub4">
- <a href="http://www.javascriptkit.com">JavaScript Kit</a><br>
- <a href="http://www.freewarejava.com">Freewarejava</a><br>
- <a href="http://www.cooltext.com">Cool Text</a><br>
- <a href="http://www.google.com">Google.com</a>
</span>

<img src="about.gif" onclick="SwitchMenu('sub5')"><br>
<span class="submenu" id="sub5">
- <a href="http://www.dynamicdrive.com/link.htm">Link to DD</a><br>
- <a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a><br>
- <a href="http://www.dynamicdrive.com/contact.htm">Email Us</a><br>
</span>

</div>


第三步，把你第二步的代码修改成你要显示的按钮和链接，还可以通过修改第一步的CSS的代码改变按钮样式，然后就完成了：）