Có rất nhiều trang viết về thủ thuật này nhưng khi áp dụng thì không như ý ví dụ như tắt là tắt cả web luôn phần flash(khung video hoặc tivi) cũng đen thui,hoặc không rõ ràng chả biết áp dụng thế nào...
Sau đây mình xin chia sẻ code viết về vấn đề bật tắt đèn cho blog/web, code này javascript rất nhẹ ngắn gọn tuy không phải là tự động mà vẫn post thủ công khi post video nhưng lại rất phù hợp với blog không chuyên về phim và mình thấy chấp nhận được.
Mình cứ post lên đây nếu ai cần thì lấy dùng.(Nếu là blog chuyên về phim thì làm luôn cái template đã tích hợp sẵn bản AncMedia Edition hỗ trợ play khá nhiều server thì tắt đèn tự động luôn ko cần dùng code trong khi post bài)
Xem DEMO
DEMO
làm thế nào để áp dụng vào blogspot
1-Trước tiên cần vào chỉnh sửa mẫu đặt đoạn CSS sau vào trước thẻ ]]></b:skin>
#lightsVideo {
position:relative;
z-index:102;
}
#switch {
max-width:600px;
text-align:left;
position:relative;
height:25px;
display:block;
margin: 2px 0 0 10px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(http://2.bp.blogspot.com/-U9kY3nfVFLg/UpIhF6vHedI/AAAAAAAABDg/h3T1E21pr2Q/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(http://1.bp.blogspot.com/-Uvn-CN3qEDs/UpIhF-BkTVI/AAAAAAAABDk/1PiAOPt2_gU/s1600/lights-off.png);
}
#darkness {
background:#000;
opacity:1;
filter:alpha(opacity=100);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}
2-Tiếp theo bạn tìm tới thẻ </head> và dán code sau vào trước nó:<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>Không dùng được async='async'
Nếu blog đã có thư viện jquery thì bỏ qua bước này.
Sau đó tiếp tục dán code sau:
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#darkness").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#darkness").toggle();
if ($("#darkness").is(":hidden"))
$(this).html("Tắt đèn").removeClass("turnedOff");
else
$(this).html("Bật đèn").addClass("turnedOff");
});
});
//]]>
</script>
3-Bước tiếp theo bạn tìm tới thẻ </body> và dán code sau vào trước nó:<div id='darkness'/>4-Khi post bài bạn sử dụng code sau:
<div id="lightsVideo">Đặt code video hay tivi vào đây</div> <div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Tắt đèn</a></div>Điều chỉnh độ sáng tối ở:
opacity:1;
filter:alpha(opacity=100)
Trị số càng lớn càng tối
Nếu là trang tivi thì trong đoạn code dùng để post bài(4)tách lấy đoạn code:
<div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Tắt đèn</a></div>và đặt ngay sau thẻ <data:post.body/> ở trong mẫu dưới dạng:
<b:if cond='data:blog.pageType == "item"'> <div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Tắt đèn</a></div> </b:if>Khi post video ta chỉ cần dùng đoạn code còn lại
<div id="lightsVideo">Đặt code tivi vào đây</div>Trong trường hợp post phim tại blog(ko chuyên về phim)theo code bổ sung của bài AncPlay Media Player Cho Blogspot ta sử dụng code như sau:
<div id="lightsVideo"> <div align="center" id="anc_pl"> </div> <div id="switch"> <a class="lightSwitcher" href="javascript:void(0);">Tắt đèn</a></div> </div> <div id="anc_tp"> </div> <div id="anc_content"> </div>Trong đó
<div id="anc_pl"></div> là vị trí hiện khung xem phim.
anc_pl cũng có thể là phim_pl vvv tùy thuộc bạn sử dụng code post phim mà id có thể khác nhau.
Linh phim có thể đặt bên ngoài đoạn code trên hoặc đặt trong thẻ <div id="anc_data">[id.]Tập;link video|[/id.]</div>
tùy vào code post phim.
End!