itu menu yang berbentuk kotak dan terdapat panel untuk menampilkan menu di bawahnya yang sebelumnya tersembunyi setelah panel kedua, ke tiga dan seterusnya, lihat di sebelah kanan dan kamu akan melihat menu yang jika di klik judulnya akan menggulung keatas dan menampilkan menu di bawahnya yang sebelumnya tidak terlihat. Begitu juga jika kamu klik di tab berikutnya.
- Pertama untuk membuat isi, judul dangambar image, pengaturanya menggunakan kode HTML seperti berikut
- Kode HTML Untuk membuatnya :
<div id="accordion">
<h2 class="current">JUDUL PANEL 01</h2>
<div class="pane" style="display:block">
<img src="http://static.flowplayer.org/img/title/javascript24.png" alt="JavaScript tools" style="float:left; margin:0 15px 15px 0" />
<h3>JUDUL TAB MENU</h3>
<p>
<strong>SUB JUDUL MENU</strong>
</p>
<p style="clear:both">ISI MENU ACCORDION</p>
</div>
<h2>JUDUL PANEL 02</h2>
<div class="pane">
<h3>JUDUL TAB MENU</h3>
<p>ISI MENU ACCORDION</p>
</div>
<h2>JUDUL PANEL 03</h2>
<div class="pane">
<h3>JUDUL TAB MENU</h3>
<p>ISI MENU ACCORDION</p>
</div>
</div>
Perhatikan kode yang saya beri warna, silakan kamu modifikasi sesuai keinginan kamu
- Selanjutnya adalah script js yang wajib kamu tambahkan setelah atau sebelum kode <head> pada template blogger kamu
<script src='http://izoeljquerytools.googlecode.com/files/jquery.tools.min.js'/>
- Kemudian javascript coding yang bisa kamu tambahkan sebelum atau di atas kode </body> pada template blogger kamu
<script>
$(function() {
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
});
</script>
- Selanjutnya kamu perlu mengatur tampilan acordion kamu dari warna background dan warna huruf pada menu kamu nantinya dengan CSS berikut
/* CSS Structure */
#accordion {
background:#333 url(url.latar belakang kotak-accordion.png) 0 0;
width: 300px;
border:1px solid #333;
-background:#666;}
/* accordion header */
#accordion h2 {
background:#ccc url(/url.panel-accordion.png);
margin:0;
padding:5px 15px;
font-size:14px;
font-weight:normal;
border:1px solid #fff;
border-bottom:1px solid #ddd;
cursor:pointer; }
/* pengaturan header accordion saat aktif */
#accordion h2.current {
cursor:default;
background-color:#fff;}
/* accordion pane */
#accordion .pane {
border:1px solid #fff;
border-width:0 2px;
display:none;
height:180px;
padding:15px;
color:#fff;
font-size:12px;}
/* a title inside pane */
#accordion .pane h3 {
font-weight:normal;
margin:0 0 -5px 0;
font-size:16px;
color:#999;}
Keterangan :
- Pengaturan untuk latar belakang isi accordion disini di setting pada kode dan latar belakang menu, kamu bisa kamu ganti dengan gambar dengan memasukkan alamat url gambar pada css berikut
#accordion {
background:#333 url(url.latar belakang kotak-accordion.png) 0 0;
width: 300px;
border:1px solid #333;
-background:#666;}
- Selanjutnya adalah pengaturan panel accordion atau kotak horizontal tempat kamu meletakkan judul panel kamu, kamu juga bisa menggantinya dengan url gambar kamu sendiri, struktur cssnya sebagai berikut.
/* accordion header */
#accordion h2 {
background:#ccc url(/url.panel-accordion.png);
margin:0;
padding:5px 15px;
font-size:14px;
font-weight:normal;
border:1px solid #fff;
border-bottom:1px solid #ddd;
cursor:pointer; }
- Berikutnya pengaturan warna panel accordion saat aktif atau saat kamu klik tabnya,
/* pengaturan header accordion saat aktif */
#accordion h2.current {
cursor:default;
background-color:#fff;}
- Pada contoh yang saya buat terdapat garis tepi di pinggir tab accordion, garis tepi di setting dengan kode css
border:1px solid #fff;
border-width:0 2px;
Dan pengaturan lain lain seperti warna teks menu yang bisa kamu modifikasi dari struktur CSS di atas
Selamat Mencoba, semoga berhasil
Read more: http://www.bloggerafif.com/2011/01/membuat-auto-readmore-pada-blogspot.html#ixzz1SMV0Oahe
0 komentar:
Posting Komentar