Put TAB View in your page element blog

Here is the free widget for your blog. Show your link in this Tab View. I posted before about putting D-Tree Menu where it doesn't need to add or put script in our Blog HTML. This widget is the same way to put in our blog.

We just need to copy the code and paste it in our blog page element. Take a look the example of the Tab View below;



Alright guyz, do not take too much time to think how to put this widget, hehe, Now, Copy the code below and put it in your blog page element. Put anywhere according to your design style. Here's the code;

<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</a> <a>TAB 2</a> <a>TAB 3</a></div>

<div style="width: 335px; height: 280px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
Your TAB 1 Content
</div>
</div>

<div class="Halaman">
<div class="Alas">
Your TAB 2 Content
</div>
</div>


<div class="Halaman">
<div class="Alas">
Your TAB 3 Content
</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><br/>

Then you have to change the RED color with your own Link, and you can also change the width and height (Orange Color) of this Tab View.

Hope this is helpful for all of you, Thanks in advance !