شرح كيفية برمجة و جعل قالب مدونة بلوجر متجاوب
 |
| blogger |
بعد التحديث الأخير الذي قمت به شركة جوجل لخوارزمياتها الجديدة ( Mobilegeddon والتي تنص على معاقبة أي موقع أو مدونة لم يقم صاحبها بتهيئها لكي تدعم الجوال . الشيء الذي سيؤدي بهذه الموقع إلى ترجع ترتيبها في محرك البحث جوجل ما سيؤدي إلى حرمانها من عدد كبير من الزوار القادمين من محرك البحث جوجل على عكس المواقع التي تدعم التصفح من خلال الجوال والأجهزة المحمولة الأخرى
تحسين وتعديل اي قالب مدونة بلوجر كي يصبح سريعا في هواتف دكية نتائج البحث فيديوهات
أترككم مع الشرحافضل طريقة لجعل قالب مدونتك بلوجر متجاوب ويدعم جميع الهواتف والأجهزة الذكية:اصبح الان المستخدم على خلاف السنوات الماضية يستعمل الاجهزة الذكية "android" الكمبيوتر اللوحي اكثر من الحواسيب المكتبية والمحمولة ولهذا اصبح منشئي المحتوى منهم اصحاب المواقع والمدونات يعيرون اهتماما باستهداف مستخدمين هذه الاجهزة للوصول الى عدد اكبر من الزوار وتوصيل اعلاناتهم لاكبر عدد من المستخدمين للحصول على ارباح جيدة، ولا ننسى محركات البحث اهمها جوجل فمن الضروري ان يسعى الى الاستيلاء على مستخدمين هذه الاجهزة
ليبقى في الريادة والزم على اصحاب المواقع والمدونات باستهداف ميتخدمين هذه الاجهزة فقد طور كل معداته ومنتجاته منها الاعلانية وغيرها فمثلا جوجل ادسنس في السابق كانت لديه شفرات اعلانية للهواتف الذكية متجاوبة واضاف ميزات اخرى حينما اضاف خاصية تحسين في صفحته التي اعدها للمشتركين،بحيث وضع شفرات صفحات خاصة للهواتف الذكية لا تدخل في العدد المحدد الذي خصصته والذي يتجلى في ثلاث وحدات اعلانية لكل صفحة،لهذا فيجب على كل مدون وصاحب موقع ان يتابع هذه التغيرات ويعمل على مجاراتها لهذا وضعت هذا الشرح لكي نجاري تطورات هذا المجال
شاهد الفيديو
من المأكد إن كنت صاحب موقع أن العديد من متابعي موقعك يتصفحون و يقرأنو مقالاتك عبر هوافتفهم أو التابليت , فلو لم تجعل قالبك غير متجاوب (responsive) فأنت بدون أن تشعر منعت زوار موقعك و متابعيه من قرائة تدويناتك و لم تجعلهم يجدون راحتهم في موقعك , لذلك نستنجد بالـقوالب المتجاوبة من أجل جعل القارئ يجد راحته و يحب موقعك ! لذلك عليك أن تسرع في جعل موقعك متجاوب responsive لإظهار إحترافية موقعك و كسب قرّائك ..
شاهد الفيديو
من المأكد إن كنت صاحب موقع أن العديد من متابعي موقعك يتصفحون و يقرأنو مقالاتك عبر هوافتفهم أو التابليت , فلو لم تجعل قالبك غير متجاوب (responsive) فأنت بدون أن تشعر منعت زوار موقعك و متابعيه من قرائة تدويناتك و لم تجعلهم يجدون راحتهم في موقعك , لذلك نستنجد بالـقوالب المتجاوبة من أجل جعل القارئ يجد راحته و يحب موقعك ! لذلك عليك أن تسرع في جعل موقعك متجاوب responsive لإظهار إحترافية موقعك و كسب قرّائك ..
افضل طريقة لجعل قالب مدونتك بلوجر متجاوب ويدعم جميع الهواتف والأجهزة الذكية
قد يعتقد البعض أن جعل قالب بلوجر متجاوب أمر صعب و مستعص , لكن العكس ! فالأمر سهل للغاية , لكن متعب نوعا ما , فكل ما ستقوم به هو إنشاء نسخة لكل نوع من أجهزة التصفح (الحاسوب / التابليت / الهاتف ) بتعديل الcss الخاص بموقعك .سنبدأ الأن في مثال عملى , فقط ركز و استوعب كل ما ستقرأه و لما لا تقرأه أكثر من مرة ليكون الفهم بناء و تستوعب كل المعلوماتأولا عليك أن تقوم بدراسة لأحجام الأجهزة التي يزورك متابعيك منها .
بعد الدخول إلى تحرير القالب و تعديل html , أبحث عن </head> ضع قبلها مباشرة هذا الكود
1
| <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> |
الأن , إن كنت تملك دراية بالcss ستتمكن من العمل , الأن ابحث عن سيكون عملك في المنطة بين
<b:skin><![CDATA[
و
]]></b:skin>
هذا إن كنت تشتغل على بلوجر , لكن إن كنت لا تشتغل على بلوجر , اسكتب شفرتك في ملف الcss الخاص بك ,
المهم الأن هنا :
احذف الكود الخاص ب css الخاص بك و يكون عملك هنا
@media screen and (max-width : 1280px) { /* CSS FOR NETBOOK AND DESKTOP ------------*/}
@media screen and (max-width : 1024px) { /* CSS FOR TABLETS ------------*/}
@media screen and (max-width : 768px) {/* CSS FOR SMALL TABLETS ------------*/}
@media screen and (max-width : 640px) { /* CSS FOR IPHONE ------------*/}
@media screen and (max-width : 480px) {/* CSS FOR MOBILES ------------*/}
@media screen and (max-width : 320px) { /* CSS FOR SMALL OLD MOBILES ------------*/ }
بدل /* CSS FOR NETBOOK AND DESKTOP ------------*/ اكتب الcss الخاص و المتوافق مع الحاسوب و الأجهزو ذات الشاشات الكبيرة .
بدل /* CSS FOR TABLETS ------------*/ اكتب كود css الخاص بالتابليت
بدل /* CSS FOR SMALL TABLETS ------------*/ اكتب كود css الخاص بالتابليت الصغيرة
بدل /* CSS FOR IPHONE ------------*/ اكتب كود css الخاص بالأيفون Iphone
بدل /* CSS FOR MOBILES ------------*/ اكتب كود css الخاص بالهواتف
بدل /* CSS FOR SMALL OLD MOBILES ------------*/ اكتب كود css الخاص بالهواتف ذات الشاشات الصغيرة
لم تفهم جيدا ؟؟ إليك مثال تطبيقي :
لدي ال css الخاص بي :
.logo{
width:300px;
}
.header{
width:1000px;
}
سنحاول جعله متوافقا مع جميع الأجهزة كما نريد
@media screen and (max-width : 1024px) { .logo{width:250px;} .header{width:800px;}}
@media screen and (max-width : 768px) { .logo{width:200px;} .header{width:600px;}}
@media screen and (max-width : 640px) { .logo{width:150px;} .header{width:450px;}}
@media screen and (max-width : 480px) { .logo{width:250px;} .header{width:300px;}}
@media screen and (max-width : 320px) { .logo{width:200px;} .header{width:250px;}}
وسيظهر بأشكال نريدها نحن في كل جهاز ,
فذا درس مكتوب لجعل قالب بلوجر متجاوب , لكن ستكون قريبا دروس مصورة بالفيديو
أسهل طريقة لجعل قالب مدونتك على بلوجر متجاوب ويدعم جميع الهواتف ... هذا على طريقة جعل أي قالب بلوجر متوافق مع مقاس شاشة الجوال وجميع الأجهزة