Last Minute Posts

13 November 2009 aRi isTiadi

Membuat Menu Buka Tutup Horizontal atau Horizontal Accordion script
nih screenshootnya



mau lihat seperti apa bentuknya
klik DISINI









Mau bikin seperti itu?
kalau mau yuk ikutin langkah langkahnya
pertama:
Login dahulu di account blogger anda
kedua:
Pilih Tata Letak
ke tiga:
Pilih Edit HTML

untuk menghindari sesuatu yang tidak diinginkan
jangan lupa untuk membackup dulu template anda
dengan mengklik Download Template Lengkap










oke selanjutnya
coba anda cari kode <head>
nah kalau sudah ketemu kodenya
copy kode di bawah ini

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://ariistiadi.googlepages.com/haccordion.js' type='text/javascript'>

</script>

dan letakan persis di bawah kode
<head>










selanjutnya oba anda cari lagi kode ]]></b:skin>

nah sekarang anda mau pilih menu yang seperti apa?
Demo 1[yang ada gambarnya]
Demo 2[tidak ada gambarnya]

kalau anda memilih demo 1
copy kode di bawah ini
/*CSS for example Accordion #hc1*/

#hc1 li{
margin:0 3px 0 0; /*Spacing between each LI container*/
}

#hc1 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: lightblue;
}
dan letakan persis di atas kode]]></b:skin>










Apabila anda memilih Demo 2
copy kode di bawah ini

/*CSS for example Accordion #hc2*/

#hc2 li{
margin:0 0 0 0; /*Spacing between each LI container*/
border: 12px solid black;
}

#hc2 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: #E2E9FF;
cursor: hand;
cursor: pointer;
}

dan letakan persis di atas kode]]></b:skin>


dan tambahkan pula kode di bawah ini

.haccordion{
padding: 0;
}

.haccordion ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden; /*leave as is*/
}


.haccordion li{
margin: 0;
padding: 0;
display: block; /*leave as is*/
width: 100%; /*For users with JS disabled: Width of each content*/
height: 200px; /*For users with JS disabled: Height of each content*/
overflow: hidden; /*leave as is*/
float: left; /*leave as is*/
}

.haccordion li .hpanel{
width: 100%; /*For users with JS disabled: Width of each content*/
height: 200px; /*For users with JS disabled: Height of each content*/
}
dan letakan persis di atas kode]]></b:skin>

anda bisa memodifikasi kode tersebut sesuai dengan keinginan anda












setelah itu anda cari kode </head>
nah kalau sudah ketemu
copy kode di bawah ini


<script type='text/javascript'>

haccordion.setup({
accordionid: 'hc1', //
paneldimensions: {peekw:'50px', fullw:'400px', h:'158px'},
selectedli: [0, true], //[selectedli_index, persiststate_bool]
collapsecurrent: false //
})

haccordion.setup({
accordionid: 'hc2', //
paneldimensions: {peekw:'30px', fullw:'450px', h:'150px'},
selectedli: [-1, true], //[selectedli_index, persiststate_bool]
collapsecurrent: true //
})

</script>

dah letakan persis di bawah kode </head>

setelah itu SIMPAN TEMPLATE/SAVE TEMPLATE













Selanjutnya kita menuju
1.Elemen Halaman
2.Klik Tambah Gedget
3.Klik HTML/Javascript










kalau sudah
bagi anda yang memilih Demo 1
copy dan masukan kode di bawah ini

<div id="hc1" class="haccordion">
<ul>

<li>
<div class="hpanel">
<img style="float: left; padding-right: 8px; width: 200px; height: 148px;" src="http://img502.imageshack.us/img502/746/thailand.jpg" />The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia.
</div>
</li>

<li>
<div class="hpanel">
<img style="float: left; padding-right: 8px; width: 200px; height: 148px;" src="http://img264.imageshack.us/img264/7199/japan.jpg" />Japan is a constitutional monarchy where the power of the Emperor is very limited.
</div>
</li>

<li>
<div class="hpanel">
<img style="float: left; padding-right: 8px; width: 200px; height: 148px;" src="http://img101.imageshack.us/img101/516/mayai.jpg" />Malaysia is a South Asian country rich in natural resources in areas such as agriculture, forestry and minerals.
</div>
</li>

<li>
<div class="hpanel">
<img style="float: left; padding-right: 8px; width: 200px; height: 148px;" src="http://img194.imageshack.us/img194/9553/camam.jpg" />Agriculture has long been the most important sector of the Cambodian economy.
</div>
</li>

<li>
<div class="hpanel">
<img style="float: left; padding-right: 8px; width: 200px; height: 148px;" src="http://img408.imageshack.us/img408/5751/langkawi.jpg" />Langkawi is particularly known for its beaches which are among the best in Malaysia.
</div>
</li>

</ul>
</div>

<p style="clear: left;"></p></span></a><a href="javascript:haccordion.expandli('hc1',%200)">Expand 1 Panel</a> | <a href="javascript:haccordion.expandli('hc1',%201)">Expand 2nd Panel</a> | <a href="javascript:haccordion.expandli('hc1',%202)">Expand 3rd Panel</a> | <a href="javascript:haccordion.expandli('hc1',%203)">Expand 4th Panel</a> | <a href="javascript:haccordion.expandli('hc1',%204)">Expand 5th Panel</a><p></p>




klik SAVE/SIMPAN
Anda bisa mengganti gambar ,link, atau tulisan yang di atas sesuai dengan keinginan anda













untuk anda yang memilih Demo 2
copy dan masukan kode di bawah ini

<div id="hc2" class="haccordion">
<ul>

<li style="border-right-width: 0pt;">
<div style="padding: 10px; width: 250px;" class="hpanel">
This accordion content has a custom full width of 250px. Note where the two inline CSS are added within the markup.
</div>
</li>

<li style="border-right-width: 0pt;">
<div style="padding: 10px; width: 180px;" class="hpanel">
This accordion content has a custom full width of 180px. Note where the two inline CSS are added within the markup.
</div>
</li>

<li style="border-right-width: 0pt;">
<div style="padding: 10px; width: 350px;" class="hpanel">
This accordion content has a custom full width of 350px. Note where the two inline CSS are added within the markup.
</div>
</li>

<li>
<div style="padding: 10px; width: 550px;" class="hpanel">
This accordion content has a custom full width of 550px. Note where the two inline CSS are added within the markup.
</div>
</li>

</ul>
</div>


klik SAVE/SIMPAN
Anda bisa mengganti gambar ,link, atau tulisan yang di atas sesuai dengan keinginan anda






dah seperti itu aja caranya
mudah bukan...?
bila belum berhasil tanyakan saja

Sumber:dynamicdrive



PERHATIAN..!Bagi Anda Yang Ingin Copy Paste Artikel Saya Harap Mencantumkan Sumbernya
Terima Kasih

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

11 komentar:

(maaf) izin mengamankan PERTAMA dulu. Boleh kan?!
pusing lihat kode script segitu buanyaknya

wow keren sob menunya mantap nih ada buka tutupnya :D

mantap aku copas langsung bos...salam kenal juga nih....

wuah makin mantep saja euy

wakh keren buanget euy....boleh ikutan untuk memperindah blog ane om

wakh aku masih belum paham nih caranya.....susyah ya kang..caranya

keren bro, tapi blog jadi berat loading nggak? soalnya banyak banget scriptnya... :$

keren sob info nya thx ya...
lngsung di coba............


Regards : PingugOblOg

Wah, banyak bnget scriptnya bro..thanks infonya

Sob scriptnya banyak banget, agak pusing nih

Kirimkan Komentar Anda

Mohon Komentarkan ketika anda selesai membaca

Bagi anda pengguna blog,harap pilih Name/URL
untuk memudahkan saya membacklink anda