كيفية جعل مقاسات صور وفيديو يوتيوب في بلوجر متجاوبه مع جميع مقاسات شاشات الهواتف الذكيه
مرحبا بك عزيزي زائر في موقع الخاص بنا شروحات عند بدء التدوين وإنشاء مدونة في أحد المنصاة التدوين Blogger أو WordPress .
فأنت بحاجة إلى الاهتمام ببعض الأشياء لتحسينها والتي ستساعدك على الحصول على مرتبة أعلى ومعرفة خوارزميات بحث Google ووظائفها؟
يتزايد تصفح الإنترنت باستخدام الأجهزة المحمولة كما تقول الإحصاءات. مع هذا ، يمكننا القول أنه في المستقبل القريب ، ستتولى الأجهزة المحمولة تصفح الإنترنت.
نظرًا للعدد المتزايد من الباحثين الذين يستخدمون أجهزة الجوّال ، أصبحت أهمية التصميم المتجاوب لقالب موقع الويب أمرًا ضروريًا الآن.
فأنت بحاجة إلى الاهتمام ببعض الأشياء لتحسينها والتي ستساعدك على الحصول على مرتبة أعلى في محركات البحث مثل Google و Bing.و Yandex.
مجموعة من الأدوات الخاصة بها لتحسين مواقع الويب.
وهذا يعني أن كل مشرفي المواقع أو مالكي مواقع الويب أصبحوا مطالبين الآن بجعل قالب مواقع الويب الخاصة بهم مستجيبة كما قال محرك البحث الرائد (Google).
- أقرأ أيضا : كيفية إصلاح مشكلة الصورة المصغرة الضبابية في موقع بلوجر Blogger بدون أكود
- تقديم عام :
في هذه الأيام ، يعد جعل مدونة مدوّنة على الهاتف المحمول أحد أفضل الأشياء التي يمكنك القيام بها لكسب أكبر عدد ممكن من الزيارات والحفاظ عليها.
وفقًا لأبحاث السوق ، فإن استخدام الإنترنت عبر الهاتف المحمول تجاوز منذ وقت طويل أرقام سطح المكتب بحلول عام 2014. أكثر من ذلك .
تشير البيانات إلى أن المستخدمين يقضون وقتًا أطول على الإنترنت باستخدام أجهزتهم المحمولة بدلاً من الأدوات الذكية مثل أجهزة الكمبيوتر المحمولة أو أجهزة الكمبيوتر الشخصية.
وبالرغم من أن بعض المواقع التى تمتلك قالب ذو تصميم جيد ومنسق على شاشة الكمبيوتر إلا أنه فى بعض الأحيان تجد قالب.
نفس الموقع يظهر بشكل غير منسق على شاشات أجهزة الهواتف .
الذكية مما يفقد الموقع العديد من الزوار وبالتالى يؤثر تأثير سلبى على إحصائيات الموقع، هذا بالإضافة إلى أن المواقع ذات القوالب الغير متجاوبة .
تؤثر بالسلب على الترتيب فى جوجل بعد إضافة ميزة جملة " مناسب للجوال" .
فإن جعل مدونتك الإلكترونية على الهاتف المحمول ليس مجرد خيار بعد الآن. لقد أصبح ضرورة ، لا سيما إذا كنت تبحث عن تسييل موقعك.قبل أن نصل إلى الطريقة .
دعونا أولاً نوضح بعض الأشياء. إن جعل مدونتك على الهاتف المحمول سهلاً يتأكد بشكل أساسي من أن الصفحة والمحتوى والقوائم التي يراها القراء عندما يزورون مدونتك.
على أجهزتهم هي الأمثل لشاشات العرض الصغيرة والتحكم باللمس.لن تقطع الواجهة المستخدمة على أجهزة الكمبيوتر المكتبية الهواتف الذكية.
ويعزى ذلك إلى حد كبير إلى عدم وجود العديد من الأزرار والمفاتيح. ستحتاج بالتالي إلى التأكد من:
اليوم سنتحدث عن التجاوب ومبادئ التعامل معه وطريقة التعديل على القالب ليصبح متجاوبا , فهذا الامر مهم جدا كما ذكرنا سابقا ,
التجاوب و نموذج الهاتف مصطلحان يختلفان عن بعضهما كل الاختلاف , ويمكن تلخيص اوجه الاختلاف في نقطتين اساسيتين هما :
- أقرأ أيضا : حل مشكلة بروتوكول https وعدم ضهور قفل الاخضر Secure
1- مواضيع استجابة
بناءً على نظام التدوين الذي ستستخدمه ، قد يكون لديك بالفعل إمكانية الوصول إلى سمات أو قوالب سريعة الاستجابة تهدف إلى جعل مدونتك أكثر سهولة في التنقل.
يمكنهم إما تغيير حجمها تلقائيًا لتناسب شاشة الجهاز المحمول المستخدم أو يمكنك ضبط حجم الشاشة بنفسك. في كلتا الحالتين ، لديك خيار بسيط للغاية .
يمكنك فقط تنشيطه دون الاضطرار إلى حل مشكلة تعلم العبث بالتفاصيل التقنية.
2- الموقع المستعمل لإختبار تناسق موقعك مع الجوال Mobile Friendly :
الموقع المستعمل لمعرفة إن كانت مدونتك متجاوبة مع جميع الأجهزة Responsive :
- الموقع الاول : Mobile Friendly
- المزقع التاني : Mobile Friendly
- الموقع التالت : Mobile Friendly
- السرعة :
حيث ان نموذج الهاتف يتميز بسرعة تحميل ممتازة وقصيرة نسبيا لانه في نموذج الهاتف يتم حذف اكواد الجافا سكريبت وضغط اكواد css وتقليل جودة الصور ليتم التصفح بسهولة .
فقد اكدت الاحصائيات ان مستخدم الهاتف يمكنه الانتظار مدة 5 ثواني كحد اقصى لانتظار تحميل موقع بعكس مستخدم جهاز سطح المكتب الذي يمكنه الانتظار ضعف هذا الرقم 3 مرات .
3- جمال التصميم :
النموذج المتجاوب يتميز بمحافظته على الوانه و جميع اكواده و التصاميم الخاص به , فهو مجرد ضبط لمقاسات العرض , اي انه يتم عرض القالب بكامل ادواته و تصميماته.
ولكن بمقاس اصغر بقليل من مقاس نموذج سطح المكتب , وهذا الامر يؤثر على سرعة التحميل ولكن ليس الى حد كبير .بعض من منصات التدوين التي لها سمات .
وقوالب سريعة الاستجابة هي WordPress و Bloggers. باستخدام WordPress ، يمكنك الانتقال إلى علامة التبويب تخصيص وتغيير السمة وفقًا لما تحتاجه.
مع Blogger ، كل ما عليك فعله هو تكييف القالب الملائم للجوال ، والذي سيعتني بالباقي.
4- كيفية جعل بلدي مدون قالب استجابة
يتم إطلاق Mobilegeddon أو الخوارزمية الجديدة من Google لتصنيف موقع مناسب للجوال رسميًا منذ 21 أبريل 2015.
ستؤثر هذه الخوارزمية الجديدة على استعلامات البحث الخاصة بجهاز الجوال وليس لجهاز سطح المكتب والجهاز اللوحي.
لذلك فإن جعل قالب المدون الخاص بنا متجاوبًا هو دعوة للعملإن تطبيق التصميم المتجاوب على قالب المدون لدينا ليس بالمهمة السهلة.
يجب أن نعرف أساسيات HTML و CSS لجعل الأمور في نصابها الصحيح في قالب المدون الخاص بنا. ومع ذلك . إذا لم تكن لديك أي معلومات عن HTML و CSS.
يمكنك زيارة w3schools وهو موقع جيد لتعلم تطوير الويب الأساسي.أعرف أن معظمنا يدرك أهمية التصميم المتجاوب لكبار المسئولين الاقتصاديين وتجربة المستخدم.
ولكن هل تعلم أن معظم الإحصاءات تشير إلى أن استخدام الويب للجوال سيتولى قريبا استخدام سطح المكتب؟ لذلك دعونا نبدأ في جعل قالب المدون الخاص بنا متجاوبًا لأنه كبير.
- أقرأ أيضا : طريقة التعديل او تغيير الرابط الثابت URL للمشاركات في بلوجر من أجل SEO 2
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
- مدونة قالب المدون
- JSFiddle (تجربة مع javascript / jquery code في نافذة تفاعلية)
- استنتاج : التجاوب جانب مهم من القالب يجب الاهتمام به و اخذه بعين الاعتبار فزوارك يحتاجون الى قالب يسمح لهم بتصفح موقعك في اي مكان وبأي جهاز , فحاول ان توفر لهم مايحتاجونه .
واذا كنت مبتدئا في التعامل مع اكواد css فجرب ان تتعلمها من تتعرف على كيفية التعامل معها , لتصنع في المستقبل قالبك الخاص .
- الكود :
بعد ذلك سنضغط على زر " تحريربعد ذلك يتم العمل عل الكود التالي , نبحث عن الوسم
/b:skin> ونلصق فوقه الكود التالي :
للمزيد من التوضيح كما عودناكم على مدونة شروحات للمعلوميات شروحات دائما مرفوقة بالدرس فرجة ممتعة
- موقع مستعمل لمعرفة إن كانت مدونتك متجاوبة مع جميع الأجهزة Responsive :
- الموقع الاول : Mobile Friendly
- المزقع التاني : Mobile Friendly
- الموقع التالت : Mobile Friendly
- كيف إنشاء : مدونة بلوجر
- متابعة حلقات : سيو SEO
ياخى لمدا انت مضيف رابط مدونتك وقناتك في الكود. عندا نسخ هاده الاكواد واضفتها في قالب شخص اخر تحصل له مشكلة مع ادسنس او محركات البحث وقد تتوقف الاعلانات بعدا اضافت الكود الى القالب ؟؟؟
ردحذفسوف اعدل على الاكواذ اخي
حذفإرسال تعليق