AdieStudio Homepage

What is accordion tab in blogger? How to make accordion tab style in blogspot blog?

If you don't know what accordion tab, Just look at below images or see the sample at this blog right sidebar and you'll see what accordion tab view is. (Sorry, we have remove it for some reason)


Wanna have this in your blog?

All you have to do is copy this script below then add to your page elements (Add HTML/Javascript)

<style type="text/css">
div.TabTampil div.TTs
{height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
{ background-color: #77d0ee; }
div.TabTampil div.Halamans
{ clear: both; border: 1px solid #0199cb; overflow: hidden; background-color: #ffffff;}
div.TabTampil div.Halamans div.Halaman
{ height: 100%; padding: 0px; overflow: hidden; }
div.TabTampil div.Halamans div.Halaman div.Alas
{ padding: 3px 5px; }
div.TabTampil div.TTs a
{ border-left:1px solid #0199cb; border-right:1px solid #0199cb; border-top:1px solid #0199cb; border-bottom:0px solid #0199cb; float: left;
display: block; width: 100px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: "Arial", Serif;
font-size: 12px; font-weight: 900; color: #222}
</style>


<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 370px;" class="TTs"> <a>Tab 1 Name</a> <a>Tab 2 Name</a> <a>Tab 3 Name</a></div>
<div style="width: 350px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
Tab 1 content goes here
Tab 1 content goes here
Tab 1 content goes here
</div>
</div>


<div class="Halaman">
<div class="Alas">
Your tab 2 content goes here
Your tab 2 content goes here
Your tab 2 content goes here
</div>
</div>


<div class="Halaman">
<div class="Alas">
Tab 3 content goes here
Tab 3 content goes here
Tab 3 content goes here
</div>


</div>
</div>

</div></form>

<script style="text/javascript" src="http://meichelina.googlepages.com/newscriptab.js"></script>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>

IICOLORSIIIIIIII ---> Edit to change colors

IIIIIICOLORSIIII ---> Edit to change the content/text

IIIIIIIIICOLORSI ---> Edit Size according to your sidebar width and height

I move this article from my blog at templates-gallery.blogspot.com because this domain is really cool for me. he he he peace :)