TRANSLATE THIS PAGE

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified

Wednesday, June 9, 2010

CARA MEMBUAT TAB VIEW

UNTUK MEMBUAT TAB VIEW SEBAGAI BERIKUT

  • Login dulu ke account blogger kamu
  • Pilih tab Tata Letak --> Edit HTML.
* Copy kode berikut dan pastekan di atas kode ]]></b:skin>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}

div.TabView div.Tabs a
{
float: left;
display: block;

width: 90px;
text-align: center;

height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000000;
border-bottom-width: 0;

text-decoration: none;
font-family: "Arial", Times New Roman, Serif;
font-weight: 900;
color: #000080;
-moz-border-radius-topright:15px;
-moz-border-radius-topleft:15px;
-webkit-border-bottom-left
-webkit-border-bottom-right
}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #BDBDBD;
}

div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF;
border: 1px solid #000000;
overflow: hidden;
}

div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}




* Copy kembali kode berikut di atas kode </head>

<script type='text/javascript'>
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>


* Simpan template kamu.
* Kemudian pilih tab Elemen Halaman --> Tambah Gadget.
* Jendela Tambahkan Gadget akan muncul --> HTML/JavaScript.
* Copy dan paste kode di bawah ini.


<form action="tabview.html" method="get">
<div class="TabView" id="TabView">

<div class="Tabs" style="width: 350px;">
<a>MENU 1</a>
<a>MENU2</a>
<a>MENU 3</a>
</div>

<div class="Pages" style="width: 450px; height: 250px;">

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

MENU1.1<br/>
MENU1.2<br/>
MENU1.3<br/>

</div>
</div>


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

MENU2.1<br/>
MENU2.2<br/>
MENU2.3<br/>

</div>
</div>


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

MENU3.1<br/>
MENU3.2<br/>
MENU3.3<br/>

</div>
</div>

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

<script type="text/javascript">
tabview_initialize('TabView');
</script>http://savalia2001.blogspot.com

hasilnya seperti di bawah ini

Artikel Lainnya Dibawah ini



0 comments:

SILAHKAN TINGGALKAN KOMENTAR DISINI NO SPAM..NO PORN... KRITIK DAN SARAN YANG MEMBANGUN SANGAT DIBUTUHKAN DAN BERMANFAAT.KOMENTAR YANG MENGHUJAT ATAU DENGAN KATA KATA KOTOR AKAN TERHAPUS DENGAN SENDIRINYA TERIMA KASIH

KOMENTAR TERAKHIR


MY FRIEND


ARAHKAN MOUSE KE IMAGE AKAN BERHENTI

Blogger templates


MAU SEPERTI DIATAS KLIK DISINI

CATEGORY

POSTING TERBARU

 
Back To Top - GURU PKn SMP PGRI 02 BATU - Template By Blogger Edited By Savalia