Efek Padam Lampu
Sila lihat demo
Cara Pemasangan
Login ke blogger dashboard-->Klik Design-->Edit HTML
Paste kod di bawah sebelum kod </head>
Akhir sekali,dimana korang nak letak video,sama ada komponen HTML/Javascript,guna kod ini:
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNSV7F_wqh_L_UrQp67q2EvqBtWNgp2dOEZ33R4JOMi8FGo61TwqGWzmfEdUY5DRTOQ8Dg6dzzdQrJeV9xh0lZZktuSOxLrV5Ej3sD3O4764yO0qwoB8zFmHbA3URK75gQuXLl-IqdeT8/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkIqgFJIFR7kLzi5NEEdmdQ8n105ml-Z-OONnjY8UCu4UOOLOM3_Y7Zg7zjaEBw4K6OBvCgYGremgiyptwRwV8f3T9InoHVnUIcVAtRmutUhms3ysx_XABeTsmmG8DUwchhujHMKvngVQ/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 templateAkhir 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>
Post a Comment:
Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.