background-image: url(URL address of your image);

Saturday 10 December 2016

How to Add Turn Off Light Video Effect in Blogger

 Tuni cu Blog kong cawnnak tete ka van langhter than lai i a duh a herhmi kan um sual ah tiah ka van chiahmi a si i, a tuah thiammi le a thiam cangmi chung lakah a tuah thiammi le a herhmi ca tuu ah a si lai.

Na Blog chungah Video na post mi Off/On button chiah na duh ahcun fawi tein a tang lei ah cawn kho a si.

1. Hmasabik ah na Blogger Login tuahpiak.
2. Na Login kho in, Template >> Edit HTML ah kal piak ding.
3. Edit HTML chung ah Ctrl+F click law </head> kawl piak than..

na tuahmi tlam a tling a si cang ahcun, a tanglei Code hi copy law </head> a cungah Paste piak.


<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#lightsoff").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#lightsoff").toggle();
if ($("#lightsoff").is(":hidden"))
$(this).html("Turn off the lights").removeClass("turnedOff");
else
$(this).html("Turn on the lights").addClass("turnedOff");
});
});
//]]>
</script>


4. na tuahmi tlam a tling ahcun, ]]></b:skin> hi kawl piak than law a tang i code kan pekmi hi Copy law ]]></b:skin> a cungah Paste piak than ding..



/* Turn off Lights
-------------------- */
#lightsVideo {
position:relative;
z-index:102;
}
#switch {
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/AVvXsEjaDiJfsywktZg9mHUOrxeGX0pP9sqfW8LCubPis-hfJdDJIhn8Z2DYNXBilFqxrVZiYbaDXi7B-DeO_WzwdGRtwO0La-e0gxsSOa1rlCJ5UZ9DVSk6Z8MgHJxT33OIcbKDipP57C6tr0wa/s1600/lights-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/AVvXsEgDAiJQq1MWpJ4D_ynLm1OZIiEn6TKmvqggfbsAYYiDGjj5jts7Zy4Z8W-kFSsa0cBBYXKaZ4RIDESj4EXIDKTg_0FfncffcFN_7-g2gpnX8Jjt_fU-T-xikW0Nf9LXcvxbPXYR8VZqSlUj/s1600/lights-off.png);
}
#lightsoff {
background:#000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}


5. A donghnak ah </body> kawlpiak than law, a tang i Code kan pek mi hi Copy than law, </body> a cungah Paste piak than..

<div id='lightsoff'/>

6. Na tuahmi tlam a tling cang ahcun, Save Template timi kha Click cang.
7. Hla/Video na post duh tik ah a tang lei code hi hman in Post ding a si lai.

NOTE : Na-Video-URL ka tinak ah Hla/Video embed hman ding a si lai.

<center>
<div id="switch">
<a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a>
</div>
<div id="lightsVideo">
Na-Video-embed
 </div>
</center>


Nan Tamtling hram ko seh. 😃😃

0 comments:

Post a Comment