Home » » Membuat Tab View Tanpa EDIT HTML

Membuat Tab View Tanpa EDIT HTML

Hello Pengujung oktri Blog Dalam postingan ini Menyambung pembahasan sebelumnya yaitu Cara membuat Tabview ,dan Cara membuat Tab View (Versi 2)
Bedanya  postingan kali ini dengan tutorial sebelum nya sedikit simple tanpa edit pada html .
Oke langsung saja Berikut ini langkah-langkahnya :
1. Masuk ke akun Blogger Anda.

2. Klik Tata Letak.

3. Klik Tambah Gadget.

4. Pilih HTML/JavaScript.

Tab View Versi A


 <style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#00BF08; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #EF8100; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#EF8100; /*

Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Judul Ke-1</a>
<a>Judul Ke-2</a>
<a>Judul Ke-3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi judul Ke-1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi judul Ke-2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi judul Ke-3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>




Tab View Versi B







<style type="text/css">
/*------------TabView--------*/
div.TabView div.Tabs {
height : 20px;
overflow : hidden;
}
div.TabView div.Tabs a {
float : left;
display : block;
width : 100px;
text-align : center;
height : 20px;
padding-top : 0px;
vertical-align : middle;
border-top : 1px solid #999999;
border-left : 1px solid #999999;
border-right : 1px solid #999999;
border-bottom : 1px solid #999999;
font-family : "verdana", Serif;
font-weight : 90px;
color : #1e62b6;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {
background-color : #f2f2f2;
}
div.TabView div.Pages {
clear : both;
border-left : 1px solid #999999;
border-right : 1px solid #999999;
border-bottom : 1px solid #999999;
overflow : hidden;
background-color : #f2f2f2;
}
div.TabView div.Pages div.Page {
height : 100%;
padding : 0;
overflow : hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding : 3px 5px;
}
</style>



<script src="http://andi8lumut.googlepages.com/tabview.js" type="text/javascript">
</script>


<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 310px;" class="Tabs">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
</div>

<div style="width:310px; height:275px; " class="Pages">


<div class="Page">
<div class="Pad">

Isi teks tab 1

</div>
</div>


<div class="Page">
<div class="Pad">

Isi teks tab 2

</div>
</div>

<div class="Page">
<div class="Pad">

Isi teks tab 3

</div>
</div>
</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Pilih dengan Tampilan Tab view yang di ingin kan
seoga bermanfaat dan Berkreatifitas






Artikel Terkait:

1 komentar:

  1. sudah saya coba...tapi konten isinya gak mau keluar...koq HTML nya cm div itu diisi apaan?

    BalasHapus

Fivers

Selamat Datang Di OKTRI BLOG

Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...Selengkapnya tentang Tutorial Ini

Sekilas tentang penulis

Nama saya Oktri darmadi,saya seorang Mahasiswa S1 Teknik Informatika Di IBI DARMAJAYA Bandar Lampung.

Social Stuff

  • RSS
  • Twitter
  • Facebook
  • HOME
Oktri