Cara membuat tab menu Accordion

Andilangodang – 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.

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

Berikut langkah - langgkah dibawah ini :

 1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.
 4. Cari Kode </head> 
5.Kopy Paste kode Script di bawah dan taruh di atas </head> 

Ini Kode Scriptnya : 

<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
kemudian Rancangan >> Elemen Laman >> Tambah Gadget
Copy Paste Script di bawah dan taruh di dalamny

Ini Scriptnya :

<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="URL 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>


Ubah Tanda merah di atas sesuai dengan Artikel Blog anda.
JUDUL ARTIKEL 1 ANDA = Judul yang anda muat di blog
URL ARTIKEL ANDA = alamat link yang di tuju
DISINI INFORMASI SINGKAT... = informasi tentang isi blog

DST
Selamat mencoba semoga berhasil.

Sumber : Carabuatwebgratis