Ini ialah widget yang sederhana, namun cukup efektif untuk sekedar meringkas bagian-bagian yang biasanya dianggap terlalu panjang atau terlalu lebar. Kamu dapat memakai widget ini untuk meletakkan foto, video, daftar sobat atau apapun, yang menurutmu terasa sedikit mengganggu penampilan.
Pertama-tama masuklah ke halaman tata letak widget kemudian tambahkan sebuah elemen halaman HTML/JavaScript. Salin instruksi 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 ialah JQuery. Sebelum menambahkan widget ini sebaiknya periksa dulu isi templatemu. Jika templatemu sudah dilengkapi dengan JQuery, buang instruksi tersebut dari widget.
Klik Simpan dan lihat hasilnya:
Sumber https://www.dte.web.id/