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 :

Cara buat web gratis

Cara buat web ternyata tidaklah sesulit yang kita fikirkan. Kita hanya membutuhkan lima langkah mudah, cepat dan gratis. Anda tidak harus mengerti tentang bahasa programer. Disini saya jabarkan bagaimana Cara buat web dari mulai Cara dapat domain gratis, Cara dapat hosting gratis, Cara seting domain gratis dihosting gratis, Cara dapat template gratis, dan Cara Upload Template gratis.

Cara buat blog

Ada beberapa keuntungan bila kita buat blog atau memiliki sebuah blog. Disamping Gratis, mudah dan cepat, Blog bisa kita gunakan untuk keperluan pribadi atau sekedar penyalur hoby menulis atau apapun, Blog juga bisa kita gunakan sebagai sarana berbagi ilmu pengetahuan. Bahkan saat ini sudah tidak asing lagi bawha sebuah blog menjadi sarana bisnis.

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

Tutorial Blogger

Cara membuat gambar memutar

---

Cara agar blog cepat diakses dengan HP

---

Cara mengganti forum komentar blogger dengan Disqus

---

Cara mengganti forum Komentar Blogger dengan IntenseDebate

---

5 Tampilan Dinamis dari blogger

---

Cara menambah gadget pada Header

---

Cara submit sitemap blog

---

Cara memberi Meta Tag pada blog

---

Cara memberi meta tag pada setiap posting

---

Cara memasukkan Blog ke Facebook

---

Cara membuat Read More otomatis

---

Cara membuat Tooltip

---

Cara membuat slide dengan efek marquee

---

Cara membuat efek membesar pada gambar

---

Cara membuat gambar melayang

---

Cara membuat efek transparan pada gambar

---

Cara membuat daftar isi menggunakan efek marquee

---

Cara membuat daftar isi dengan drop down

---

Cara Membuat Link Dalam Satu Halaman

---

Cara membuat background warna gradasi

---

Cara membuat tombol scroll "To Top"

---

Cara pasang tombol share

---

Cara mencari kode HTML

---

Cara membuat Blog menjadi Dofollow

---

Cara membuat textarea dengan tombol "select all"

---

Cara membuat effek scroll pada Titel Bar

---

Cara membuat tanggal otomatis update

---

Cara Membuat Pop-up Window

---

Cara Membuat Navigasi Halaman

---

Cara Membuat Subscribe email pada blog

---

Cara membuat efek shadow pada kotak dan gambar

---

Cara Membuat Tabel (Tahap 2)

---

Cara membuat List pada daftar

---

Cara pasang Iklan diatas postingan

---

Cara membuat "Embed ULR, HTML, Link Forum" dibawah artikel

---

Cara membuat artikel berhubungan

---

Cara Menambah widget pengatur Ukuran dan Warna teks pada Blog

---

Cara Menambahkan Efek Teks pada Cursor Mouse

---

Cara buat kotak Pencarian

---

Cara buat Menu navigasi Drop-Down Horisontal

---

Cara Membuat Label Animasi "blogumulus"

---

Cara membuat Tag Cloud

---

Cara Pasang Radio Online

---

Cara Membuat label di blog

---

Cara membuat Slider

---

Cara membuat slideshow

---

Cara Membuat variasi Font pada Teks

---

Cara Buat Kotak atau Teks Area

---

Cara membuat Scroll Box

---

Cara Membuat Tabel (Tahap 1)

---

Cara membuat Link Terbuka di halaman Baru

---

Cara Menambah Gadget diatas Header

---

Cara Buat Sitemap / Peta Situs

---

Cara buat tabel kode warna

---

Cara Membuat Teks Berjalan ( Marquee )

---

Cara Membuat Refresh Otomatis pada Blog

---

Cara Membuat Rounded Corner

---

Cara membuat Text-Shadow

---

Cara Memasang Background Gambar pada postingan

---

Cara membuat daftar isi otomatis

---

Cara Menambah Widget Jam pada Blog

---

Cara Membuat Read more

---

Cara Menghilangkan Navbar Pada blog

---

Cara Membuat Navbar Auto-Hide

---

Cara Membuat Forum Login

---

Cara Membuat Anti Copy Paste

---

Cara Membuat pesan selamat datang

---

Cara Membuat Animasi Status Loading

---

Cara Membuat Text Area blok Otomatis

HTML

HTML

---

HTML Dasar

---

Membuat garis

---

Penggunaan Spasi

---

Format Teks

---

Blockquote html

---

HTML Style

---

Hyperlinks

---

Tabel HTML

---

HTML LIST

CSS

CSS

---

CSS Background

---

CSS Teks

---

CSS FONT

---

CSS LINK

---

CSS LIST

---

CSS BORDER

---

CSS BOX

---

CSS Border-Radius

---

CSS Margin

---

CSS Padding

---

CSS Dimensi

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.

Related Articles :
Baca artikel lain :

Informasi Artikel :
	Judul : "Cara membuat tab menu Accordion" Diulas Oleh : Noercholis | Minggu, 29 Mei 2011 | 19.52 Description : Bentuk tampilan tab menu Accordion ini sangat menarik, sangat bagus bila kita pasang pada web ataupun blog kita. Tab menu accordion ... Label : css,gadget,HTML,JavaScript Rating : 6.4 Dari 10, Berdasarkan 2100+ Dari 21 000+ Pengunjung.
Sampai saat ini baru ada : 21 komentar >>> Silahkan tambahkan komentar Anda...