Home » » Cara Membuat Menu Tab View

Cara Membuat Menu Tab View

Menu tab view sudah banyak digunakan pada blog. Tab view ini sangat berguna, terutama dalam hal menghemat tempat. Karena, pada widget tab view, 1 kotak bisa terdiri dari beberapa tab.
Mungkin kamu telah banyak membaca postingan trik blogger seperti ini, tapi tidak ada salahnya kita bersama-sama mereview kembali.
Trik ini saya dapatkan setelah beberapa kali mencoba memasang tab view dari beberapa blog narasumber namun ngga kelar-kelar (maklum otak lagi bebal) Kemudian olah sana dan sini, alhamdulillah akhirnya tab view telah rampung dan di pasang di Blog yang tidak seberapa ini.


Beginilah cara untuk membuat menu tab view tersebut

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode]]></b:skin> atau kedalam tag CSS.


div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView 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 #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* 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: 3px 5px;
}
4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll.
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum 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>

6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :


<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<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">
tabview_initialize('TabView');
</script>


<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://www.oktri.co.cc/2010/02/cara-membuat-menu-tab-view.html" target="_blank" title="Tabview Widget">Widget by Oktri Darmadi</a></div>

Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.




Artikel Terkait:

24 komentar:

  1. wahhh disini sumber ilmu ternyata, beruntung saya bisa ketemu dengan blog ini. mengesankan.
    boleh saya ambil kan ilmu anda??? hahaha.
    terima kasih untuk info nya.

    BalasHapus
  2. TERIMA KASIH UNTUK KOMENTARNYA TEMAN,,,
    SELAMAT BEKUNJUNG

    BalasHapus
  3. slam knal'
    gmn donk buat menu di header???

    BalasHapus
  4. bang oktri saya mau nanya coz aq pemula negh,,
    cara ganti warna postingan dan judul postingan seperti punya bang oktri yang warna hijau ini bagus,,,
    gini saya warnya putih aja kan bosan bang
    kasi tau caranya donk bang???

    BalasHapus
  5. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  6. @riski terima kasih tlh berkomnt ,coba km kunjungi ni.http://trik-tips-ngeblog.blogspot.com/2009/03/cara-membuat-menu.html

    @kadek terima kasih telah berkomntar juga,wah terima kasih atas pujiannya ,,
    cara ganti warna posting bs qt edit pada edit html bang,n bs juga dignti dgn gambar tinggal abng cari az script html yg akan diedit..

    BalasHapus
  7. nah itu dah saya tau edit html tapi kode yg mana harus saya edit saya kan masih awam bang sama dunia blog,,
    satu lagi koq tab view yang saya buat gak seperti punya bang oktri malah kelihatan standar banget,,
    gmna caranya biar tab 1 itu judulnya recent posting tab 2 rencent pos dan tab 3 isi blog,,
    kyak punya bang oktri itu,,,
    mohon bantuannya
    tolong kunjungi blog saya di
    pariwisatadanteknologi.blogspot.com

    BalasHapus
  8. Bro Kenapa Cotohnya kok g mirip ma pembuatanx atow jadinya?
    kalo yang mirip ma contohnya itu gimna yaw?

    BalasHapus
  9. @kadek iya thu emg dah editan tp scritnya sama az kok tinggal kreasi km az...

    @bayu mf sebelumnya karena contohnya tidak sama dengan script aslinya,
    iya thu screenshotnya dah editan,
    klo emg pngn gt tinggal edit kode sebelum oke ]]>

    BalasHapus
  10. Mantap,,,bos,,,lanjutkan

    BalasHapus
  11. keren...keren..keren coba ahh,

    BalasHapus
  12. thanks infonya sob..

    tapi aku mao tanya itukan tab view nya ada satu..

    gimana kalo setiap kategori posting memakai tab view semua,

    maksudna gini.. biar blog terlihat hemat tempat..

    nah HTML/Javascript untuk tab view di buat dua..ato tiga sampai empat..jadi semuanya pake tab view..

    aku bingung gimana caranya..habis setelah aku coba2 hanya satu yang memakai rollnya..

    maksud kau paai semua biar blog kelihatan rapi...

    nie bingung disini...

    http://misteridesign.blogspot.com/

    thanks untuk info sebelumnya..


    salam kenal...

    ThanksMisteri ^_^

    BalasHapus
  13. Kayak apa nampilkan posting nya?

    BalasHapus
  14. tabnya di ganti gambar bisa gak ya mas??

    BalasHapus
  15. mantap.. Hai, Apa Ada Gunungg Terbang??????????

    BalasHapus
  16. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  17. kalau menambah scrollbar di dalam menu tab view gimana ?

    BalasHapus
  18. ThnkZ gan ,,[ WWW.Deevro.Co.Cc ]
    Visitback please ,,

    BalasHapus
  19. text yang berkedip2 nya mana?

    BalasHapus
  20. Blog yg empat loe adalah BLOG PALING NORAK SEDUNIA

    BalasHapus
  21. wah keren nih blognya mas... mantap... :D

    BalasHapus
  22. link ke blog saya yaa
    thanks infonya

    BalasHapus
  23. nice info gan..ane comot ya ..thanks

    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