Tehnik dasar Rancangan Slide Panel dengan JQuery

Slide Panel bisa digunakan untuk mempercantik tampilan blog, bisa juga digunakan untuk show hide menu navigasi dll.
kali ini saya akan memberikan sedikit tentang Tehnik dasar Rancangan Slide Panel dengan JQuery dengan tampilan sederhana, apabila ingin mempercantik tampilannya silahkan edit CSS nya.

cukup 4 langkah untuk membuatnya,pertama-tama pastikan template anda sudah dilengkapi dengan script dibawah ini, apabila belum ada, silahakn copy script dibawah ini dan letakkan diatas code </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

Ke dua, salin code dibawah ini dan letakkan diatas code </body>.

<script type='text/javascript'>
//<![CDATA[ 
$(document).ready(function() {
    $('.slide-rf').click(function(){
        $('#isi').slideToggle('slow');
    });
});
//]]> 
</script>

Ke tiga, salin code dibawah ini dan letakkan diatas code </style> atau ]]></b:skin>

#isi {
  background:#754c24;
  max-height:200px;
  padding:10px;
  color:#ddd;
  overflow:auto;
  display:none;
}

.slide {
  margin:0;
  padding:0;
  border-top:4px solid #422410;
}

.slide-rf {
  cursor:pointer;
  text-align:center;
  margin:0px auto;
  font:bold 22px Arial,Sans-Serif;
  color:white;
  text-shadow:0px 1px 0px rgba(0,0,0,0.4);
  text-decoration:none;
  display:block;
  padding:0px 25px;
  background:#F05328;
  background:-webkit-radial-gradient(top, #FDA437, #F05328);
  background:-moz-radial-gradient(top, #FDA437, #F05328);
  background:-ms-radial-gradient(top, #FDA437, #F05328);
  background:-o-radial-gradient(top, #FDA437, #F05328);
  background:radial-gradient(top, #FDA437, #F05328);
  border:1px solid #F05028;
  -webkit-box-shadow:inset 0px 1px 0px #FFDF6A, 0px 7px 10px -5px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 1px 0px #FFDF6A, 0px 7px 10px -5px rgba(0,0,0,0.4);
  box-shadow:inset 0px 1px 0px #FFDF6A, 0px 7px 10px -5px rgba(0,0,0,0.4);
  -webkit-border-radius:5px 35px 35px 5px;
  -moz-border-radius:5px 35px 35px 5px;
  border-radius:5px 35px 35px 5px;
  width: 300px;
}

Terakhir, tinggal kamu letakkan kerangka objecknya sesuai keinginan.

<div id='isi'>
    KONTEN SLIDE PANEL DI SINI
</div>
<div class='slide'><span class='slide-rf'>Tombol Slide Panelnya ini</span></div>

Sebagai contoh, letakkan code diatas pada formulir HTML/Javascript pada gadged Tata Letak, maka Slide Panel akan berada pada widget sidebar.

Demo

Tweet