07 April 2012

Efek Padam Lampu

Sila lihat demo
Cara Pemasangan Login ke blogger dashboard-->Klik Design-->Edit HTML

 Paste kod di bawah sebelum kod </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ $(document).ready(function(){ $("#oscuridad").css("height", $(document).height()).hide(); $(".lightSwitcher").click(function(){ $("#oscuridad").toggle(); if ($("#oscuridad").is(":hidden")) $(this).html("Tutup Lampu").removeClass("turnedOff"); else $(this).html("Padam Lampu").addClass("turnedOff"); }); }); //]]> </script>
Pastekan kod dibawah sebelum kod ]]></b:skin>
/* Apagar las luces ----------------------------------------------- */ #videoLuces { position:relative; z-index:102; } #apagador { max-width:640px; text-align:left; position:relative; height:25px; display:block; margin: 25px 0 0 60px; } .lightSwitcher { position:absolute; z-index:101; background-image:url(http://lh6.googleusercontent.com/-azJxijJlWX4/T3vT2giQqkI/AAAAAAAACWk/6wt4sBdcHEY/s16/luces-on.png); background-repeat:no-repeat; background-position:left; padding: 0 0 0 20px; outline:none; text-decoration:none; } .lightSwitcher:hover {text-decoration:underline;} .turnedOff { color:#ffff00 !important; background-image:url(http://lh4.googleusercontent.com/-J0U5xRqb7KU/T3vT2kcmUsI/AAAAAAAACWo/-VTwo42-Nj0/s16/luces-off.png); } #oscuridad { background:#000; opacity:0.7; /* Opacidad de la pantalla */ filter:alpha(opacity=70); /* Opacidad de la pantalla */ position:absolute; left:0; top:0; width:100%; z-index:100; }
Pastekan kod dibawah sebelym kod </body>
<div id='oscuridad'/>
Save template

Akhir sekali,dimana korang nak letak video,sama ada komponen HTML/Javascript,guna kod ini:
<center> <div id="apagador"><a class="lightSwitcher" href="javascript:void(0);">Tutup Lampu</a></div> <div id="videoLuces"> ...Letak kod video... </div> </center>

0 ulasan:

Catat Ulasan

Follow by Email