ALDO-SHARE : Download Software,Crack,Keygen,Serial Number,Patch Full Version.
kali ini saya akan menjelas kan Cara Membuat Menu Accordion,Di mana Menu Accordion
ini menggunakan CSS3 di blog tanpa Java Script.
Langkah awal membuat Menu accordion ini adalah sebagai berpikut:
1. Masuk ke edit html
2. jangan centang Expand Widget Templates
3. Masukan kode di bawah tepat di atas kode ]]></b:skin>
/*accordion menu<br /> ********************/<br /> .verticalaccordion>ul {<br /> margin: 0;<br /> padding: 0;<br /> list-style:none;<br /> width: 500px;<br /> }<br /> <br /> .verticalaccordion>ul>li {<br /> display:block;<br /> overflow: hidden;<br /> margin: 0;<br /> padding: 0;<br /> list-style:none;<br /> height:40px;<br /> width: 500px;<br /> <br /> /* Decorative CSS */<br /> background-color:#f0f0f0;<br /> <br /> /* CSS3 Transition Effect */<br /> transition: height 0.3s ease-in-out;<br /> -moz-transition: height 0.3s ease-in-out;<br /> -webkit-transition: height 0.3s ease-in-out;<br /> -o-transition: height 0.3s ease-in-out;<br /> <br /> }<br /> <br /> .verticalaccordion>ul>li>h3 {<br /> display:block;<br /> margin: 0;<br /> padding:10px;<br /> height:19px;<br /> <br /> /* Decorative CSS */<br /> border-top:#f0f0f0 1px solid;<br /> font-family: Arial, Helvetica, sans-serif;<br /> text-decoration:none;<br /> text-transform:uppercase;<br /> color: #000;<br /> background: #cccccc;<br /> <br /> /* CSS3 Gradient Effect */<br /> background: -moz-linear-gradient( top, #999999, #cccccc);<br /> background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));<br /> filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE 7 */<br /> -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE 8 */<br /> }<br /> <br /> .verticalaccordion>ul>li>div {<br /> margin:0;<br /> overflow: auto;<br /> padding:10px;<br /> height:220px;<br /> }<br /> <br /> .verticalaccordion>ul>li:hover {<br /> height: 280px;<br /> }<br /> <br /> .verticalaccordion:hover>ul>li:hover>h3 {<br /> /* Decorative CSS */<br /> color:#fff;<br /> background: #000000;<br /> <br /> /* CSS3 Gradient Effect */<br /> background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */<br /> background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */<br /> filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */<br /> -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)"; /* IE 8 */<br /> }<br /> <br /> .verticalaccordion>ul>li>h3:hover {<br /> cursor:pointer;}
Save template
Itu belum selesai sob,, sekarang kita akan membuat menunya langkahnya adalah:
1.Masuk ke page element/element laman
2.Klik add a gadget
3.Lalu cari HTML/ java script dan masukan kode dibawah ini:
<div class="verticalaccordion"><ul> <li><br /> <h3>Isi konten</h3> <div>isi konten di sini bisa juga dengan java script atau yang lainnya</div> </li> <li><br /> <h3>Daftar selingkuhan</h3> <div>pokonya apa saja isi di sini terserah mau di isi apa</div> </li> <li><br /> <h3>Daftar isi</h3> <div>isi apa saja terserah sobat</div><br /> </li> <li><br /> <h3>Daftar istri</h3> <div>isi konten di sini bisa dengan gambar atau yang lainnya</div> </li> </ul></div><br />
Klik save dan lihat hasilnya
