Sabtu, 10 Desember 2011

cara buat menu multi colum

postingan saya kali ini adalah cara membuat menu multi colum seperti di blog saya ini,oke langsung aja ke tkp
copy paste aja kode di bawah ini di gadget pilihan javascrip/html dan bisa anda tempatkan dimana saja!




    <style type="text/css">
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 97px; /* Lebar Kotak Tab */
    height: 22px; /* Tinggi Menu Utama Atas */
    text-align: center; /* Posisi Teks Menu Tab */
    font-size:13px; */
    margin: 5px 0px 0px 2px; /* Posisi Kotak Tab */
    background-color: #04B404; /* Warna background Kotak Tab */
    padding-top: 2px; /* Spasi Atas */
    border: 1px solid #ffffff; /* Warna border kotak Tab */
    border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
    font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
    font-weight: bold; /* Ketebalan Teks kotak tab */
    }
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #FF0000; /* Warna background utama kotak tab */
    }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #cccccc; /* Warna border Kotak Konten */
    overflow: hidden;
    background-color: #FFFF00"; /* Warna background Kotak konten */
    }
    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 1px; /* Jarak teks dalam kotak content */
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }
    </style>
    <form action="tabview.html" method="get">
    <div id="TabView" class="TabView">
    <div style="width: 100%;" class="Tabs">


    <a><span >CATEGORY1</span></a>

    <a><span >CATEGORY2</span></a>

    <a><span >CATEGORY3</span></a>
    </div>


    <div style="width: 100%; height: 150px;" class="Pages">

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

isi link/daftar isi blog anda (CATEGORY1)

    </div>
    </div>

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

isi link/daftar isi blog anda (CATEGORY2)

    </div>
    </div>

    <div class="Page">
    <div class="Pad">
isi link/daftar isi blog anda (CATEGORY3)

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

    <script style="text/javascript"

src="https://sites.google.com/site/kodeblogger/javascript/tab_view.js"></script>
    <script type="text/javascript">tabview_initialize('TabView');
    </script>

lalu simpan dan liat hasilnya,semoga bermanfa'at.

0 komentar:

Posting Komentar