Multi Menu View Tab

Ada yang belum tahu TabView? waduh pak Kemana aja Hari gini gitu!.. Hehe.. :D fiss.. ni ScreenShoot nya :



Waduh, Mirip punyaku ya.. :D hehe..

Biasanya di Setiap Blog kan Cuma ada Satu Tu TabView ya, Sejauh ini dan sepengetahuan saya si kalo besok-besok gak taulah, mungkin karena sudah baca coretan ini atau apa jadi banyak bermunculan Kembar-Kembar yang lain :D hehe..


Begini, Yang Pertama Harus anda lakukan adalah Membuat TabView untuk yang pertama kali, Caranya dapat anda Baca DISINI.

Pastikan TabView Pertama yang anda buat itu Sukses, karena selanjutnya kita akan sedikit BerExperimen.. :D.

Langkah selanjutnya adalah membuat Tab Yang Kedua :

Lakukan Hal yang sama Seperti Pada Proses Pertama ! tetapi PERHATIKAN

Langkah Selanjutnya Pada tahap berikutnya yaitu CLONING Script .js nya.. Perhatikan gambar berikut ini :




Di situ ada tulisan : http://superinhost.com/trikblog/tabview.js , << color="blue">http://aleydoank18.googlepages.com/alim.js ,, script itu sudah saya modifikasi, JIka mau tahu cara modifikasinya Begini ni, Tapi jika tidak mau tahu.. YOi,, Lewat saja.. langsung langkah selanjutnya !!


Copy Link itu dan Paste di NewTab lalu Script ini akan muncul! STOP Tenang.. Santai Bos.. Baca dengan Teliti

function TabView Id, id)
{
var TabView = document.getElementById(TabView Id);

// ----- 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('"+TabView Id+"', "+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(TabView Id, id) { tabview _aux(TabView Id, id); }

function tabview _initialize(TabView Id) { tabview _aux(TabView Id, 1); }

Waduh, Kok aku jadi pusing ya lihat script ini,, :D

Lihat Tulisan berwarna Merah yang bertuliskan tabview !! Tugas Anda selanjutnya adalah Menambahkan angka 2 di belakangnnya sehingga Menjadi tabview2 ,, Sudah selesai?

Oke Kita Lanjut, Oh iya, Jika anda membuka script ini dengan Notepad Lakukan Penyimpanan dengan extensi .js pada fileName dan pada SaveAsType Ganti Jadi All Files.

Selanjutnya Lakukan UploadFile .js Tersebut, Saran saya lakukan Upload di Google Page Creator Copy link anda dan Paste Disana (di atas tadi).

Atau Jika tidak sempat, Anda boleh menggunakan URL ini Untuk Mengganti Url Script diatas : http://aleydoank18.googlepages.com/alim.js Tentunya sudah di modifikasi :D

Setelah itu Penyetelan pada CSS anda :

Copy - Paste

div.TabView2 div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView2 div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #A9F5A9; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView2 div.Tabs a:hover, div.TabView2 div.Tabs a.Active
{
background-color: #A9F5A9; /* Warna background Menu Utama Atas */
}
div.TabView2 div.Pages
{
clear: both;
border: 1px solid #A9F5A9; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #; /* Warna background Kotak Utama */
}
div.TabView2 div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView2 div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Letakkan sebelum Kode ]]></b:skin> atau tepat dibawah Kode CSS TabView yang pertama anda buat tadi.

Lalu SIMPAN

Selanjutnya Pada widget HTML Anda

<form action=" tabview2 .html" method="get">
<div class=" TabView2 " id=" TabView2 ">

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

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

<div class="Page">
<div class="Pad">
Tab 1.1 <br />

Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">

<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>

</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />

Tab 3.3 <br />
</div>
</div>

</div>
</div>

</form>

<script type="text/javascript">
tabview2 _initialize(' TabView2 ');
</script>

Lagi Lagi Perhatikan Tulisan Berwarna Merah Pastikan itu Dengan Benar.. Copy Paste Script ini ke Widget HTML Anda.

Selesai

---

Tertarik dengan Artikel-artikel dari aLI

Masukkan E-mailmu disini :

Diimport dari: HERA

Print this post
Sincerely,
Padhang Bulan