'SELAMAT DATANG' di blog ianhacks. Semoga apa yang saya berikan bisa membuat sobat semua lebih maju dan lebih kreatif dalam segala hal..
  • Web
  • ianhacks
  • Cara Membuat Menu Accordion Dengan CSS



    Sebelumnya sobat mungkin ada yang bertanya-tanya Menu Accordion itu seperti apa sih?? 


    Ok Menu Accordion yang bisa disebut juga tab view, tapi tampilannya tidak seperti pada artikel INI yang horisontal tp yang saya share sekarang adalah yang tampilannya vertikal. 

    Cara Membuat Menu Accordion Dengan CSS 


    1. Login blog
    2. Rancangan -> Edit Html (centang "expand widget template")
    3. Cari kode ]]></b:skin>
    4. Lalu taruh kode dibawah ini diatas kode ]]></b:skin>
     
    #acc{background:#ffffff;font:13px trebuchet ms; line-height:1.2em;padding:10px;margin:0;} #acc h3{background:-moz-linear-gradient(top,#ccc,#999);padding:5px 10px;margin:0;color:#222; text-shadow:0px 1px 1px #fff; border-bottom:2px solid #444;} #acc h3 a{color:#555} #acc h3 a:hover{color: red} #acc .post{background:#fff;color:#000;padding:10px;margin:10px 0px;display:none; border-bottom:2px solid #222;} #acc :target h3 + .post {display:block;height:150px;overflow:auto;} #acc :target h3 a{color:#aa5500}

    5. Simpan
    6. Lalu buka Rancangan -> tata letak -> add gadget (HTML/JavaScript)
    7. Masukkan kode dibawah ini

    <div id="acc"> <div id="isi1">

    <h3><a href="#isi1"> Judul 1</a></h3> <div class="post"> Masukkan item sobat disini,bisa berupa teks atau widget </div> </div>

    <div id="isi2"> <h3><a href="#isi2">Judul 2</a></h3> <div class="post"> Masukkan item anda disini,bisa berupa teks atau widget </div> </div>

    <div id="isi3"> <h3><a href="#isi3">Judul 3</a></h3> <div class="post"> Masukkan item anda disini,bisa berupa teks atau widget </div> </div> </div>

    8. Simpan dan lihat hasilnya

    NB : tulisan yang berwarna merah ganti dengan judul tab view sobat
    tulisan yang berwarna biru ganti dengan isi tab view sobat

    Good LUCK ^_^






     
    x_3bfae512

    Share this:

    2 comments :

     
    Copyright © Sharing Ilmu Pengetahuan | Ianhacks. Designed by OddThemes & Best Wordpress Themes 2018