Widget Slide Panel dengan JQuery dan CSS3

Ini adalah widget yang sederhana, namun cukup efektif untuk sekedar meringkas bagian-bagian yang biasanya dianggap terlalu panjang atau terlalu lebar. Kamu bisa menggunakan widget ini untuk meletakkan foto, video, daftar teman atau apapun, yang menurutmu terasa sedikit mengganggu penampilan.

Pertama-tama masuklah ke halaman tata letak widget kemudian tambahkan sebuah elemen halaman HTML/JavaScript. Salin kode di bawah ini, kemudian letakkan di dalam formulirnya:

<style type="text/css">
/*
Juli 2011 :: Taufik Nurrohman
Visit: http://hompimpaalaihumgambreng.blogspot.com
*/
#paneltovik {display:block}

#panel {
  background-color:#96BC43;
  border:2px solid #a7cc54;
  border-width:2px 2px 0 2px;
  height:250px;
  overflow:auto;
  margin:0;
  padding:10px;
  color:#111;
  font:normal 12px Times,Serif;
  -webkit-box-shadow:inset 0 0 7px #222;
  -moz-box-shadow:inset 0 0 7px #222;
  box-shadow:inset 0 0 7px #222;
  display:none;
}

.tombolpanel {
  position:relative;
  cursor:pointer;
  text-shadow:1px 1px 2px #000;
  padding:7px 15px;
  background-color:#333;
  border-top:3px solid #a7cc54;
  color:#e5e5e5;
  text-align:center;
  font:bold 14px Times,Sans-Serif;
  font-style:italic;
  -webkit-box-shadow:0 -1px 2px #222;
  -moz-box-shadow:0 -1px 2px #222;
  box-shadow:0 -1px 2px #222;
  -webkit-border-radius:0 0 14px 14px;
  -moz-border-radius:0 0 14px 14px;
  border-radius:0 0 14px 14px;
}

.tombolpanel:hover {color:#ccc}

.tombolpanel:after {
  content:'';
  position:absolute;
  top:100%;
  margin-top:-10px;
  left:5%;
  width:0;
  height:0;
  display:block;
  border-width:20px;
  border-style:solid;
  border-color:#333 #333 transparent #333;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.tombolpanel').click(function() {
        $('#panel').slideToggle('slow');
        $('.tombolpanel span.in').toggle();
    });
});
</script>
<div id="paneltovik">
  <div id="panel">

    ... KONTEN DI SINI ...

  </div>
  <div class="tombolpanel">
    <span class="in">Buka Panel</span>
    <span class="in" style="display:none;">Tutup Panel</span>
  </div>
</div>

Kode yang Saya beri garis bawah adalah JQuery. Sebelum menambahkan widget ini sebaiknya periksa dulu isi templatemu. Jika templatemu sudah dilengkapi dengan JQuery, buang kode tersebut dari widget.

Klik Simpan dan lihat hasilnya:

Lihat Demo