Sederhananya, beginilah tampilan awal sebuah slide panel (lihat demo) JQuery. Untuk membuatnya kita hanya membutuhkan empat langkah sederhana:
Pertama, carilah script yang kurang lebih tampak menyerupai ini dalam baris arahan HTML templatemu:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>Jika template blogmu ternyata sudah disertai dengan script ini, kau tidak perlu menambahkannya dan dapat pribadi mengarah ke langkah berikutnya. Tapi bila belum ada, salinlah dulu script di atas, lalu letakkan di atas arahan
</head>.Ke dua, salinlah script pengaturan efek, kecepatan imbas dan objek-objek yang diseleksi ini sempurna di bawah arahan tadi:
<script type='text/javascript'> $(document).ready(function() { $('.btn-slide').click(function() { $('#panel').slideToggle('slow'); }); }); </script>Ke tiga, salinlah arahan pemodel ini, lalu letakkan di atas arahan
</style> atau ]]></b:skin>#panel { background:#754c24; max-height:200px; padding:10px; color:#ddd; overflow:auto; display:none; } .slide { margin:0; padding:0; border-top:4px solid #422410; } .btn-slide { cursor:pointer; text-align:center; padding:10px; margin:0 auto; display:block; font:bold 120%/100% Arial,Helvetica,sans-serif; color:#fff; background-color:#FF8C00; }Terakhir, kau tinggal meletakkan kerangka objeknya saja di daerah yang kau inginkan:
<div id='panel'> KONTEN SLIDE PANEL DI SINI </div> <div class='slide'><span class='btn-slide'>Tombol Slide Panel di Sini</span></div>Sebagai contoh, letakkan arahan tersebut di bawah
<div id='sidebar-wrapper'> maka kau akan menemukan panel tersebut di sidebar.Klik Simpan Template dan lihat hasilnya.
Namun tentu saja, balasannya tidak akan sama persis dengan gambar di atas, alasannya ialah di sini Saya lebih menekankan kepada cara kerja objek ini, bukan pada bentuknya:
Untuk memahami cara kerjanya kita masuki tahap pemahaman lebih lanjut.
Pemahaman Lebih Lanjut:
Perhatikan arahan ini:<script type='text/javascript'> $(document).ready(function() { $('.btn-slide').click(function(){ $('#panel').slideToggle('slow'); }); }); </script>Fokuslah pada arahan
$('.btn-slide') dan $('#panel').Kode
$('.btn-slide') menawarkan bahwa fungsi ini diterapkan untuk sebuah elemen objek yang mempunyai class "btn-slide" (dalam hal ini ialah elemen <span class="btn-slide">Tombol Slide Panel di Sini</span>)..click ialah event mouse yang diterapkan pada objek ".btn-slide".#panel dapat dibilang ialah elemen yang akan dikenai imbas JQuery menurut event yang diberikan pada objek <span class="btn-slide">Tombol Slide Panel di Sini</span>.Dalam hal ini, elemen yang dimaksud adalah:
<div id="panel"> KONTEN SLIDE PANEL DI SINI </div>Intinya,
.btn-slide ialah tombolnya dan #panel ialah pintunya. Ketika .btn-slide ditekan, maka #panel akan bereaksi sesuai dengan jenis aksinya (dalam hal ini ialah .slideToggle).Satu lagi, cobalah untuk sekali-kali mengganti nilai
slow dengan normal atau fast dalam arahan .slideToggle('slow'); dan lihat perbedaan kecepatan pembukaan panelnya. ^_^Begitulah kira-kira cara kerjanya. Sedangkan untuk pembuatan model-model objek atau yang lainnya dapat kau sesuaikan dengan mengutak-atik CSSnya biar tampilannya dapat sesuai dengan template blogmu menyerupai ini:
Semuanya tergantung dari kreativitas kalian. Sumber https://www.dte.web.id/