TabView Kembar? Why Not..

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 diSetiap 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 :

Disitu ada tulisan : http://superinhost.com/trikblog/tabview.js, << Ganti Link Itu dengan 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_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); }
Waduh, Kok aku jadi pusing ya lihat script ini,, :D

Lihat Tulisan berwarna Merah yang bertuliskan tabview!! Tugas Anda selanjutnya adalah Menambahkan angka 2 dibelakangnnya 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 (diatas 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
=== bagian di atas ini hanya sebagai sedikit wawasan saja ===

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 :


Related Post by Category

13 Responses to "TabView Kembar? Why Not.."

  1. waduh, kok gak ada komentar ya.. :D aku yang pertama dong.. :D

    ReplyDelete
  2. ini maaf lho master, kalo saya casino gak mau... gak jelas uangnya dari mana, panaaassss...

    ReplyDelete
  3. @Mr_Ilham
    Aku gak cari uang dari situs itu mas, tapi situs itu yang masang linknya ditempat saya.. Ya saya dibayar dengan uang Yang jelas dong.. :D

    ReplyDelete
  4. Salam Kenal

    Nie kayanya satu grup dengan 3c.com dan 3g nih yah :)
    sesama orang cianjur harus saling membantu :)

    thanks
    http://heldi.net

    ReplyDelete
  5. @heldi
    Ya,, sama-sama orang cianjur harus saling membantu ... Betul itu Salam kenal kang.

    ReplyDelete
  6. Apa lagi ini? Kelihatannya membingungkan juga?

    ReplyDelete
  7. exelinca
    Orang Keren aja Bilang Bingung Apalagi Aku.. :D hehe

    ReplyDelete
  8. wkwkwkw.. seep.. :)

    Oh iya sudah saya jawab pertanyaan Anda ttg BV :D

    BV membayar setelah 30 hari job kita di approved. Atau kadang terlambat hingga 7 - 10 hari. Sabar aja.. insya allah dibayar kok

    ReplyDelete
  9. saya salut dengan blog ini, selain displaynya bagus, nampaknya pemilimnya juga masih muda banget


    Salam kenal
    http://mybestphones.blogspot.com

    ReplyDelete
  10. Terimakasih Mbak,, Kiranya sudi mampir di blog sederhana ini,, Saya senang bisa kenal dengan anda.

    ReplyDelete
  11. salam kenal;...n saya sudah baca gimana bikin tab view di blog ini n udah jadi siih..namun yang mengherankan saya kok scrool atau apalah itu namanya yang sebelah kanan itu bisa-bisanya ndak ada???? boleh donk solusinya ....trimakasih

    ReplyDelete
  12. terimakasih infonya, btw coba dulu ya

    ReplyDelete

Silahkan tuliskan komentar anda dibawah ini dengan baik & benar, harap tidak melakukan spam karena pasti akan langsung kami hapus, opini, saran dan kritik kami persilahkan.