Cara Membuat Menu Accordion Dengan CSS - Sharing Ilmu Pengetahuan | Ianhacks
Headlines News :
Home » , » Cara Membuat Menu Accordion Dengan CSS

Cara Membuat Menu Accordion Dengan CSS

Written By Rian on 10.02.2012 | Tuesday, October 02, 2012



Sebelumnya sobat mungkin ada yang bertanya-tanya Menu Accordion itu seperti apa sih?? 


Ok Menu Accordion yang bisa disebut juga tab view, tapi tampilannya tidak seperti pada artikel INI yang horisontal tp yang saya share sekarang adalah yang tampilannya vertikal. 

Cara Membuat Menu Accordion Dengan CSS 


1. Login blog
2. Rancangan -> Edit Html (centang "expand widget template")
3. Cari kode ]]></b:skin>
4. Lalu taruh kode dibawah ini diatas kode ]]></b:skin>
 
#acc{background:#ffffff;font:13px trebuchet ms; line-height:1.2em;padding:10px;margin:0;} #acc h3{background:-moz-linear-gradient(top,#ccc,#999);padding:5px 10px;margin:0;color:#222; text-shadow:0px 1px 1px #fff; border-bottom:2px solid #444;} #acc h3 a{color:#555} #acc h3 a:hover{color: red} #acc .post{background:#fff;color:#000;padding:10px;margin:10px 0px;display:none; border-bottom:2px solid #222;} #acc :target h3 + .post {display:block;height:150px;overflow:auto;} #acc :target h3 a{color:#aa5500}

5. Simpan
6. Lalu buka Rancangan -> tata letak -> add gadget (HTML/JavaScript)
7. Masukkan kode dibawah ini

<div id="acc"> <div id="isi1">

<h3><a href="#isi1"> Judul 1</a></h3> <div class="post"> Masukkan item sobat disini,bisa berupa teks atau widget </div> </div>

<div id="isi2"> <h3><a href="#isi2">Judul 2</a></h3> <div class="post"> Masukkan item anda disini,bisa berupa teks atau widget </div> </div>

<div id="isi3"> <h3><a href="#isi3">Judul 3</a></h3> <div class="post"> Masukkan item anda disini,bisa berupa teks atau widget </div> </div> </div>

8. Simpan dan lihat hasilnya

NB : tulisan yang berwarna merah ganti dengan judul tab view sobat
tulisan yang berwarna biru ganti dengan isi tab view sobat

Good LUCK ^_^






 
x_3bfae512
Share this article :

2 comments:

 
Support : Proudly powered by Blogger
Copyright © 2011. Sharing Ilmu Pengetahuan | Ianhacks - All Rights Reserved
Original Design by Creating Website Modified by IanBlack