اضافة زر اطفاء النور أثناء مشاهدة الفيديو على مدونتك

اليوم وفى موضوع جديد من مدونة ابداعاتى أقدم لكم اضافة اطفاء النور أثناء مشاهدة الفيديوهات فى مدونتك وهذه الاضافة تعتبر فريدة من نوعها لفيديوهات اليوتيوب فى مدونات بلوجر وهى تتيح للزائر اطفاء النور اثناء مشاهدة الفيديوهات فى مدونتك مما يعطيه جو السينما الجميل ولكى لا أطيل عليكم فى مقدمات يبخل الكثير عن قراءتها فهيا بنا للمعاينة والشرح 

يمكنك معاينة الاضافة قبل الشروع فى تركيبها 

من هنا

شرح التركيب

اذهب للوحة التحكم >> القالب >> تحرير HTMl 

الخطوة الأولى 

ابحث عن </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(){
$("#wglightoff").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#wglightoff").toggle();
if ($("#wglightoff").is(":hidden"))
$(this).html("اطفاء النور").removeClass("turnedOff");
else
$(this).html("تشغيل النور").addClass("turnedOff");
});
});
//]]>
</script>

الخطوة الثانية 

ابحث عن </body>  ضع قبله هذا الكود 

<div id='wglightoff'/>

الخطوة الثالثة 

ابحث عن ]]></b:skin>  ضع قبله هذا الكود 

  /*-----  myebd3at.blogspot.com ----- */
#lightsVideo {
position:relative;
z-index:102;
}
#switch {
max-width:640px;
position:relative;
height:36px;
display:block;
margin: 25px 0 0 60px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPjpuZtf-MTaUxuN2ERnfzkYrEcDzjA17pfND6LiCXrLzOXtwkGo1jtM9qyIR_iN8ratVRUu3pfL0hfMxoWb-FJoxaTF5AwndPrhTi6hsjCzaUfG3Hqg0fWVqvxwLtBpv6LN47ZAKjvHo5/s1600/wglightn.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
font-size: 18px;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
font-size: 18px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5tO63cDDxLtvMb3paqikH-JJBLpMEFQGMY2uARmu3tLRMBX_nhhPqE4-ieeJVDFdW4P7iexuT21JUlgFfqpCZt0RzhJ0aTI3yE2-FlqMzCBlUQMI13aqgezaZbD4zqCy2PsbPbS_0iltv/s1600/wglightnf.png);
}
#wglightoff {
background:#000;
opacity:0.8;
filter:alpha(opacity=80);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

الخطوة الأخيرة 

عند كتابتك للمشاركة انتقل الى تبويب HTML 

ضع هذا الكود فى نهاية الصفحة 

<center>
<div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a></div>
<div id="lightsVideo">
ضع كود الفيديو هنا
</div>
</center>

كود الفيديو يكون بهذا الشكل 

<iframe width="560" height="315" src="//www.youtube.com/embed/FsPB61UHQ88" frameborder="0" allowfullscreen></iframe>

استبدل الرابط المظلل باللون الأحمر برابط الفيديو على اليوتيوب
استبدل القيم المحددة باللون الأزرق فى الكود
بمقاسات شاشة الفيديو الذى تريدها

◄ فى انتظار تعليقاتكم المشجعة على تقديم المزيد لخدمتكم ►