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 :
- Login ke blogger
- 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.
- dengan bantuan Ctrl+fF cari kode ]]></b:skin> lalu letakkan kode css di bawah ini tepat di atas kode ]]></b:skin> berikut kode nya
- Lalu cari kode </body>letak kan kode jquery berikut tepat di atas kode </body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
- Lalu Save template
- untuk pemanggilan kode HTML nya gunakan kode berikut
.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;
}
<script type="text/javascript" src="http://mahfidzmayanto.googlecode.com/files/jMenu.js"></script>
<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
+ komentar + 1 komentar
Di coba aahh
Posting Komentar