menu accordion top banget

Minggu, 02 September 2012 | komentar (1)

Hallo shobat blogger,untuk pertemuan kali ini kumpulan tutorial modifikasi blog kembali akan berbagi tutorial blog , kita akan membahas tentang menu accordion top bangetdan semoga artikel ini bermanfaat buat sobat yang mampir di blog ini, jika berkenan setelah membaca artikel ini sobat bisa meluangkan untuk meninggalkan jejak pada kotak komentar dan Insya Alloh saya akan berkunjung balik ke blog/web sobat sebagai tanda terima kasih saya atas kunjungannya
Di awal pertemuan kali ini kumpulan tutorial modifikasi blog akan sedikit membahas tentang cara membuat menu accordion top banget singkat kata jika sobat ingin melihat langsung cara kerjanya klik blog demonya disini
Jika sobat berkeinginan ingin mencoba seperti demo yang sobat sudah lihat berikut caranya :
  1. Login ke blogger 
  2. setelah masuk ke dasboard pilih Edit Html (jangan lupa untuk download lengkap dulu template saat melakukan pengeitan HTML untuk menjaga kemungkinan salah dalam pemasangan script.
  3. dengan bantuan Ctrl+fF cari kode  ]]></b:skin> lalu letakkan kode css di bawah ini tepat di atas kode  ]]></b:skin> berikut kode nya

  4.  .accordian {
         width: 400px;
         margin: 50px auto;
     }

     .accordian li {
         list-style-type: none;
         padding: 0 5px;
     }

     .dimension {
         height: auto;
     }
         
     .even, .odd {
         font-weight: bold;
         height: 27px;
         padding-top: 3px;
         padding-left: 10px;
     }
         
     .even {
         border: 1px solid #d8d8d8;
         background-color: #ececec;
     }
         
     .odd {
         border: 1px solid black;
         background: #333;
         color: white;
     }
  5. Lalu cari kode </body>letak kan kode jquery berikut tepat di atas kode </body>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script type="text/javascript" src="http://mahfidzmayanto.googlecode.com/files/jMenu.js"></script>
  7. Lalu Save template
  8. untuk pemanggilan kode HTML nya gunakan kode berikut
<div class="accordian">
    <ul>
        <li>Judul Menu 1</li>
        <li>Isi tampilan judul menu 1</li>
        <li>Judul menu 2</li>
        <li>isi tampilan Judul menu 2</li>
        <li>Judul menu 3</li>
        <li>isi tampilan judulmenu 3</li>
    </ul>
</div>

Oke selamat mencoba Kawan semoga berhasil

Semoga semua tutorial tentang menu accordion top banget di atas bermanfaat buat sobat semua Wassalam
Share this article :

+ komentar + 1 komentar

2 September 2012 pukul 07.45

Di coba aahh

Posting Komentar

 
Copyright © 2012. kumpulan tutorial modifikasi blog - All Rights Resdrved
Template Created by Creating Website
Proudly powered by Blogger