Thêm code tắt mở đèn cho blog

LIVE DEMO

Bước 1: Đăng nhập Blogger ~> Vào Mẫu ~> Chỉnh sửa HTML
Thêm đoạn code trước thẻ </head> 

<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("Tắt đèn").removeClass("turnedOff");
else
$(this).html("Bật đèn").addClass("turnedOff");
});
});
//]]>
</script>

Bước 2: Thêm đoạn css vào trước thẻ ]]></b:skin>

 /* Turn off the 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/AVvXsEi9XuwOwX56iTTjb8w7aQ60ZYYQsZHoPpGRnDxALi7pWBYQlnw_IpK_pqkgzbwSilj6180s0SFDgOH4TdBJJ_q1V2442d9w2LyH7ZOLMHnhsQP-TsEOfeXlzLYjZcqqHSnCwWEt6jhFwkZd/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/AVvXsEj6rSYgq7IDvDveN5opk9sohPl6AeMQdRpASuP5LjZ3sX3VFeLpH70dnLw9-E6Z7ge3_MGEyhYUA1k0q9bHun4zSsjMBeor_oeQIA2R0DXMDAE5Rity3dnFvjIFdA-BC_h5H3fp3w6G-t_x/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;
}

Bước 3: Tìm đến thẻ </body> và thêm trước nó code

<div id='lightsoff'/>

Lưu mẫu lại.

Bước 4: Khi đăng bài thì bạn dùng code sau

<center>
<div id="lightsVideo">
...Thêm code video vào đây...
</div>
<div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Tắt đèn</a></div>
</center>

MỞ RỘNG

* Với blog là trang tivi thì ta thêm đoạn code dưới vào ngay sau thẻ <data:post.body/> trong mẫu

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Tắt đèn</a></div>
</b:if>

Và khi đăng bài thì dùng đoạn code

<div id="lightsVideo">Đặt code tivi vào đây</div>

* Với blog là trang phim dùng ancmedia thì ta tìm <div id="anc_pl"/> và sửa thành

<div id="lightsVideo">
<div id="anc_pl"/>
<div id="switch">
<a class="lightSwitcher" href="javascript:void(0);">Tắt đèn</a></div>
</div>

Rồi lưu mẫu lại

Nguồn Blog DX - http://www.dxoan.com/

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..