WIDGET SLIDE DENGAN JQUERY DAN CSS3
Haduh`nambah lgi nii satu widget yang mungkin bermanfaat buat kalian, Membuat " WIDGET SLIDE DENGAN JQUERY DAN CSS3 " bentuknya sederhana dan efektif untuk sekedar meringkas bagian-bagian yang menurut anda sangat panjang atau terlalu lebar, widget ini bisa juga untuk meletakan foto, video, daftar teman dll. ga berat buat di pasang di Blog kalian ..!!
nah coba liat Screenshot di bawah ini :
WIDGET SLIDE DENGAN JQUERY DAN CSS3
udah lihat gambar di atas sekarang buat kalian yang mau pasang Widget ini di blogger kalian gampang ko ikuti langkah-langkah di bawah ini :
1. Login Blogger
2. Masuk rancanagan pilih tambah Gadget
3. Pilih HTML/Javascript
4. Masukan code di bawah di dalamnya.
<style type="text/css">
/*
Copyright 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:0px;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>
Save template dan lihat hasilnya..!!
Selamat mencoba
Keterangan : code yang sudah di beri warna Merah tebal bisa kalian ganti sesuai keinginan kalian.
Sekian dari saya tutorial cara memasang WIDGET SLIDE DENGAN JQUERY DAN CSS3.
>
Show
0 Comments
prev
next