Blog sedang dalam perbaikan mohon maaf jika banyak kesalahan ------> Pemesanan Hubungi langsung Owner Kami
Demo image Demo image Demo image Demo image Demo image Demo image Demo image Demo image Demo image Demo image Demo image Demo image

Cara Membuat Tab Drop Down pada Blog

  • 22 April 2012
  • Armila ( Dins Photography )
  • Label:

  • Sebenernya tips ini masih sekedar coba-coba, tapi gpp..mudah-mudahan bisa bermanfaat buat kalian semua, he.

    Klo kalian liat gambar disamping, mungkin maksudnya dah tau y.. yaitu kita buat yang namanya membuat "Tab View Dengan Dropdown" artinya jika kita pilih salah satu menu, maka akan muncul turunannya. klo diliat dari gambar di samping, tab menu utamanya adalah "DAERAH" tapi klo kita pilih menu daerah tersebut maka akan muncul turunannya seperti "JABODETABEK" " BANDUNG" dll..


    Fungsi klo kita memakai trik ini yaitu biar lebih simple dan informasi yg kita kasih biar bisa dikelompokkan. kebayang kan klo di tab menu sy tampilin semua kota berjejer ke samping, kan g lucu..iya g..makanya sy pake trik dropdown ini..

    pasti pengen kan pake trik ini juga, oke deh..gini tok cara buatnya :

    1. Log in di blogger lalu masuk "Layout"---->"Edit HTML" lalu jangan lupa centang kotak "Expands Template Widgets" dan klo bisa back up dulu templatenya biar g terjadi sesuatu yang ngga diinginkan..

    2. Cari kode ini ]]></b:skin> lalu setelah itu simpan kode di bawah ini tepat diatas kode tadi :


    /* Dropdown Menus Trik Yuwie */
    #page-bar li {
    float: left;
    margin: 0px;
    padding: 0px;
    }

    #page-bar li li {
    float: left;
    margin: 0px;
    padding: 0px;
    width: 122px;
    text-transform:none;
    }

    #page-bar li li a, #page-bar li li a:link, #page-bar li li a:visited {
    background: #2B2B2B;
    width: 122px;
    float: none;
    margin: 0px;
    padding: 5px 10px 5px 18px;
    border-top: 1px solid #C0C0C0;
    }

    #page-bar li li a:hover, #page-bar li li a:active {
    background: #666666;
    padding: 5px 10px 5px 18px;
    }

    #page-bar li ul {
    position: absolute;
    width: 10em;
    left: -999em;
    }

    #page-bar li:hover ul {
    left: auto;
    display: block;
    }

    #page-bar li:hover ul, #page-bar li.sfhover ul {
    left: auto;
    }

    3. Cari kode tab menu yang ada di blog kamu, Misal sy ambil untuk contoh yang gambar di atas :

    <ul class='left clearfloat' id='page-bar'>
    <li><a href='http://lowongankerjaku88.blogspot.com'>Daerah</a></li>
    </ul>

    kode diatas adalah "Menu Utamanya"..

    4. Nah, untuk membuat turunannya, yang harus kamu lakukan terlebih dahulu adalah menyiapkan link turunannya dengan menggunakan class='cat-item' contoh :

    <li class='cat-item'><a href='http://lowongankerjaku88.blogspot.com/search/label/Jabodetabek'>Jabodetabek</a></li>

    "Klo kamu pengen turunannya lebih dari satu maka kamu siapkan semua link turunannya, mau satu atau lebih dari satu atau berapa pun..pokonya terserah kamu..yang penting siapin dulu aja link turunannya"

    5. Klo semua link turunannya sudah siap, maka langkah selanjutnya yaitu kamu tinggal menggabungkan "Menu Utama" dengan " Link Turunannya", caranya :

    <li><a href='http://lowongankerjaku88.blogspot.com'>Daerah</a>
    <ul class='children'>
    <li class='cat-item'><a href='http://lowongankerjaku88.blogspot.com/search/label/Jabodetabek'>Jabodetabek</a></li>
    </ul></li>

    Klo link turunannya lebih dari satu, maka tinggal tambahkan aja menjadi :

    <li><a href='http://lowongankerjaku88.blogspot.com'>Daerah</a>
    <ul class='children'>
    <li class='cat-item'><a href='http://lowongankerjaku88.blogspot.com/search/label/Jabodetabek'>Jabodetabek</a></li>
    <li class='cat-item'><a href='alamat link'>Tambahan Turunan</a></li>
    </ul></li>

    Keterangan :

    - Warna hitam adalah kode dari "Menu Utamanya"
    - Warna merah adalah untuk membuat menu menjadi dropdown
    - Warna Biru adalah kode dari "Link Turunannya"
    - Warna Merah tua adalah kode tambahan jika kamu ingin memasukkan turunan lebih dari satu
    - Khusus Warna Orange klo kamu perhatikan itu letaknya hanya dipindahkan saja, liat di "Menu Utama" lalu menjadi disimpan di bagian akhir.

    Bingung y kebanyakan warna..he3.

    6. "Udah deh" tinggal di "SIMPAN TEMPLATE"

    coba liat hasilnya, udah ada belum turunannya..he3..

    0 komentar:

    Posting Komentar

    Tolong bagi para sahabat harap baca dulu sebelum berkomentar :

    Blog ini tidak menggunakan verifikasi apapun, silahkan tinggalkan komentar yang sopan, tidak menjadi spamer.

    - jangan sertakan link pada komentar
    - jika ada link yang rusak / broken link di blog ini tolong beritahu saya pada komentar
    - jika artikel blog ini bermanfaat silahkan menyebarluaskan-nya dengan tekan button share
    ( google+ , facebook, digg, twitter dll ) salam hangat...
    Owner dsp : [Didin Supriatna (urang sunda+jawa)]

    Copyright (c) 2010 dins photography. Created by dsp