-contoh-
Ok,pertama seperti biasa buka blogger=>template=>edit HTML,setelah itu,ikuti intruksi" dibawah ini.
Copy paste semua CSS ini dibawah code ]]></b:skin>
<style type='text/css'>
#panel{
overflow:auto;
display:block;
}
.slide{
margin:0;
padding:0;
}
.btn-slide:hover {background:#CA2968;}
.btn-slide {
cursor: pointer;
text-align: center;
padding: 10px;
display: block;
color: #B3B3A9; /*Warna text*/
background-color: #1F1538; /*warna background tombol menu*/
position: absolute;
z-index: 9;
margin-left: 0px; /*atur posisi dengan margin*/
margin-right: 0px; /*atur posisi dengan margin*/
margin-top: 0px; /*atur posisi dengan margin*/
margin-bottom: 0px; /*atur posisi dengan margin*/
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
width: 50px; /*Lebar*/
height: 50px; /*tinggi*/
line-height: 50px;
border: 5px solid white; /*border atau garis pinggir*/
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.5); /*bayangan*/
-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.5);
} /* trik dari djogzs.blogspot.com*/
</style>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#panel{
overflow:auto;
display:none; /*panel yang disembunyikan dalam keaddan normal*/
}
</style>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.btn-slide{display:none;} /*Agar tombol menu hilang di halaman posting*/
</style>
</b:if>
Lalu copy paste juga Jquery dibawah ini diatas code </body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$('.btn-slide').click(function(){
$('#panel').slideToggle('slow');
});
});
</script>
Selanjutnya pengaturan code HTMl'a.perhatikan kode html dibawah ini dan copy paste
//Kode Html dibawah ini,adalah tombol open untuk membuka tutup content//
<div class='slide'><span class='btn-slide'>-OPEN-</span></div>
#untuk mengatur posisi,lebar,tinggi warna dan sebagai'a,kamu tinggal atur css .btn-slide {
kemudian,tentukan content yang akan kamu sembunyikan.
<div id='panel'>
isi content
</div>
#Contoh pada template hatsune miku magazine style
<div id='panel'>
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='sidebar-right'> /*Sidebar*/
<b:section class='sidebar' id='sidebartop'>
<b:widget id='Profile1' locked='false' title='Profile' type='Profile'/>
</b:section>
</div>
<div id='content-wrapper'> /*wrapper*/
<div id='main-wrap1'>
<div id='main-wrap2'>
<b:section class='main' id='main' showaddelement='no'> /*posting*/
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
</div>
</div>
Intinya,semua kode html yang ada didalam code <div id='panel'> akan tersembunyi,dan difungsikan seperti .
accordion/ buka tutup.
Setelah itu,simpan dan lihat hasilnya.
#trik ini sudah saya tinjau dan coba",hasil'a 2 template ujicoba berhasil diterapkan.
mohon maaf kalau penjelasan'a agak rumit,tapi teorinya sudah cukup dan dapat dicoba,semoga berhasil,:)
Backlinks
| URL |
| Code For Forum |
| HTML Code |
Anda Sekarang Sedang Baca Artikel Tentang Content Accordion dengan jquery , Boleh Menyebar Luaskan Artikel Ini Atau Mengcopy Paste Artikel Content Accordion dengan jquery ini Jika Memang Berrmanfaat. Tapi Saya Harap Anda Jangan Lupa Menyertakan Link Content Accordion dengan jquery Sumbernya. Thank's
Rule For Leave A Comment
| 1. Dilarang SPAM. |
| 2. Berkomentarlah sesuai TOPIK. |
| 3. Komentar yang keluar dari TOPIK akan Author DELETE. |
| 4. Dilarang berkomentar yang berbau unsur SARA,PO*NO dan MENGHINA. |
