複数のBlogPetをサイドバーに飼う方法｜UnderDone（あんでるどん）

<style type="text/css">
.tabheader table {
 border-collapse: collapse; /* for IE */
 border-spacing: 0; /* for N6 */
}
.tabheader table tr td {margin:0;padding:0;border-width:0}
.tabheader .close {
 border-style: solid;
 border-width: 1px;
 border-color: #000;
 background-color: #d0d0d0;
 margin:0;
 padding: 0.5em;
 white-space: nowrap;
}
.tabheader .open {
 border-style: solid;
 border-width: 1px;
 border-color: #000 #000 #fff #000;
 background-color: white;
 margin:0;
 padding: 0.5em;
 white-space: nowrap;
}
.tabheader .spc {
 border-style: solid;
 border-width: 1px 0 1px 0;
 border-color: #fff #fff #000 #fff;
 margin:0;
 padding: 0.5em;
 white-space: nowrap;
}
.tabheader a {text-decoration: none;}
.tabbody {
 border-color: black;
 border-style: solid;
 border-width: 0 1px 1px 1px;
 padding: 1em;
}
</style>

<script language="JavaScript">
<!--
// bpref = tab body prefix, hpref = tab header prefix
function seltab(bpref, hpref, id_max, selected) {
 if (! document.getElementById) return;
 for (i = 0; i <= id_max; i++) {
  if (! document.getElementById(bpref + i)) continue;
  if (i == selected) {
   document.getElementById(bpref + i).style.visibility = "visible";
   document.getElementById(bpref + i).style.position = "";
   document.getElementById(hpref + i).className = "open";
  } else {
   document.getElementById(bpref + i).style.visibility = "hidden";
   document.getElementById(bpref + i).style.position = "absolute";
   document.getElementById(hpref + i).className = "close";
  }
 }
}
// -->
</script>

<div class="tabheader">
<table><tr>
<td>
 <div id="head1">
  <a href="javascript:seltab('box', 'head', 10, 1)">こうさぎ</a>
 </div>
</td>
<td><div class="spc">&nbsp;</div></td>
<td>
 <div id="head2">
  <a href="javascript:seltab('box', 'head', 10, 2)">こねこ</a>
 </div>
</td>
<td><div class="spc">&nbsp;</div></td>
<td>
</td>
<td width="100%"><div class="spc">&nbsp;</div></td>
<!-- ↑この 100% が重要。試しに消してみよう! -->
</tr></table>
</div>
<!-- タブの中味です -->
<div class="tabbody">
<div id="box1">
<script language="JavaScript" type="text/javascript" src="http://www.blogpet.net/js/「こうさぎのJavascript ID」.js" charset="EUC-JP"></script>
</div>

<div id="box2">
<script language="JavaScript" type="text/javascript" src="http://www.blogpet.net/js/「こねこのJavascript ID」.js" charset="EUC-JP"></script>
</div>

</div>
<script language="JavaScript">
<!--
seltab('box', 'head', 10, 1);
// -->
</script>