> > Cara membuat menu Accordion sederhana

Cara membuat menu Accordion sederhana

Unknown

: 23.09 2 comments



S
ebenarnya menu Accordion yang akan full blog design buat ini adalah bentuk Accordion yang sangat sederhana yang bisa sobat kembangkan lagi ,mungkin sudah banyak yang tahu atau bahkan mempraktekan menu Accordion ini dengan tampilan yang labih keren lagi ,jadi sengaja untuk tutorial kali ini kang mahfid akan membuat secara sederhana untuk melihat DEMO nya silahkan klik disini . nah untuk Cara membuat menu Accordion sederhana ikuti tutorialnya sampai selesai :
  1. Login ke blogger
  2. setelah masuk ke dasboard Pilih EDIT HTML (jangan lupa download lengkap dulu template untuk menjaga kemungkinan salah dalam penempatan script
  3. Cari kode <head>lalu Letakkan kode Jquery di bawah ini tepat di bawah kode <head> berikut kode nya :
    4. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  4. selanjutnya masukkan kode CSS dibawah ini tepat di atas kode ]]></:skin> berikut kodenya
    5. #accordion {     list-style: none;     padding: 0 0 0 0;     width: 170px; } #accordion li{     display: block;     background:brown         ;color:#fff;     font-weight: bold;     margin: 1px;     cursor: pointer;     padding: 10px 5 5 7px;     list-style: circle;     -moz-border-radius: 10px;     -webkit-border-radius: 10px;     border-radius: 0px; } #accordion ul {     list-style: none;     padding: 0 0 0 0;     display: none; } #accordion ul li{     font-weight: normal;     cursor: auto;     background-color: tranparent;     padding: 0 0 0 7px; } #accordion a {     text-decoration: none; } #accordion a:hover {     text-decoration: underline; }
  5. selanjutnya Taruh kode di bawah ini tepat di bawah kode </body> berikut kodenya :
    6. <script>$("#accordion > li > div").click(function(){       if(false == $(this).next().is(':visible')) {         $('#accordion ul').slideUp(300);     }     $(this).next().slideToggle(300); });   $('#accordion ul:eq(5)').show();</script>
  6. Lalu Save Template
Untuk pemasangan kode HTML nya masukkan kode di bawah ini kedalam Html Java script,caranya masih di dasboard lalu pilih Tambah gadget lalu pilih HTML Java script  berikut kode nya :

<ul id="accordion">
    <li><div>Sports</div>
        <ul>
            <li><a href="#">Golf</a></li>
            <li><a href="#">Cricket</a></li>
            <li><a href="#">Football</a></li>
        </ul>
    </li>
    <li><div>Technology</div>
        <ul>
            <li><a href="#">iPhone</a></li>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Twitter</a></li>
        </ul>
    </li>
    <li><div>Latest</div>
        <ul>
            <li><a href="#">Obama</a></li>
            <li><a href="#">Iran Election</a></li>
            <li><a href="#">Health Care</a></li>
        </ul>
    </li>
    <li><div>template</div>
        <ul>
            <li><a href="#">2 kolom</a></li>
            <li><a href="#">Minima</a></li>
            <li><a href="#">Magazine</a></li>
        </ul>
    </li>
</ul>
Semoga sobat bisa bereksperiment dan mengembangkan bentuk Accordion ini menjadi lebih keren Jika ada keluhan dan tidak berfungsinya tutorial ini silahkan kasi komentar di Forum Komentar

Jika Artikel ini bermanfaat buat sobat semua tolong bantuannya untuk mengklik ping fast my blog, website, or RSS feed for Free Terima kasih
Judul Artikel :Cara membuat menu Accordion sederhana
photo-avatar
Terima Kasih Sobat sudah membaca Artikel saya Tentang Cara membuat menu Accordion sederhana Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih
Label:

2 komentar

avatar
Balas
Unknown delete 10 Maret 2013 pukul 07.09

Thanks mas... sya lagi belajar ...

avatar
Balas
Unknown delete 10 Maret 2013 pukul 13.35

Silahkan... :-bd

Posting Komentar


Terima Kasih Sobat Sudah:
1. Berkomentar Dengan Sopan
2. Tidak Memasukkan Link Aktif Dalam Form Komentar
3. Berkomentar Sesuai Artikel/Postingan
4. Berilah Informasi Kepada Admin Jika ada script yang Sudah tidak berfungsi
5. komentar Jorok/kasar /berbau Sara/Porno /saya anggap sebagai SPAM
6.untuk memasukkan gambar gunakan <i rel="image">URL Gambar</i>

Konversi