U3F1ZWV6ZTIxMDc5MDI2NzIwX0FjdGl2YXRpb24yMzg3OTYyOTE2NTQ=
recent
أخبار ساخنة

اجعل فيديوهات اليوتيوب والصور في نافذة منبثقة دخل مدونة بلوجر

اجعل فيديوهات اليوتيوب والصور في نافذة منبثقة دخل مدونة بلوجر

السلام عليكم ، احبتي متابعي مدونة مركز التقنية للمعلوميات ، اليوم ان شاء الله سوف نقدم لكم خدمة في منتهى الروعة لكل المدونين والنشارين على مدونة بلوجر ، وهذه الاضافة التي سوف نقدم لكم جد سهلة ومتجاوبة مع جميع القوالب بدون استثناء ، كما انها سوف تساعد الزور في التركيز على الصورة او مشاهدة الفيديو بدرجة كبيرة عن السابق .
العديد من المدونين تنشر صور وفيديوهات دبرجة كبيرة جدا ولكن احيانا تاخذ لهم مساحة في داخل المواضيع ، وايضا الزوار احيانا ترغب في مشاهدة الصور الخاصة بالموضوع دفعة واحده دون الاطلاع على صورة بصورة وهذا يسبب التاخير لدى الزوار ، وطبعا هذه الاضافة ليست بالامر المهيـــــــــــم في المدونة ولكن ربما تكون اضافة جميلة جدا لأخذ الراحة في مشاهدة الفيديوهات على صندوق خارجي او مراقبة الصور دفعة واحدة واضحة . هذه الاضافة سوف يتم اضافتها في اثنين اماكن لا غير بنسبة للفيديوهات اما بنسبة لصور سوف تحتاج الى عملية واحده و إنتها ،العملية الاولى وهي كود خاص بصندوق المسمى Colorbox والذي سوف يكون سببا في ظهور الصور في صندوق منبثق بحجم مناسب للهواتف الذكية واجهزة الكمبيوتر ، وهذه الاضافة لا تحتاج الا لاضافة الصورة بدون اي اضافة ، اما بنسبة للفيديوهات يحتاج الى كود ثاني داخل المشاركات الذي سوف يظهر الفيديو على صندوق ليركز المشاهد على الفيديو بطريقة جيدة ومريحة.
 كيفية فتح الصور والفيديوهات على صندوق خارجي متجاوب مع جميع الاجهزة لمدونة بلوجر : 
تحتج الى هذه الاضافات التي سوف نشرح لكم في كيفية تركيبها على المدونة : اولا : يجب عليك الدخول الى القالب >> ثم تحرير html >> بعدها نبحث عن هذا الامر </head> ونضع فوقه الكود مباشرة .
<link href='https://cdn.rawgit.com/DrRO/colorbox/master/example1/colorbox.css' rel='stylesheet'/>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>  <script src='https://cdn.rawgit.com/DrRO/colorbox/master/jquery.colorbox.js'/>
<script type="text/javascript">
 // Make ColorBox responsive
 jQuery.colorbox.settings.maxWidth  = '95%';
 jQuery.colorbox.settings.maxHeight = '95%';
 // ColorBox resize function
 var resizeTimer;
 function resizeColorBox()
 {
  if (resizeTimer) clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    if (jQuery('#cboxOverlay').is(':visible')) {
      jQuery.colorbox.load(true);
    }
  }, 300);
 }
 // Resize ColorBox when resizing window or changing mobile device orientation
 jQuery(window).resize(resizeColorBox);
 window.addEventListener("orientationchange", resizeColorBox, false);
</script>
<script>
$(document).ready(function(){
$(&quot;a[rel=&#39;images&#39;]&quot;).colorbox({transition:&quot;fade&quot;});
$(&quot;a[rel=&#39;imagessamesize&#39;]&quot;).colorbox({transition:&quot;none&quot;, width:&quot;75%&quot;, height:&quot;75%&quot;});
$(&quot;a[rel=&#39;slideshow&#39;]&quot;).colorbox({slideshow:true});
$(&quot;.youtube&quot;).colorbox({iframe:true, innerWidth:760, innerHeight:520});
$(&quot;.vimeo&quot;).colorbox({iframe:true, innerWidth:760, innerHeight:520});
$(&quot;.iframe&quot;).colorbox({width:&quot;80%&quot;, height:&quot;80%&quot;, iframe:true});
$(&#39;a[href$=jpg]&#39;).colorbox();
$(&#39;a[href$=jpeg]&#39;).colorbox();
$(&#39;a[href$=png]&#39;).colorbox();
$(&#39;a[href$=gif]&#39;).colorbox();
$(&#39;a[href$=bmp]&#39;).colorbox();
$(&#39;a[href$=JPG]&#39;).colorbox();
$(&#39;a[href$=JPEG]&#39;).colorbox();
$(&#39;a[href$=pdf]&#39;).colorbox({iframe:true, innerWidth:760, innerHeight:520});
$(&#39;a[href$=swf]&#39;) .colorbox({iframe:true, innerWidth:660, innerHeight:420});
});
</script>
ملاحظة الاولى : اذا كنت تتوفر على مكتبة jQuery فى القالب قم بحذف كود ajax بللون الاحمر .
ملاحظة الثانية : قم بتوقيف خاصية Lightbox لتجنب فتح الصور مرتين .
اجعل فيديوهات اليوتيوب والصور في نافذة منبثقة دخل مدونة بلوجر
ثانيا : الان سوف اجعل الفيديوهات تظهر في صندوق خارجي منبثق سوف يكون لك اثنين اختياريا احترافية .
1- هذه العملية اذا تريد ان يظهر رابط النقر لظهور الفيديو بعد الضغط عليه في صندوق خارجي 
<a class="youtube" href="رابط  مباشر للفيديو على اليوتيوب" title="كيفية إنشاء رسوم المعلوميات">اضغط هنا لمشاهدة الفديو</a>
2 - هذا الكود سوف يظهر الفيديو بشكل صورة بالمقاس الذي تريد ثم بعد الضغط عليه سوف يظهر الفيديو في صندوق خارجي .
<a  class="youtube"  href="https://www.youtube.com/embed/rtIvfDl4azQ">
<img src="http://store1.up-00.com/2016-11/1478438883881.jpg "></a>
ملاحظة راقب الصورة في كيفية اخذ رابط الفيديو الذي سوف تستعمل .
اجعل فيديوهات اليوتيوب والصور في نافذة منبثقة دخل مدونة بلوجر
وختاما صديقي العزيز لا تنسى الاشتراك بقناة مركز التقنية للمعلوميات بالضغط على زر الاشتراك الموجود هنا 👇بأسفل التدوينة وتفعل زر الجرس 🔔 حتى تتوصل بجديد حلقات مركز التقنية وان كانت لديك حلقة خاصة ترغب في ان اقوم بها فقط اطلب ذلك في التعليق وسالبي طلبك ان شاء الله الى اللقاء.
الاسمبريد إلكترونيرسالة