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

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

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

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

من هنا

شرح التركيب

اذهب للوحة التحكم >> القالب >> تحرير 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> ضع قبله هذا الكود

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

ابحث عن ]]></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/AVvXsEiwL-rs-e1bMDM6luTiuLrhyphenhyphenA3uAtr0GsMxi7yBx4-V1mfaBInjrfoP7RBfx3N9xI4WHlViqaBdx_mPEdiLRKGM_49IxEqFQ05seaoMdghHenPg9lGM_OhyphenhyphentfFAGXRdpKqLWi6k74Jht5cK/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/AVvXsEh0aCXmfgRRqOSblvWpcMLqmLW6MT8_tYSTSWf6celn2CzgHjjthU0Tun5qhlapaMXc6tVt75Gy_NH7tWwE0N9RtyyvsQHn7In5naqvIA3-qZjWuBKsuX-NZ6nW10cOiCAUNWNhOmoC8IpE/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>

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

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

من فضلك اضغظ لايك لمشاهدة لينك التحميل

هام : هذا الموضوع ضمن تصنيفات المدونة زووم العربية نشكرك للمتابعة . يمكنك نقل الموضوع من المدونة لكن بشرط يجب ذكر المصدر و ذكر رابط الموضوع الاصلي قبل نقل أي موضوع المرجوا زيارة صفحة الخصوصية تحت ترخيص DMCA Protection