أفضل طريقة لمشاهدة الفيديو على مدونتك turn off lights

بسم الله الرحمن الرحيم


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



لذا فالحل ستجده في هذا الموضوع و هو متمثل في سكريت 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/AVvXsEhH7VqyUzb7I8xFhuEiRd7ER20xUQRTNFBKuyhxbYSTIE8ABdb4Y7MqXMLMBOYGSIii1jWIeZToCCRtjTHDKpHR_ZltNnAsUgXb3QakPMNTfQAEymyQrAcBU0Ey59uLk_Kg_ZyaL9SlY7c/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/AVvXsEhwDtaoqnnkoW7rsZwNA9Ymccih_vhohPnAPV2D6DUbub5Ev8ptfjv6RoMI53eKm8rlr5rzKnqgFfclitVA3djP6FVqJUqISB3esT8MHpQmR_zGYI4NlyYgvtO4glrcBDgVgPiOuVxmJHo/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'/>


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


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


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


إن أعجبك الموضوع فأرجوا ألا تبخل علينا ب 5 ثوان من وقتك و تقوم بنشر الموضوع بين أصدقائك

إذا أعجبك الموضوع فشاركه مع أصدقائك فلن يأخد منك الأمر سوى 5 ثوان :)