اطفاء وتشغيل ضوء لمشاهدة الفيديو على مدونتك بلوجر

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

لذا فالحل ستجده في هذا الموضوع و هو متمثل في سكريت JQuery يسمح لك بأن تحيط الفيديو بظا أسود داكن لتحجب باقي محتوى الموقع و تحصل بذالك على مشاهدة شبيه بالسنما :-)


1- توجه لتحرير قالب المدونة و ابحث عن الوسم </head> ثم ضع فوقه الكود التالي:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <br /><script type='text/javascript'> <br />//<![CDATA[ <br />$(document).ready(function(){ <br />$("#oscuridad").css("height", $(document).height()).hide(); <br />$(".lightSwitcher").click(function(){ <br />$("#oscuridad").toggle(); <br />if ($("#oscuridad").is(":hidden")) <br />$(this).html("إطفاء النور").removeClass("turnedOff"); <br />else <br />$(this).html("تشغيل النور;).addClass("turnedOff"); <br />}); <br />}); <br />//]]> <br /></script>

2- ثم بعد ذالك إبحث عن الوسم ]]></b:skin> و أضف قبله الكود التالي:

 /* turn off lights <br />----------------------------------------------- */ <br />#videoLuces { <br />position:relative; <br />z-index:102; <br />} <br />#apagador { <br />max-width:640px; <br />text-align:left; <br />position:relative; <br />height:25px; <br />display:block; <br />margin: 25px 0 0 60px; <br />} <br />.lightSwitcher { <br />position:absolute; <br />z-index:101; <br />background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Nmloaq4cLni_yPaDrIXdUPeOJ4HhMwx_6G-jD5HqcJwuJfH4INjCj5TFAutfBZ9m69PoizkC1ojl6vtoYLfJkVLWEmh9eCaQEwmSA0oFE4EfFNg5ne-wmSJ62Ulwg_JwInu02ztqoG0/s16/luces-on.png); <br />background-repeat:no-repeat; <br />background-position:left; <br />padding: 0 0 0 20px; <br />outline:none; <br />text-decoration:none; <br />} <br />.lightSwitcher:hover {text-decoration:underline;} <br />.turnedOff { <br />color:#ffff00 !important; <br />background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwwvKyFd7tFlNypToqCYBoj6aX1xFAvhsPOpf-I9SizVAjaX8zQ3Vm-xo32O2VJqPu43C0GPKcgCSd3GZ9SDfpnCFdMqwtadrmpfZWTsuLhat0ZpJvj6dNwmw1RfynSCDxsl00y1Ixn1U/s16/luces-off.png); <br />} <br />#oscuridad { <br />background:#000; <br />opacity:0.9; <br />filter:alpha(opacity=90); <br />position:absolute; <br />left:0; <br />top:0; <br />width:100%; <br />z-index:100; }
3- و أخيرا ابحث عن الوسك </body> و أضف قبله الكود التالي:


<div id='oscuridad'/>


- الأن نأتي للخطوة الأخيرة و هي إضافة الفيديو و أعتقد أن الجميع يعرفون الطريقة. الأن بعد أن تضيف الفيديو في موضوع جديد نتجه لتبويب تحرير HTML و نضع الكود التالي بحيث يكون الفيديو بينه.

<center> <div id="apagador"><a class="lightSwitcher" href="javascript:void(0);">إطفاء 
النور;/a></div> <div id="videoLuces"> ...سيكون الفيديو في هذا المكان... </div> </center>



هذه الإضافة الجميلة كما اتمنى أن تروق لك.