Membuat Menu Accordion Dengan JQuery. pada postingan yang lalu HAPIA Mesir pernah menulis postingan tentang Membuat Simple Accordions yang hanya mengkolaborasikan antara script accordion dan HTML saja. dan pada tutorial saat ini, HAPIA Mesir ingin berbagi tentang cara membuat menu accordion dengan menggunakan JQuery.
Menu ini tidak terlalu memberatkan loading blog tanpa mengurangi tampilan menu yang colorful. untuk demonya silahkan dilihat pada link berikut :
Cara Membuat Menu Accordion Dengan JQuery adalah sebagai berikut :
- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Sebelumnya pastikan blog anda telah tertanam didalamnya JQuery versi 1.3.2, jika belum silahkan copy JQuery versi 1.3.2 dibawah ini dan letakkan dibawah <head> :
- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Sebelumnya pastikan blog anda telah tertanam didalamnya JQuery versi 1.3.2, jika belum silahkan copy JQuery versi 1.3.2 dibawah ini dan letakkan dibawah <head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
- Kemudian copy paste script berikut dibawah script diatas :
<script src='http://hapiajavascript.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://hapiajavascript.googlecode.com/files/script.js' type='text/javascript'/>
<script src='http://hapiajavascript.googlecode.com/files/script.js' type='text/javascript'/>
- Selanjutnya untuk bagian CSS, silahkan cari code ]]></b:skin> dan letakkan code CSS berikut diatasnya :
ul{
margin:0;
padding:0;
}
ul.accordion{
/* The topmost UL */
width:240px;
margin:0;
padding:10px;
}
li{
list-style:none;
text-align:left;
}
li.menu{
/* The main list elements */
padding:5px 0;
width:100%;
}
li.button a{
/* The section titles */
display:block;
font-family:BPreplay,Arial,Helvetica,sans-serif;
font-size:21px;
height:34px;
overflow:hidden;
padding:10px 20px 0;
position:relative;
width:200px;
}
li.button a:hover{
/* Removing the inherited underline from the titles */
text-decoration:none;
}
li.button a span{
/* This span acts as the right part of the section's background */
height:44px;
position:absolute;
right:0;
top:0;
width:4px;
display:block;
}
/* Setting up different styles for each section color */
li.button a.blue{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTa2gOEJYblVecKLdZK-f8tIQ8oyPvoPl9yBYibWu7ok7ZG6knW8R4zd7TtDPR7Jy_to3S5f48qpqSapAU8U8rXXylFLHCIIOvs4qerc3FIsMvON123t0jOd7ZCWHA4ZE2rhhFjBNmGXg/s320/blue.png) repeat-x top left; color:#074384;}
li.button a.blue span{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTa2gOEJYblVecKLdZK-f8tIQ8oyPvoPl9yBYibWu7ok7ZG6knW8R4zd7TtDPR7Jy_to3S5f48qpqSapAU8U8rXXylFLHCIIOvs4qerc3FIsMvON123t0jOd7ZCWHA4ZE2rhhFjBNmGXg/s320/blue.png) repeat-x top right;}
li.button a.green{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjExq4daAYQPU13A2TyLVFZGFgv2v0JktU82PTB_umUPd23mdNUqn10SENYKWLDh0jRuVjKaOXqUU6TvSd4MLZ5wHJO5AaRs5zsx7w_yKm991qBFqYwIyAs77IxmC13hGKiA88l8yFUndQ/s320/green.png) repeat-x top left; color:#436800;}
li.button a.green span{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjExq4daAYQPU13A2TyLVFZGFgv2v0JktU82PTB_umUPd23mdNUqn10SENYKWLDh0jRuVjKaOXqUU6TvSd4MLZ5wHJO5AaRs5zsx7w_yKm991qBFqYwIyAs77IxmC13hGKiA88l8yFUndQ/s320/green.png) repeat-x top right;}
li.button a.orange{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWDrlqt1RAKNInCz1tVnlik6IS6ToCvBv6-Ct151pueFH8DzZrh5QBr6vjSsg8iqOOZJKMWa6w1A3C40vaOm5tKUkBmr0Dz7WuFQ5S53SBVzB4VKLdcH3II6oZFE1xVT9PbRmleIaiJRQ/s320/orange.png) repeat-x top left; color:#882e02;}
li.button a.orange span{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWDrlqt1RAKNInCz1tVnlik6IS6ToCvBv6-Ct151pueFH8DzZrh5QBr6vjSsg8iqOOZJKMWa6w1A3C40vaOm5tKUkBmr0Dz7WuFQ5S53SBVzB4VKLdcH3II6oZFE1xVT9PbRmleIaiJRQ/s320/orange.png) repeat-x top right;}
li.button a.red{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixqrnO1rrPYr0osd6qnrCcga0w86nsLyh-qfHFNNtGodoNt39Jn57ckMnr5WGxArSZBy7VeSk213rLdwKnlqGrYqlzwSOuk7s3uAVMb9VW7ORYF2wozjiAL15ToP_4RWhOld7Mz5IOgmc/s320/red.png) repeat-x top left; color:#641603;}
li.button a.red span{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixqrnO1rrPYr0osd6qnrCcga0w86nsLyh-qfHFNNtGodoNt39Jn57ckMnr5WGxArSZBy7VeSk213rLdwKnlqGrYqlzwSOuk7s3uAVMb9VW7ORYF2wozjiAL15ToP_4RWhOld7Mz5IOgmc/s320/red.png) repeat-x top right;}
/* The hover effects */
li.button a:hover{ background-position:bottom left;}
li.button a:hover span{ background-position:bottom right;}
.dropdown{
/* The expandable lists */
display:none;
padding-top:5px;
width:100%;
}
.dropdown li{
/* Each element in the expandable list */
background-color:#373128;
border:1px solid #40392C;
color:#CCCCCC;
margin:5px 0;
padding:4px 18px;
}
margin:0;
padding:0;
}
ul.accordion{
/* The topmost UL */
width:240px;
margin:0;
padding:10px;
}
li{
list-style:none;
text-align:left;
}
li.menu{
/* The main list elements */
padding:5px 0;
width:100%;
}
li.button a{
/* The section titles */
display:block;
font-family:BPreplay,Arial,Helvetica,sans-serif;
font-size:21px;
height:34px;
overflow:hidden;
padding:10px 20px 0;
position:relative;
width:200px;
}
li.button a:hover{
/* Removing the inherited underline from the titles */
text-decoration:none;
}
li.button a span{
/* This span acts as the right part of the section's background */
height:44px;
position:absolute;
right:0;
top:0;
width:4px;
display:block;
}
/* Setting up different styles for each section color */
li.button a.blue{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTa2gOEJYblVecKLdZK-f8tIQ8oyPvoPl9yBYibWu7ok7ZG6knW8R4zd7TtDPR7Jy_to3S5f48qpqSapAU8U8rXXylFLHCIIOvs4qerc3FIsMvON123t0jOd7ZCWHA4ZE2rhhFjBNmGXg/s320/blue.png) repeat-x top left; color:#074384;}
li.button a.blue span{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTa2gOEJYblVecKLdZK-f8tIQ8oyPvoPl9yBYibWu7ok7ZG6knW8R4zd7TtDPR7Jy_to3S5f48qpqSapAU8U8rXXylFLHCIIOvs4qerc3FIsMvON123t0jOd7ZCWHA4ZE2rhhFjBNmGXg/s320/blue.png) repeat-x top right;}
li.button a.green{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjExq4daAYQPU13A2TyLVFZGFgv2v0JktU82PTB_umUPd23mdNUqn10SENYKWLDh0jRuVjKaOXqUU6TvSd4MLZ5wHJO5AaRs5zsx7w_yKm991qBFqYwIyAs77IxmC13hGKiA88l8yFUndQ/s320/green.png) repeat-x top left; color:#436800;}
li.button a.green span{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjExq4daAYQPU13A2TyLVFZGFgv2v0JktU82PTB_umUPd23mdNUqn10SENYKWLDh0jRuVjKaOXqUU6TvSd4MLZ5wHJO5AaRs5zsx7w_yKm991qBFqYwIyAs77IxmC13hGKiA88l8yFUndQ/s320/green.png) repeat-x top right;}
li.button a.orange{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWDrlqt1RAKNInCz1tVnlik6IS6ToCvBv6-Ct151pueFH8DzZrh5QBr6vjSsg8iqOOZJKMWa6w1A3C40vaOm5tKUkBmr0Dz7WuFQ5S53SBVzB4VKLdcH3II6oZFE1xVT9PbRmleIaiJRQ/s320/orange.png) repeat-x top left; color:#882e02;}
li.button a.orange span{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWDrlqt1RAKNInCz1tVnlik6IS6ToCvBv6-Ct151pueFH8DzZrh5QBr6vjSsg8iqOOZJKMWa6w1A3C40vaOm5tKUkBmr0Dz7WuFQ5S53SBVzB4VKLdcH3II6oZFE1xVT9PbRmleIaiJRQ/s320/orange.png) repeat-x top right;}
li.button a.red{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixqrnO1rrPYr0osd6qnrCcga0w86nsLyh-qfHFNNtGodoNt39Jn57ckMnr5WGxArSZBy7VeSk213rLdwKnlqGrYqlzwSOuk7s3uAVMb9VW7ORYF2wozjiAL15ToP_4RWhOld7Mz5IOgmc/s320/red.png) repeat-x top left; color:#641603;}
li.button a.red span{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixqrnO1rrPYr0osd6qnrCcga0w86nsLyh-qfHFNNtGodoNt39Jn57ckMnr5WGxArSZBy7VeSk213rLdwKnlqGrYqlzwSOuk7s3uAVMb9VW7ORYF2wozjiAL15ToP_4RWhOld7Mz5IOgmc/s320/red.png) repeat-x top right;}
/* The hover effects */
li.button a:hover{ background-position:bottom left;}
li.button a:hover span{ background-position:bottom right;}
.dropdown{
/* The expandable lists */
display:none;
padding-top:5px;
width:100%;
}
.dropdown li{
/* Each element in the expandable list */
background-color:#373128;
border:1px solid #40392C;
color:#CCCCCC;
margin:5px 0;
padding:4px 18px;
}
- Simpan Template.
- Pergi ke "Elemen Laman" tambah gadget pada sidebar.
- Pilih "HTML/JavaScript" kemudian copy paste code berikut kedalamnya :
- Pergi ke "Elemen Laman" tambah gadget pada sidebar.
- Pilih "HTML/JavaScript" kemudian copy paste code berikut kedalamnya :
<ul class="accordion">
<li class="menu">
<ul>
<li class="button"><a class="green" href="#">Judul 1 <span></span></a></li>
<li class="dropdown" style="display: none;">
<ul>
<li><a href="#">Nama Content 1.1</a></li>
<li><a href="#">Nama Content 1.2</a></li>
<li><a href="#">Nama Content 1.3</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a class="orange" href="#">Judul 2 <span></span></a></li>
<li class="dropdown" style="display: none;">
<ul>
<li><a href="#">Nama Content 2.1</a></li>
<li><a href="#">Nama Content 2.2</a></li>
<li><a href="#">Nama Content 2.3</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a class="blue" href="#">Judul 3 <span></span></a></li>
<li class="dropdown" style="display: none;">
<ul>
<li><a href="#">Nama Content 3.1</a></li>
<li><a href="#">Nama Content 3.2</a></li>
<li><a href="#">Nama Content 3.3</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a class="red" href="#">Judul 4<span></span></a></li>
<li class="dropdown" style="display: none;">
<ul>
<li><a href="#">Nama Content 4.1</a></li>
<li><a href="#">Nama Content 4.2</a></li>
<li><a href="#">Nama Content 4.3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<li class="menu">
<ul>
<li class="button"><a class="green" href="#">Judul 1 <span></span></a></li>
<li class="dropdown" style="display: none;">
<ul>
<li><a href="#">Nama Content 1.1</a></li>
<li><a href="#">Nama Content 1.2</a></li>
<li><a href="#">Nama Content 1.3</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a class="orange" href="#">Judul 2 <span></span></a></li>
<li class="dropdown" style="display: none;">
<ul>
<li><a href="#">Nama Content 2.1</a></li>
<li><a href="#">Nama Content 2.2</a></li>
<li><a href="#">Nama Content 2.3</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a class="blue" href="#">Judul 3 <span></span></a></li>
<li class="dropdown" style="display: none;">
<ul>
<li><a href="#">Nama Content 3.1</a></li>
<li><a href="#">Nama Content 3.2</a></li>
<li><a href="#">Nama Content 3.3</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a class="red" href="#">Judul 4<span></span></a></li>
<li class="dropdown" style="display: none;">
<ul>
<li><a href="#">Nama Content 4.1</a></li>
<li><a href="#">Nama Content 4.2</a></li>
<li><a href="#">Nama Content 4.3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
# Untuk tutorial aslinya silahkan cek judul Making a Fresh Content Accordion.
Selamat mencoba dan happy blogging.
Selamat mencoba dan happy blogging.
salam teman, mengawali dengan senang, saya coba aplikasikan nanti.
Aku simpan dulu sob...
Makasih untuk tutorialnya ya...
keren master, tp blog q dah kelewat berat u/ mencoba
keren bro. suatu waktu akan saya coba
hebat mas, selalu ada yang baru saat saya berkunjung kesini, trimakasih mas, tips2 nya bagus bangat..
Mampir lagi utk cari ilmu baru....
Ikutan baca info yang bermanfaat.. ^_^
selalu ada sesuatu yang dapat dipelajari disini, terima-kasih sahabat sudah berbagi.
wah punyaku semakin tak pangkas widget widgetnya hehehe
Bagus dan tidak memberatkan blog: perpaduan 2 kelebihan. Bermanfaat untuk memperindah blog dan membuat mudah pengunjung.
Salam ukhuwah
Wah ada yang asik nih disini ya? kalau di praktekin di WP kira-kira cocok ngga ya Gan..?
mas minta di bantu untuk menampilkan adsense:
Adsense saya maksunya mau di tampilkan di sidebar, kalau anda bersenang hati mampir di blogku di sini kalau saya masuk ke account GA saya, disana saya mendapati iklan penelusuran dan iklan feed, iklan kontennya gak ada ? bagaimana cara mensettingnya ya... atas perhatiannya terima kasih
patut di coba nih..mudah mudahan berhasil....
oke juga tipsnya, tapi aku save dulu yah,,,,
makasih infonya!
Wah, makasih ya tutorialnya. lagi gemar bermain dengan jquery ya?? moga sukses
Waah bagus deh kalau tidak memberatkan blog. Terima kasih infonya :)
waduh ebat nih, ngebahas jQuery terus...hauhauhauhaua
mantap!!! (kalo ane mah dah diubek di web² para scripter luar, mantap2)...
keep posting
asalamualaikum, apa kabar sob?
waw semakin menarik tips nya luar biasa
sepertinya harus sering2 izin buat bookmark haha..
Sukses Slalu!
sudah saya lakukan semuanya dan ternyata kembali ke account adsense, terus di account adsense saya hanya muncul, di adsesnse pilihannya hanya ada pilihan penelusuran dan feed, untuk adsense content tidak ada dengan alasan blog berbahasa indonesia, padahal di account blog dan dipengaturan account adsense juga sudah saya ganti bahasa inggris oiya kalau mau lihat blog ku yang lain ada di sini PR3 lho
ok sobat...
keren tutornya :)
Selalu mantap tutorialnya...
Nice inpoh banget nich, thx yach...:)
Wah keren bener menunya... Tx Hapia!!
mantab nih, bisa docoba untuk blog satunya. makasih sob hapia