Widget Slide Panel Dengan JQuery Dan CSS3

Widget Slide Panel Dengan JQuery Dan CSS3 - Kali ini saya ingin membagikan tutorial  sederhana, membuat Ini adalah widget yang sederhana   Widget Slide Panel Dengan JQuery Dan CSS3,  Widget Slide Panel Dengan JQuery Dan CSS3 ini saya temukan di blog tetangga sebelah DTE:] 

 Widget Slide Panel Dengan JQuery Dan CSS3 ini adalah widget sederhana, namun cukup efektif untuk sekedar meringkas bagian-bagian yang biasanya dianggap terlalu panjang atau terlalu lebar. Anda bisa menggunakan widget ini untuk meletakkan foto, video, daftar teman atau apapun, yang menurut anda terasa sedikit mengganggu penampilan.

Untuk menerapkannya pun cukup mudah, tanpa edit HTML Template, bagi anda yang berminat memasang   Widget Slide Panel Dengan JQuery Dan CSS3 ini di blog anda silahkan ikuti langkah berikut ini: 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.

 Widget Slide Panel Dengan JQuery Dan CSS3 :

<style type="text/css">/*Juli 2011 :: Taufik NurrohmanVisit: 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;} 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;} 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;} 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:

Sekian -   Widget Slide Panel Dengan JQuery Dan CSS3

Semoga tutorial mengenai   Widget Slide Panel Dengan JQuery Dan CSS3 ini bermanfaat dan selamat mencoba..