Cara membuat tab menu Accordion

Bentuk tampilan tab menu Accordion ini sangat menarik, sangat bagus bila kita pasang pada web ataupun blog kita. Tab menu accordion ini dilengkapi dengan efek animasi sliding. Yaitu animasi sliding yang bekerja ketika kita mengklik pada salah satu tab menu accordion, maka ketika itu pula muncul sebuah kotak bergerak kebawah yang berfungsi menampilkan sebuah dokumen informasi singkat tentang Link yang kita klik tadi.

Silahkan anda lihat contoh tab menu Accordion di bawah ini :

Selain fungsi menampilkan sebuah dokumen informasi singkat, tab menu accordion juga bisa kita gunakan untuk membuat daftar isi :

OK... bila anda berminat, anda bisa ikuti lankah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

<style type="text/css"> .AccordionContainer { border: none; margin-left:10px; } .AccordionTitle { position:relative; width:300px; height:20px; overflow:hidden; cursor:pointer; font-family:Arial; font-size:8pt; font-weight:bold; vertical-align:middle; text-align:center; background-repeat:repeat-x; display:table-cell; border: solid 1px #BDBDBD; background: -moz-linear-gradient(center top, #ffffff 0%,#c4d69f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff),color-stop(1, #c4d69f )); -moz-user-select:none; padding: 10px; } .AccordionContent { position:relative; width:300px; height:0px; overflow:auto; display:none; border: solid 1px #C1C1C1; border-color:rgb(225, 225, 225); background-color:#FAFAFA; padding:10px; } a:link {text-decoration:none;} a:link {color:#000000;} a:visited {text-decoration:none;} a:hover {color:#2E9AFE;} a:active {text-decoration:underline;} </style> <script type="text/javascript"> var ContentHeight = "200"; var TimeToSlide = 400.0; var openAccordion = ''; function runAccordion(index) {var nID = "Accordion" + index + "Content"; if(openAccordion == nID) nID = ''; setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'"+ openAccordion + "','" + nID + "')", 33); openAccordion = nID; } </script> <script type="text/javascript"> function animate(lastTick, timeLeft, closingId, openingId) { var curTick = new Date().getTime(); var elapsedTicks = curTick - lastTick; var opening = (openingId == '') ? null : document.getElementById(openingId); var closing = (closingId == '') ? null : document.getElementById(closingId); if(timeLeft <= elapsedTicks) { if(opening != null) opening.style.height = ContentHeight + 'px'; if(closing != null) { closing.style.display = 'none'; closing.style.height = '0px'; } return; } timeLeft -= elapsedTicks; var newClosedHeight = Math.round((timeLeft/TimeToSlide) * ContentHeight); if(opening != null) { if(opening.style.display != 'block') opening.style.display = 'block'; opening.style.height = (ContentHeight - newClosedHeight) + 'px'; } if(closing != null) closing.style.height = newClosedHeight + 'px'; setTimeout("animate(" + curTick + "," + timeLeft + ",'" + closingId + "','" + openingId + "')", 33); } </script>

6. Simpan Template.

Langkah selanjutnya anda tinggal menampilkan Widget pada halaman depan blog anda. Perhatikan langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

 3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div id="AccordionContainer" class="AccordionContainer">

<div onclick="runAccordion(1);">
 <div class="AccordionTitle" onselectstart="return false;">
JUDUL ARTIKEL 1 ANDA
</div>
</div>
<div id="Accordion1Content" class="AccordionContent">
<a href="ULR ARTIKEL ANDA" target="_blank">
DISINI INFORMASI SINGKAT ARTIKEL (1) ANDA /  DAFTAR ARTIKEL  (1) ANDA
</a>
</div>

<div onclick="runAccordion(2);">
 <div class="AccordionTitle" onselectstart="return false;">
JUDUL ARTIKEL ANDA
</div>
</div>
<div id="Accordion2Content" class="AccordionContent">
<a href="ULR ARTIKEL (2) ANDA" target="_blank">
DISINI INFORMASI SINGKAT ARTIKEL (2) ANDA /  DAFTAR ARTIKEL (2) ANDA
</a>
</div>

</div>

Catatam : 

• Untuk menambah Tab menu accordion, anda tinggal menambah kode seperti dibawah ini sesuai kebutuhan anda, tapi jangan lupa mengganti dan mengurutkan nomor atau angka yang berwarna PING :

<div onclick="runAccordion(3);">

 <div class="AccordionTitle" onselectstart="return false;">

JUDUL ARTIKEL ANDA

</div>

</div>

<div id="Accordion3Content" class="AccordionContent">
<a href="ULR ARTIKEL (2) ANDA" target="_blank">
DISINI INFORMASI SINGKAT ARTIKEL (2) ANDA /  DAFTAR ARTIKEL (2) ANDA

</a>

</div>

• Untuk menambah daftar, anda tinggal menambah kode hiperlink seperti dibawah ini sesuai kebutuhan anda, dan diakhiri tag <hr> sebagai garis pembatas :

<a href="ULR ARTIKEL ANDA" target="_blank">
JUDUL ARTIKEL ANDA

</a>

<hr>

5. Simpan.

Selamat mencoba ya...
Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.