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.

Wanna have tabs like in my 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://onlinejobnepal.com/images/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

If you have a problem when making multiple tab in blogspot, you can post your question below.

Making accordion tab in blogger, multiple tabs in blogspot, blogger tricks how to save you page size by using tab viewer.