tapi asyik juga dipelajari, ternyata ini adalah menu yang sangat indah, tepatnya menggunakan jQuery, nah sekarang saya mau nulis gimana cara pengaplikasiannya di blogger.
Saya ambil contoh dari sini
_http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/accordion.html
Pertama cari kode ini di <head>
lalu pastekan dibawahnya kode dibawah ini :
<link href='https://sites.google.com/site/dimanasajadeh/ancur/accordion.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='https://sites.google.com/site/dimanasajadeh/ancur/jquery-1.3.2.min.js' type='text/javascript'/>
<script language='javascript' src='https://sites.google.com/site/dimanasajadeh/ancur/jquery.msAccordion.js' type='text/javascript'/>
<style type='text/css'>
.set{border-bottom:1px solid #000}
.set1{background-color:#C77B3F;}
.set2{background-color:#FFC732;}
.set3{background-color:#007C90;}
.set4{background-color:#AD6F08;}
.set5{background-color:#387855;}
.set6{background-color:#8C4B2D;}
.set7{background-color:#82A668;}
</style>
Setelah itu cari code </body>
Lalu paste code dibawah ini taruh diatas code </body>
<script language='javascript' type='text/javascript'>
$(document).ready(function() {
$("#accordionGiftLelo").msAccordion({defaultid:1});
$("#accordion1").msAccordion({defaultid:6, autodelay:4});
$("#accordionNested").msAccordion({defaultid:2});
$("#accordionNestedChild").msAccordion({defaultid:2, vertical:true});
$("#accordion3").msAccordion({vertical:true});
}
)
</script>
Nah setelah itu buatlah element/widget (add new widget)
<h1>Horizontal Accordion - Automatic Delay 4 sec</h1>
<div class="accordionWrapper" id="accordion1">
<div class="set set1">
<div class="title"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu1-h.jpg" width="30" height="198" /></div>
<div class="content"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu-img-1.jpg" width="486" height="198" /></div>
</div>
<div class="set set2">
<div class="title"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu2-h.jpg" width="30" height="198" /></div>
<div class="content"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu-img-2.jpg" width="486" height="198" /></div>
</div>
<div class="set set3">
<div class="title"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu3-h.jpg" width="30" height="198" /></div>
<div class="content"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu-img-3.jpg" width="486" height="198" />
</div>
</div>
<div class="set set4">
<div class="title"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu4-h.jpg" width="30" height="198" /></div>
<div class="content"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu-img-4.jpg" width="486" height="198" /><br />
</div>
</div>
<div class="set set5">
<div class="title"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu5-h.jpg" width="30" height="198" /></div>
<div class="content"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu-img-5.jpg" width="486" height="198" /></div>
</div>
<div class="set set6">
<div class="title"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu6-h.jpg" width="30" height="198" /></div>
<div class="content"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu-img-6.jpg" width="486" height="198" /></div>
</div>
<div class="set set7">
<div class="title"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu7-h.jpg" width="30" height="198" /></div>
<div class="content"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu-img-7.jpg" width="486" height="198" /></div>
</div>
</div>
Nah yang berwarna merah bisa diganti dengan url image kita sendiri..
selamat mencoba gan..
Ini demonya ane test di blog gan..
_http://ifudbelajar.blogspot.com/
No comments:
Post a Comment