Widget Slide Panel dengan JQuery dan CSS3

widget slide panel

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

14 Komentar

  • Unknown

    sama kayak spoiler y gan?

    • Unknown

      Iya, mas :D
      http://www.nulispost.com/

  • Taufik Nurrohman

    @Asmara Susanto: Iya..

  • Piyen

    makasih tutorialnya...
    Berhasil di pasang...

  • Rudy Azhar

    Saya kok rasa-rasanya bisa membuat tanpa javacript. :D

  • Taufik Nurrohman

    @Rudy Azhar: Iya, hehe.. tapi kalau pakai CSS Transisi agak susah karena cuma pakai hover. Mungkin bisa kalau pakai CSS :target ^_^

  • Unknown

    mantab :-bd akhirnya ketemu juga

  • tes

    Keren Mas

  • Mohammad Rifqi Sucahyo

    jika saya meu membuat panel tersebut selalu terbuka, caranya gimana mas.??

    • Taufik Nurrohman

      Hapus deklarasi display:none; yang berada di dalam selektor #panel

  • Unknown

    Keren mas...
    Visit Back .. http://center60.blogspot.com/

  • Oqif

    Wah, terimakasih banyak, ini yg saya cari2 sejak dulu. :-bd

  • Unknown

    Bisa untuk buka/tutup komentar dong..??

  • dhan oke

    Pak Taufik, mau tanya kalo panelnya di perbanyak bgm caranya?

Komentar telah ditutup.