دليل المدون

2015-11-15

إضافة تجعل جميع فيديوهات مدونتك على بلوجر متجاوبة

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

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

Responsive video
بالرغم من انه من الضرورى إستخدام قالب متجاوب لموقعك ليظهر بشكل جيد للمستخدمين الذين يتصفحون موقعك من خلال الهواتف المحمولة إلا أنه لابد من مراعاة أن يكون المحتوى أيضًا متجاوب بما يضمه من نصوص وصور وفيديوهات وجداول ،.......وغير ذلك . وقد تحدثت فى موضوع سابق عن كيفية جعل الفيديو متجاوب لجميع الشاشات والتى تعتمد على إضافة كود CSS قبل كود الفيديو ولكن اليوم سأتحدث عن إضافة بتقنية jQuery تسمى Fitvids plugin تضاف إلى القالب.

قد يهمك أيضًا: كيفية إخفاء وإظهار ادوات  مدونة بلوجر على الهاتف

https://www.tubebuddy.com/condaianllkhir
ولتركيب هذه الإضافة لقالب مدونة بلوجر:
  • إذهب إلى لوحة تحكم بلوجر ثم تبويب قالب
  • قم بتحرير HTML للقالب (ولا تنسى الإحتفاظ بنسخة إحتياطية من القالب)
  • إبحث عن الكود التالى بإستخدام لوحة المفاتيح Ctrl+F
  </head>
  • أضف الكود التالى مباشرة فوق الكود السابق
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"/>
<script src='https://raw.github.com/davatron5000/FitVids.js/master/jquery.fitvids.js'/>
<script>$(document).ready(function(){
$(“#your-video”).fitVids(); });
</script>
  • إحفظ القالب
  • عند تضمين أى فيديو داخل مشاركة أو صفحة أضف الكود التالى قبل كود تضمين الفيديو بتبويب HTML المشاركة أو الصفحة.
<div id=”your-video”>

مثــــــــــال

<div id=”your-video”>
<iframe width="1280" height="720" src="https://www.youtube.com/embed/wQOAfLZqB_0?rel=0" frameborder="0" allowfullscreen></iframe>

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

هناك 12 تعليقًا

  1. السلام عليكم
    كيف يمكن اضافة اشارة صح بجانب الكلام وشكرا
    وهل يمكن تحديد مواضيع كل كاتب في المدونة اذا كان هناك اكثر من كاتب
    وشكرا

    ردحذف
    الردود
    1. يمكن ذلك من خلال تنسيق العناوين "عنوان فرعى،عنوان ثانوى" ويتضاف هذه التنسيقات بتحرير القالب والبحث عن هذا الكود ]]></b:skin> ثم لإضافة الكود التالى فوقه

      .post h2 {
      background: url("https://lh6.googleusercontent.com/-cI_uj9QiJdM/UPHMj9S18WI/AAAAAAAAAF0/8PYiikitO6s/s16/sah-icon.png") no-repeat scroll right center transparent;
      color: #000;
      font-size: 18px;
      font-weight: bold;
      padding-right:25px;
      }
      ثم عند كتابة المشاركة تحديد عنوان فرعى على النص الذى تريد تنسيقه مع ملاحظة أنه فى بعض القوالب يكون يأخذ العنوان الفرعى وسوم h3 فعليك تبديل h2 فى الكود السابق إلى h3

      وبالنسبة لتحديد مواضيع كل كاتب.. بالفعل يمكن تحديد مواضيع كل كاتب على حده

      حذف
    2. ياريت الطريقة لتحديد مواضيع كل كاتب ولك جزيل الشكر

      حذف
    3. سأحاول طرح هذا الموضوع فى الفترة القادمة بإذن الله

      حذف
  2. مشكور بارك الله بك

    ردحذف
  3. هنالك بعض انواع الفيديوهات لا تتجاوب مثلهدا الكود
    IFRAME SRC="http://moshahda.net/embed-zj1t4u2ifb9q-640x272.html" FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=NO WIDTH=640 HEIGHT=272></IFRAME

    هل من حل لهده المشكلة

    ردحذف
    الردود
    1. ممكن يكون بسبب تعارض بين إضافة جى كيورى بقالب موقعك مع هذا الكود ..لذلك يمكن إستخدام تقنية CSS
      تابع حل هذه المشكلة فى الفقرة الأخيرة من هذا الموضوع
      تجاوب الفيديو
      وبإذن الله ستحل المشكلة

      حذف
  4. طيب لو سمحت انا حابه أضيف الفيديوهات من جهاز الكمبيوتر الخاص بيا مباشرة بس كل ما بنزل فيديو في المدونه من الجهاز بيبقي مفيش فيه زر إختيار الجوده وبالتالي بتكون جودة الصوره فيه رديئه فهل في حل للمشكله دي وخصوصا انه انا في فيديوهات مش بنزلها على اليوتيوب ولكن هى موجوده عندي فقط على جهازي وبالتالي معنديش حل غير اني ارفعها من الجهاز مباشرة مع العلم ان الفيديو في جهازي تكون جودته عاليه hd

    ردحذف
    الردود
    1. ممكن تقوم برفع الفيديو على حسابك على جوجل درايف ثم إدراجه بالموقع داخل iframe

      حذف
  5. اولا شكرا على هذا الشرح الاكثر من رائع

    ثانيا الطريقه دى منجحتش معايا ولا حتى طريقه الفيديو المتجاوب مش عارف ليه

    ثالثا فيه اداه اسمها resise دى بشوفها فى مواقع كتيره لو ينفع تنضاف قبل اى فيديو يبقي تمام

    ارجو الاهتمام برسالتى وشكرا

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

    ردحذف
  7. برك لله فيك اخي

    ردحذف

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

Privacy-Policy | إعلن لدينا
جميع الحقوق محفوظة لــ كن داعيا للخير 2011-2022 ©

تصميم كن مدون