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

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


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



لذا فالحل ستجده في هذا الموضوع و هو متمثل في سكريت 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/AVvXsEiNFfy1cG9c_L6BBMCDSgPs3aJZ3JsjKQzbgdVzfmNXnRwGpRLq79HzcicY8WedeWaDNkzZsPzfba79tyWJEZ475U6_o__fx0vFXdvVbgp3lR5IitqXIconybkcR18uargjayLIB9LwZO4/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/AVvXsEg7-QMyARhUidWcmzZev80EBhAzp6Y9oj8Wd2LVIVf8rt316RVZlGtkgDZ9y0Xbg2E-yiXzgKE3nLhH2h1i_RZ5fgUeoR_xuQyWw6MDSCwruuq4pv_VmAwiztvzYM5W8vXqmdFDm-0xDck/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>

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