شروحات: كيفية جعل مقاسات صور وفيديو يوتيوب في بلوجر متجاوبه مع جميع مقاسات شاشات الهواتف الذكيه

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

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

 فأنت بحاجة إلى الاهتمام ببعض الأشياء لتحسينها والتي ستساعدك على الحصول على مرتبة أعلى ومعرفة خوارزميات بحث Google ووظائفها؟

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

نظرًا للعدد المتزايد من الباحثين الذين يستخدمون أجهزة الجوّال ، أصبحت أهمية التصميم المتجاوب لقالب موقع الويب أمرًا ضروريًا الآن.

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

1. مواضيع استجابة

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

 يمكنهم إما تغيير حجمها تلقائيًا لتناسب شاشة الجهاز المحمول المستخدم أو يمكنك ضبط حجم الشاشة بنفسك. في كلتا الحالتين ، لديك خيار بسيط للغاية .

يمكنك فقط تنشيطه دون الاضطرار إلى حل مشكلة تعلم العبث بالتفاصيل التقنية.

2. إختبار تناسق موقعك مع الجوال Mobile Friendly

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

- الموقع الاول : Mobile Friendly

- المزقع  التاني : Mobile Friendly

- الموقع التالت : Mobile Friendly

- السرعة :

حيث ان نموذج الهاتف يتميز بسرعة تحميل ممتازة وقصيرة نسبيا لانه في نموذج الهاتف يتم حذف اكواد الجافا سكريبت وضغط اكواد css وتقليل جودة الصور ليتم التصفح بسهولة .

فقد اكدت الاحصائيات ان مستخدم الهاتف يمكنه الانتظار مدة 5 ثواني كحد اقصى لانتظار تحميل موقع بعكس مستخدم جهاز سطح المكتب الذي يمكنه الانتظار ضعف هذا الرقم 3 مرات .

› اصلاح صور ضبابية في قوالب بلوجر Blogger

3. جمال التصميم

النموذج المتجاوب يتميز بمحافظته على الوانه و جميع اكواده و التصاميم الخاص به , فهو مجرد ضبط لمقاسات العرض , اي انه يتم عرض القالب بكامل ادواته و تصميماته.

ولكن بمقاس اصغر بقليل من مقاس نموذج سطح المكتب , وهذا الامر يؤثر على سرعة التحميل ولكن ليس الى حد كبير .بعض من منصات التدوين التي لها سمات .

وقوالب سريعة الاستجابة هي باستخدام Bloggers.

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

4. كيفية جعل بلدي مدون قالب استجابة

يتم إطلاق Mobilegeddon أو الخوارزمية الجديدة من Google لتصنيف موقع مناسب للجوال رسميًا منذ 21 أبريل 2015. 

ستؤثر هذه الخوارزمية الجديدة على استعلامات البحث الخاصة بجهاز الجوال وليس لجهاز سطح المكتب والجهاز اللوحي. 

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

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

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

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

› طريقة التعديل او تغيير الرابط الثابت URL للمشاركات في بلوجر

6. ما هو قالب استجابة؟

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

 أو تغيير تخطيط قالب موقع الويب الخاص بك وفقًا لعرض جهاز محمول.

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

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

7. عامل في تصنيف محرك البحث

قامت Google بإخبار العالم بأهمية التصميم المتجاوب لموقع الويب للحصول على تأثير أفضل SEO. يقولون على موقع الويب الخاص بهم أنه اعتبارًا من 21 أبريل 2015 .

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

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

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

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

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

ربما لا تتأثر عائدات الإعلانات الخاصة بك ، بل ستتأثر أيضًا بمعدل المشاركة أو التحويل للزائرين.

› انشاء مدونة بلوجر بعد التحديثات الجديدة

8. تجربة أفضل للمستخدم

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

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

9. تعديل قالب للأجهزة المحمولة

عندما تقوم بتحسين مدونتك عن طريق تعديل القالب مباشرةً ، يجب عليك أيضًا مراعاة الزوار الذين يستخدمون أجهزة الجوّال لزيارة موقعك. تعديل قالب Blogger.

 للأجهزة المحمولة هو نفسه تعديل القالب العادي (الخطوات من 1 إلى 5 أعلاه) ، باستثناء أنك تحتاج إلى القيام بخطوة إضافية واحدة. يلزمك تعيين قالب الجوّال على Custom .

وإلا فلن تتمكن من رؤية أي تغييرات تجريها على أجزاء الجوال من القالب.افتراضيًا ، يتم تعيين قالب الجوال على القالب الافتراضي. لتعيينه على مخصص ، قم بما يلي:

<b:if cond='data:mobile'>

1- انقر فوق زر الإعدادات الموجود أسفل الهاتف المحمول.

2- سيؤدي هذا إلى فتح نافذة جديدة وبمجرد الوصول إلى هناك ، اختر "قالب مخصص للجوال" ضمن "اختيار قالب الجوال"

3- انقر فوق "حفظ" والآن أصبح جزء هاتفك المحمول من القالب جاهزًا لقبول أي تغييرات أو إضافات تقوم بها.

يقع رمز الجوال في القالب داخل عبارات مثل هذه :

لاختبار تعديلاتك ، لست بحاجة إلى التحقق من مدونتك على جهاز محمول ، يمكنك فقط إضافة؟ m = 1 في نهاية عنوان URL وسيعرض المتصفح إصدار الجوال من موقعك.

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

10. يمكن أن تزيد من الإيرادات

- موارد مفيدة
إذا كنت ترغب في معرفة المزيد حول التقنيات المذكورة أعلاه ، تحقق من الروابط أدناه:
- HTML و CSS
w3schools
- مدونة قالب المدون
عناصر الصفحة علامات للتخطيطات (من جوجل)
7 أنواع صفحات Blogger

-JSFiddle

- JSFiddle (تجربة مع javascript / jquery code في نافذة تفاعلية)

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

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

- الكود :

بعد ذلك سنضغط على زر " تحريربعد ذلك يتم العمل عل الكود التالي , نبحث عن الوسم

/b:skin> ونلصق فوقه الكود التالي :

   

<!-- CODE--> 

/*------start youtube responsive ------*/

.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  ------*/

<!--CODE--> 

› أفضل اكواد الميتا تاج Meta Tag Blogger

للمزيد من التوضيح الدرس فرجة ممتعة

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