مدونة مركز التقنية للمعلوميات : حلقات مصورة حماية صيانة الربح من الانترنيت مدونة  مركز التقنية للمعلوميات : حلقات مصورة حماية صيانة الربح من الانترنيت
recent

آخر الأخبار

recent
random
جاري التحميل ...

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

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

السلام عليكم ، احبتي متابعي مدونة مركز التقنية للمعلوميات ، اليوم ان شاء الله سوف نقدم لكم خدمة في منتهى الروعة لكل المدونين والنشارين على مدونة بلوجر ، وهذه الاضافة التي سوف نقدم لكم جد سهلة ومتجاوبة مع جميع القوالب بدون استثناء ، كما انها سوف تساعد الزور في التركيز على الصورة او مشاهدة الفيديو بدرجة كبيرة عن السابق .
العديد من المدونين تنشر صور وفيديوهات دبرجة كبيرة جدا ولكن احيانا تاخذ لهم مساحة في داخل المواضيع ، وايضا الزوار احيانا ترغب في مشاهدة الصور الخاصة بالموضوع دفعة واحده دون الاطلاع على صورة بصورة وهذا يسبب التاخير لدى الزوار ، وطبعا هذه الاضافة ليست بالامر المهيـــــــــــم في المدونة ولكن ربما تكون اضافة جميلة جدا لأخذ الراحة في مشاهدة الفيديوهات على صندوق خارجي او مراقبة الصور دفعة واحدة واضحة . هذه الاضافة سوف يتم اضافتها في اثنين اماكن لا غير بنسبة للفيديوهات اما بنسبة لصور سوف تحتاج الى عملية واحده و إنتها ،العملية الاولى وهي كود خاص بصندوق المسمى 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>
ملاحظة راقب الصورة في كيفية اخذ رابط الفيديو الذي سوف تستعمل .
اجعل فيديوهات اليوتيوب والصور في نافذة منبثقة دخل مدونة بلوجر
وختاما صديقي العزيز لا تنسى الاشتراك بقناة مركز التقنية للمعلوميات بالضغط على زر الاشتراك الموجود هنا 👇بأسفل التدوينة وتفعل زر الجرس 🔔 حتى تتوصل بجديد حلقات مركز التقنية وان كانت لديك حلقة خاصة ترغب في ان اقوم بها فقط اطلب ذلك في التعليق وسالبي طلبك ان شاء الله الى اللقاء.
زائرنا الكريم : رجاءآ لاتنسى الاشتراك بقناتنا تشجيعآ لنا لتقديم الافضل وحتى يصلك كل جديد
  
شكرا لك .. الى اللقاء 
*
*
بقلم :عبد المجيد الكومي

بقلم : عبد المجيد الكومي

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

التعليقات


  • لاتنسى الاعجاب بصفحتنا عبر الفيس بوك لمتابعتة كل جديد وايضا من اجل التواصل معنا بشكل مباشر ومستمر.

    تابع
  • يمكنك الان متابعتنا عبر جوجل بلاس وارسال مقترحاتك وايضا حتى يصلك جميع الموضوعات الحصرية فور نشرها.

    تابع
  • تواصل دائما مع اصدقاء يشاركونك نفس الاهتمامات وذلك من خلال متابعة صفحتنا الرسمية عبر تويتر.

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

    تابع

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

جميع الحقوق محفوظة

مدونة مركز التقنية للمعلوميات : حلقات مصورة حماية صيانة الربح من الانترنيت

Mohon Aktifkan Javascript!Enable JavaScript