 |
| Multi-Tab Widget For Blogger |
To add Multi-tab or Multi purpose sidebar to your blogger:
Code:
<script type='text/javascript'>
//<![CDATA[
function Allin1web_oom(NBTID, id)
{
var Allin1web = document.getElementById(NBTID);
var NBTs = Allin1web.firstChild;
while (NBTs.className != "NBTs" ) NBTs = NBTs.nextSibling;
var NBT = NBTs.firstChild;
var i = 0;
do
{
if (NBT.tagName == "A")
{
i++;
NBT.href = "javascript:Allin1web_ubah('"+NBTID+"', "+i+");";
NBT.className = (i == id) ? "Active" : "";
NBT.blur();
}
}
while (NBT = NBT.nextSibling);
var AiwGasgets = Allin1web.firstChild;
while (AiwGasgets.className != 'AiwGasgets') AiwGasgets = AiwGasgets.nextSibling;
var AiwGasget = AiwGasgets.firstChild;
var i = 0;
do
{
if (AiwGasget.className == 'AiwGasget')
{
i++;
if (AiwGasgets.offsetHeight) AiwGasget.style.height = (AiwGasgets.offsetHeight-2)+"px";
AiwGasget.style.overflow = "auto";
AiwGasget.style.display = (i == id) ? 'block' : 'none';
}
}
while (AiwGasget = AiwGasget.nextSibling);
}
function Allin1web_ubah(NBTID, id) { Allin1web_oom(NBTID, id);
}
function Allin1web_inisial(NBTID) { Allin1web_oom(NBTID, 1);
document.write('');}
//]]>
</script>
<style>
div.Allin1web div.NBTs {
height: 24px;
overflow: hidden;
}
div.Allin1web div.NBTs a:hover, div.Allin1web div.NBTs a.Active {
background-color:#b2b2b2;
color:white;
}
div.Allin1web div.AiwGasgets {
clear: both;
border: 2px solid #f4f4f4;
overflow: hidden;
background-color: #ffffff;
}
div.Allin1web div.AiwGasgets div.AiwGasget {
height: 100%; padding: 0px;
overflow: hidden;
}
div.Allin1web div.AiwGasgets div.AiwGasget div.Alas {
padding: 3px 5px;
}
div.Allin1web div.NBTs a {
border-left:1px solid #eee;
border-right:1px solid #eee;
border-top:1px solid #eee;
border-boNBTom:0px solid #eee;
float: left;
display: block;
width: 95px;
text-align: center;
vertical-align: middle;
height: 24px;
padding-top: 3px;
text-decoration: none;
font-family: "Arial", Serif;
font-size: 11px;
font-weight: 900;
color: #000000
}
</style>
</HEAD>
<BODY>
<form action="Allin1web.html" method="get">
<div id="Allin1web" class="Allin1web">
<div style="width: 300px;" class="NBTs"> <a>Editors Pick</a> <a>Comments</a> <a>Blog Archive</a></div>
<div style="width: 300px; height: 300px;" class="AiwGasgets">
<div class="AiwGasget">
<div class="Alas">
<br/>
Tab 1 content goes here
</div>
</div>
<div class="AiwGasget">
<div class="Alas">
<br/>
Tab 2 content goes here
</div>
</div>
<div class="AiwGasget">
<div class="Alas">
<br/>
Tab 3 content goes here
</div>
</div>
</div>
</div>
</div></form>
<script type="text/javascript">Allin1web_inisial('Allin1web');</script>
- Replace Red Color Text with Tab Content.
- You are Done...
No comments:
Post a Comment
Notice: Don't add "backlink". Text with Link will automatically Removed.