Blogger Video Sir ah Turn Off the Lights Siam Dan

Mizo Video, Movies blog siam tan chuan tuna kan tutorial hi a pawimawh ve khawp ka ring. Tuna kan tutorial hi video kan han en a, vide sira blog page en (light) off dan leh on dan ani a. Kan video en chauh kha pangai takin a eng a nga, a sir vela eng (light) kha off vek dan ani. Hei hian jQuery nena siam ani a (by Janko), tangkaina tamtak a awm ani. A hnuaia Demo ah hian han en chhin rawh. "Turn off the lights" tih leh "Turn on the lights" tih kha va click a ni mai. I hriatthiam mai chu ka ring.

Turn off the Lights Demo

Add "Turn off the Lights" Feature to Blogger in Mizo

Step 1. Blogger Dashboard atang khan 'Theme' >'Edit HTML' tih khan lut la.

Step 2. HTML code kar ah chuan (cursor) han click keuhla, CTRL+F hmang khan a hnuaia code hi zawng rawh.

</head>

Step 3. </head> tih i hmuh chuan a hnuaia Script hi Copy la, </head> tih chung ah va Paste rawh.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

<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>

Note: Red line script saw i template/theme ah a awm tawh nih chuan Remove ang che. I hriatloh chuan CTR+F hmang khan zawngla a tha ang.

Step 4. Tichuan, a hnuaia tag hi zawng leh la:

]]></b:skin>

Step 5. ]]></b:skin> tih i hmun chuan a hnuaia CSS Code hi Copy la ]]></b:skin> chung ah Paste rawh.

/* Turn off the lights
----------------------------------------------- */
#lightsVideo {
position:relative;
z-index:102;
}
#switch {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS2uXpNLUSrDnpnXj5SWUk3dn2HT39fCNtDhcgfftkEiRiu_6TK7iU53S0F7ftVfpkBLg9Xe2maqLWfFc26mbZQOtyYuhZhyphenhyphenXUH3OGjgwKoZNMapFxvZd8y02vPPpbQdDz56__Uld_x5hA/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/AVvXsEjzZSeGwM1NkIJRVz0YWl4SAslFmSKKI2mfJ11XwhhHs7qAkmHHsLV6FwbW0qD8Hv14F6-d5RfU9Ev60yzsGhXdi8GwksJbSMZ3mFUhG1yikTcFBhxPSEPl2D1UI48B7iP-xzEghFioXiee/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;
}

Step 6. A tawp ber ah chuan, a hnuaia tag hi zawng leh la:

</body>

I hmuh chuan a hnuaia HTML code hi Copy la, </body> chung ah va Paste raw.

<div id='lightsoff'/>

Step 7. 'Save' leh phawt la.

Tun ah chuan, Turn off light hmang theih video i post duh chuan Post ah pawh, HTML/JavaScript gadget ah pawh kan hmang ve ve thei.

Post ah hian kan han ti chhin anga:

Step 1. Post thar siamna ah khan click la, 'Compose' nilo in, 'HTML' zawk ah khan lutla, a hnuaia Code hi Copy la Paste rawh.

<center>

<div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a></div>

<div id="lightsVideo">

Video Code Here

</div>

</center>

Step 2. Youtube ah emaw, adanga video pawh nise, video embedded code emaw, Video iFrame code chu Copy la, "Video Code Here" tih ah sawn Paste rawh.

Hei hian jQuery a hmang vangin i template/theme ah jQuery version dang a awm anih chuan a hmang theihloh ang. I remove emaw anih loh chuan a dik theilo ang. Blogger Theme azirin a awm dan a lo insawn hret pawh ani mai thei. Tha taka kan siam fuh theih ka bei sei. :D