<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /*
Lebar Kotak Tab */
height: 22px; /*
Tinggi Menu Utama Atas */
text-align: center; /*
Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /*
Posisi Kotak Tab */
background-color: #000; /*
Warna background Kotak Tab */
padding-top: 2px; /*
Spasi Atas */
border: 2px solid #393939; /*
Warna border kotak Tab */
border-bottom: 2px solid #393939; /*
Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /*
Font Kotak Tab */
font-weight: 900; /*
Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /*
Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: none; /*
Warna border Kotak Konten */
overflow: hidden;
background-color: none; /*
Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /*
Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width:
300px;" class="Tabs">
<a><span style="color: #fff">
Title Tab 1</span></a>
<a><span style="color: #fff">
Title Tab 2</span></a>
<a><span style="color: #fff">
Title Tab 3</span></a>
</div>
<div style="width:
300px; height:
350px;" class="Pages">
<div class="Page">
<div class="Pad">
<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script><script type="text/javascript" src="/feeds/posts/default/-/Software?orderby=updated&alt=json-in-script&callback=labelthumbs"></script><script type="text/javascript">function recentpostslist(json) { document.write('<ul>'); for (var i = 1; i < json.feed.entry.length; i++) { for (var j = 1; j < json.feed.entry[i].link.length; j++) { if (json.feed.entry[i].link[j].rel == 'alternate') { break; } }var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bsvar entryTitle = json.feed.entry[i].title.$t;var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>"; document.write(item); } document.write('</ul>'); }</script><script src="http://kompiajaib.blogspot.com/feeds/posts/summary/-/Software?max-results=30&alt=json-in-script&callback=recentpostslist"></script><a href="http://kompiajaib.blogspot.com/search/label/Software" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category »</a></div>
</div>
<div class="Page">
<div class="Pad">
Kode HTML Anda Di Sini</div>
</div>
<div class="Page">
<div class="Pad">
Kode HTML Anda Di Sini</div>
</div>
</div></div></form>
<script src="http://kompiajaib.googlecode.com/files/tab_view2.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
<div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='http://kompiajaib.blogspot.com/2012/06/membuat-tab-view-di-blog.html' target='_blank'>widget</a></div>
0
comments
