شروحات: كيف تجعل مقاطع فيديو YouTube تستجيب في منشورات بلوجر أو مدونتك؟

كيف تجعل مقاطع فيديو YouTube تستجيب في منشورات بلوجر أو مدونتك؟

مرحبا بك عزيزي زائر في موقع الخاص بنا شروحات عند بدء التدوين وإنشاء مدونة في أحد المنصاة التدوين Blogger أو WordPress .

 مع تزايد الوصول إلى الإنترنت من أجهزة الجوال ، لم يعد يكفي أن يكون لديك تصميم موقع ويب ثابت يبدو جيدًا فقط على شاشة الكمبيوتر.

ناهيك عن أنه يتعين عليك أيضًا التفكير في الأجهزة اللوحية وأجهزة الكمبيوتر المحمولة 2 في 1 ونماذج الهواتف الذكية المختلفة ذات أبعاد الشاشة المختلفة عند الخروج بتصميم.

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

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

وهذا التحسن في تجربة المستخدم يعني زيادة التحويلات ونمو الأعمال.

عند بدء التدوين وإنشاء مدونة بلوجر blogSpot. فأنت بحاجة إلى الاهتمام ببعض الأشياء لتحسينها والتي ستساعدك على الحصول على مرتبة أعلى في محركات البحث مثل Google و Bing.و Yandex.

» أقرأ أيضا : 

- كيفية إنشاء او أخد نسخة احتياطية كاملة من مدونة Blogger (Blogspot)

- طرق تسريع موقع الويب الخاص بك » ضغط وتقليص حجم الصور لتسريع التصفح الصفحات

- تعديل على المقاييس أحجام الصور والفيديوهات مواضيعك على بلوجر لتصدر نتائج البحت

- تقديم عام 

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

كيفية جعل فيديو YouTube مستجيبًا في موقع Blogger؟ اجعل فيديو YouTube الخاص بك يستجيب في قالب Blogger باستخدام CSS Script بسيط لاعتماد أي حجم على أي جهاز.

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

ولكن بعد الاستخدام السريع للهواتف الذكية ، أصبحنا الآن ملزمين باستخدام تصميم ويب سريع الاستجابة.يساعد تصميم الويب سريع الاستجابة في اعتماد أي حجم على أي نوع من الأجهزة.

هذه حقا تقنيات رائعة. ولكن إذا كان نموذجك أو تصميم الويب الخاص بك سريع الاستجابة ، فلن يكون كل عنصر أو أدوات مستجيبة.في هذه الحالة .

يجب أن نتخذ خطوات إضافية لجعلها مستجيبة.

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

1- ما هو تصميم الويب سريع الاستجابة؟

التصميم سريع الاستجابة هو أسلوب لتصميم الويب يجعل محتوى الويب الخاص بك يتكيف مع أحجام الشاشة والنوافذ المختلفة لمجموعة متنوعة من الأجهزة.

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

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

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

لا يكفي أن يبدو موقع الويب الخاص بك جيدًا على شاشة الكمبيوتر. 🖥 الأجهزة اللوحية وأجهزة الكمبيوتر المحمولة 2 في 1 والهواتف الذكية كلها جزء من المعادلة ...

 ويغطي هذا الدليل كل ما تحتاج لمعرفته حول التصميم سريع الاستجابة

2- تصميم الويب سريع الاستجابة مقابل التصميم التكيفي

الفرق بين التصميم سريع الاستجابة والتصميم التكيفي هو أن التصميم سريع الاستجابة يتكيف مع عرض إصدار صفحة واحدة. في المقابل .

يوفر التصميم التكيفي عدة إصدارات مختلفة تمامًا من نفس الصفحة.

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

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

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

» أقرأ أيضا :

- حل مشكلة بروتوكول https وعدم ضهور قفل الاخضر Secure

- اصلاح الصور الضبابية أوالباهتة أو الصور المصغرة في قوالب بلوجر Blogger

- طريقة التعديل او تغيير الرابط الثابت URL للمشاركات في بلوجر من أجل SEO 2

- كيفية جعل مقاسات صور وفيديو يوتيوب في بلوجر متجاوبه

3- لماذا يهم التصميم المستجيب

إذا كنت جديدًا في تصميم الويب أو التطوير أو التدوين ، فقد تتساءل عن سبب أهمية التصميم سريع الاستجابة في المقام الأول.

الجواب بسيط. لم يعد يكفي التصميم لجهاز واحد. تجاوزت حركة مرور الويب عبر الأجهزة المحمولة سطح المكتب وتشكل الآن غالبية حركة مرور موقع الويب ، حيث تمثل أكثر من 51٪.

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

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

أخيرًا ، على مدار السنوات القليلة الماضية ، أصبح الهاتف المحمول أحد أهم القنوات الإعلانية. حتى في سوق ما بعد الجائحة ، ينمو الإنفاق على إعلانات الهاتف المحمول بنسبة 4.8٪ ليصل إلى 91.52 مليار دولار.

سواء اخترت الإعلان على وسائل التواصل الاجتماعي أو استخدام نهج عضوي مثل YouTube SEO ، فإن الغالبية العظمى من حركة المرور الخاصة بك ستأتي من مستخدمي الهاتف المحمول.

إذا لم تكن صفحاتك المقصودة مُحسَّنة للجوّال وسهلة الاستخدام ، فلن تتمكن من زيادة عائد الاستثمار لجهودك التسويقية. ستؤدي معدلات.

التحويل السيئة إلى تقليل عدد العملاء المحتملين وإهدار الإنفاق الإعلاني.

- أقرأ أيضا :

- كيف عمل روابط داخلية لتحسين السيو لتقوية أرشفة مدونة بلوجر لتصدر محركات البحت
- شرح كيف تنشر المقالات بالبريد الإلكتروني في بلوجر - اعدادات بلوجر الجزء الثالث 2020
- كيفية كتابة مقال متوافق مع السيو SEO لتصدر محركات البحث

4- في النهاية ، لن تعمل استجابة النموذج الخاص بك.

لذلك سأشارك البرنامج التعليمي لإنشاء فيديو على YouTubeسريع الاستجابة وسيعتمد تلقائيًا أي حجم على أي جهاز. لقد استخدمت رمز CSS بسيطًا لجعل فيديو YouTube سريع الاستجابة.

• لجعل فيديو YouTube مستجيبًا ، يمكنك إضافة
• التعليمات البرمجية التالية إلى ملف CSS الأساسي الخاص بنموذج Blogger أو ورقة الأنماط
• يتم تطبيقها على موقعك. ما عليك سوى اتباع الخطوات التالية-

1.  الخطوة 1 قم بتسجيل الدخول إلى حساب Blogger الخاص بك
2. وانتقل إلى لوحة تحكم Blogger
3. الخطوة 2 انقر فوق -> Template EditHTML
4. الخطوة 3 الآن ابحث عن]]> </ b: skin> بالضغط على Ctrl + F (Windows) أو CMD + F (Mac)
5. الخطوة 4 انسخ البرنامج النصي من الأسفل والصقه أعلاه / قبل]]> </ b: skin>

.tubevideo {

    position: relative;

    padding-bottom: 56.25%;

    padding-top: 30px; height: 0; overflow: hidden;

}

.tubevideo iframe,

.tubevideo object,

.tubevideo embed {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

6- الخطوة 7: اضغط على زر حفظ القالب من الأعلى.

7- إذا كنت ترغب في استخدام نص CSS أعلاه في صفحة معينة

8- ثم أضف كود CSS داخل علامة <style>.

<style>

CSS script Here…

</style>

لقد أضفنا نص CSS والآن سنضيف HTML

برنامج نصي لعرض فيديو YouTube بتقنيات سريعة الاستجابة.

5- كيفية عرض فيديو يوتيوب في Blogger Blog Post؟

1. الخطوة 1 انتقل إلى لوحة تحكم Blogger وانقر فوق الزر منشور جديد لإنشاء محتوى جديد أو تحرير أي منشور.
2. الخطوة 2 من محرر النشر ، قم بالتبديل للعرض من طريقة عرض الإنشاء.
3. الخطوة 3 الآن انسخ نص HTML أدناه والصقه في محرر النشر أثناء عرض HTML.
4. 
   

<div class="tubevideo">

<iframe width="560" height="315" src="https://www.youtube.com/embed/aom_UhSlhAo" frameborder="0" allowfullscreen></iframe>

</div>

» أقرأ أيضا :

- تغيير الحجم التلقائي للصور والفيديوهات لملاءمة منطقة المشاركة في Blogger

- شرح واجهه بلوجر الجديده بعد التحديثات الاخيرة

- كيفية إعداد علامات رؤوس مخصصة للروبوتات في Blogger Header Tags

6- الكود المستعمل في الحلقة 

- استنتاج : التجاوب جانب مهم من القالب يجب الاهتمام به و اخذه بعين الاعتبار فزوارك يحتاجون الى قالب يسمح لهم بتصفح موقعك في اي مكان وبأي جهاز , فحاول ان توفر لهم مايحتاجونه .

واذا كنت مبتدئا في التعامل مع اكواد css فجرب ان تتعلمها من تتعرف على كيفية التعامل معها , لتصنع في المستقبل قالبك الخاص .

- الكود :

بعد ذلك سنضغط على زر " تحريربعد ذلك يتم العمل عل الكود التالي , نبحث عن الوسم/b:skin> ونلصق فوقه الكود التالي :

   

<!-- CODE by www.chrohat.com--> 

/*------start youtube responsive chrohat.com ------*/

.video-container {

 position: relative;

 padding-bottom: 56.25%;

 padding-top: 30px;

 height: 0;

 overflow: hidden;

}

.video-container iframe,  

.video-container object,  

.video-container embed {

 position: absolute;

 top: 0;

 left: 0;

 width: 100%;

 height: 100%;

}

.entry-content img, 

.entry-content iframe, 

.entry-content object, 

.entry-content embed {

        max-width: 100%;}

/*------end youtube responsive chrohat.com ------*/

<!--CODE by www.chrohat.com--> 

- استنتاج

ستعمل هذه التقنية على تقليل حجم صفحة الويب الخاصة بك بمقدار 350 كيلو بايت إلى 400 كيلو بايت مع جعل موقع الويب الخاص بك مستجيبًا.

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

- إليك أبرز حلول 

- الحل النهائي لمشكلة مسارات التنقل مخطط data-vocabulary.org متوقف فى بلوجر
- حل مشكلة مسار التنقل data-vocabulary.org وتصحيح خطأ Breadcrumb أدوات مشرفي المواقع
- حل مشكلة يجب تحديد name أو item.name في ادوات مشرفي المواقع تفدي تجاهل محركات البحث
- حل مشكلة تم اكتشاف البيانات المنظّمة غير قابلة للتحليل في بلوجر

للمزيد من التوضيح كما عودناكم على مدونة شروحات للمعلوميات شروحات دائما مرفوقة بالدرس فرجة ممتعة

• موقع مستعمل لمعرفة إن كانت مدونتك متجاوبة مع جميع الأجهزة Responsive :
• الموقع الاول : Mobile Friendly
• المزقع  التاني : Mobile Friendly
• الموقع التالت : Mobile Friendly
• يمكن مشاهدة :  مدونة بلوجر