مساحة إعلانية

2015-11-15

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

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

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

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

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

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

ولتركيب هذه الإضافة لقالب مدونة بلوجر:
  • إذهب إلى لوحة تحكم بلوجر ثم تبويب قالب
  • قم بتحرير 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>

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

هناك 7 تعليقات

  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
      تابع حل هذه المشكلة فى الفقرة الأخيرة من هذا الموضوع
      تجاوب الفيديو
      وبإذن الله ستحل المشكلة

      حذف

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


لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"

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

تصميم كن مدون