التخطي إلى المحتوى الرئيسي

طريقة جعل قالب متوافق مع جميع الشاشات { الحل 3 }

طريقة جعل قالب متوافق مع جميع الشاشات

طريقة جعل قالب متوافق مع جميع الشاشات



السلام عليكم ورحمة الله تعالى و براكته ,في هذا الدرس الجديد من حلول لطريقة جعل قالب متوافق مع جميع الأجهزة و الشاشات سنتطرق الى الحل الأكثر استعمالا و هو عبر ال Media queries هذه التقنية تتم عبر ال css3 و مهمتها عمل تصميم متوافق Respansive web design ,

مثال

في المثال أعلاه يوجد تصميم بسيط متوافق مع جميع الشاشات , جرب تصغير نافذة المتصفح عند فتح المثال لترى كيف يتجاوب التصميم مع  عرض  نافذة المتصفح و نفس الشيئ سيفعله مع الشاشات الأخرى .
أولا , بما أن الMedia Queries تقنية من تقنيات css3 فعلينا كتابة أكوادها في مكان الcss سواء بين وسمي style أو b:skin في البلوجر .

@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 ------------*/
}

كما ترى فوق هذه هي أكواد ال Media quries و كماترى هناك max-width في كل كود و هو يمثل عرض الشاشة و كل كود مخصص لشاشة جهاز معين مثلا Iphone - Mobiles-tablets-Smal tablets-old mobiles
و يمكنك تخصيص لكل شاشة أحجام مناسبة لها عبر كتابة أكواد ال css في مكان النص الأحمر فوق  (تحذف النص و مكانه تبدء بكتابة الأكواد )

طريقة التعامل و كتابة الأكواد 
التصاميم العادية لقوالب بلوجر هي عبارة عن 'هيدر - مكان التدوينات و القائمة الجانبية - تدوينات - قائمة جانبية - فوتر 



فأولا سنعمل على الهيدر ثم  " مكان التدوينات و القائمة الجانبية "   ثم التدوينات ثم  القائمة الجانبية ثم الفوتر .


@media screen and (max-width : 1280px) {
#header {width:100%; }
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
 
}

@media screen and (max-width : 1024px) {
#header {width:100%; }
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
  
}

@media screen and (max-width : 768px) {
#header {width:100%; }
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
}

@media screen and (max-width : 640px) {
#header {width:100%; }
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { display:none;}
.post {width: 
xxxx ;}
}

@media screen and (max-width : 480px) {
#header {width:100%; }
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { display:none;}
.post{  width:
xxxx ;}
}

@media screen and (max-width : 320px) {
#header {width:100%; }
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { display:none;}
.post { width: xxxx ;}
}

كما ترى نطبق على الهيدر و مكان التدوينات و القائمة الجانبية  نفس ما قمت به أنا بعد ذالك في خطوة التدوينات و السايدبار سنقوم بعملية رياضية  لكي نجد النسبة المئوية لعرض مكان التدوينات و مكان القائمة الجانبية  هي سنقوم بأخذ عرض مكان التدوينات مثلا 622px - و نقوم بضربه في 100 ثم قسمته على عرض مكان التدوينات و القائمة الجانبية صورة للتوضيح أكثر


بعد ذالك نقوم باضافة العرض الخاص بالقائمة الجانبية و التدوينات في أكواد ال Media queries كما فعلت أنا فوق في الأكواد .
كما تلاحظ في الشاشات ذات العرض 640px - 480px -  320px هناك تغيير , هذا التغيير قمنا فيه بجعل القائمة الجانبية تختفي
ليكون القالب أكثر رحة على الهاتف , حتى أنه  سيضهر نصف القائمة  لم لم نقم باخفائها , و هناك احتمال اخر و هو أن نجعلها تحت التدوينات و يتم ذالك عبر حذف overflow hidden من كود القائمة الجانبية و اضافة كود ;float none في كود القائمة الذي في أكواد ال Media Queries ( يفضل اخفاء القائمة  ) و قمت أيضا بالتعديل على المشاركة أو ال POST لكي تظهر جيدا
و بهذه الطريقة تقوم أنت بالتعديل على أي تصميم أو اضافة بلوجر.....ألخ...

الايديهات التي يجب عليك تغييرها

header
content-wrapper
main
sidebar

أما ايدي post فهو ايدي تلقائي في كل مدونات بلوجر ليس عليك تغييره . أما الايديهات التي فوق فهي يجب تغييرها بالايديهات الخاصة بك و تستطيع ايجادها عبر أداة فحص العنصر بسهولة , اذا لم تستطيعو ايجادها ضعو لي مدوناتكم في تعليق لكي أجدها لكم
و عليك أيضا تغيير القيم في ال main و sidebar  و post حسب العرض الذي يوجد في قالبك . و تغيير بعض التفاصيل الأخرى السهلة في تعديلها و التي لا تتطلب وقت .

الان للتأكد من توافق القالب عليك بالضغط على يمين الفأرة ثم فحص العنصرأو inspect element بعد ذالك نقوم بسحب قائمة في الأسفل

بعد ذالك نذهب الى تبويب Emulation و نذهب الى أكواد Media Queries و نأخذ عرض كل جهاز و نكتبه في الفراغ الذي في الصورة و سترى الموقع يتجاوب مع العرض



أي استفسار , خطا , غلط , سؤال , تصحيح يرجى وضعه في تعليق شكرا  .

لن تعمل الأكواد و يصبح القالب متوافق الى بعد تغيير القيم التي يجب تغييرها و الايديهات كذالك

طريقة جعل قالب متوافق مع جميع الشاشات { الحل 1 }

طريقة جعل قالب متوافق مع جميع الشاشات { الحل 2 }



جعل موقع متوافق مع جميع الأجهزة
جعل قالب متوافق مع جميع الأجهزة
أساسيات جعل قالب بلوجر متجاوب مع جميع الأجهزة

تعليقات

  1. شكرا لك

    ردحذف
  2. صديقي هذا الشرح احتاجه جدا لكنتي لم افهمه جيدا.
    ارجوا ان تاتيني عالخاص في الفيسبوك.
    https://www.facebook.com/oussama.chinoui.522/
    واخبرني انك انت.
    انا في الانتظار حبيبي ♥

    ردحذف

إرسال تعليق

المشاركات الشائعة من هذه المدونة

طرق فعالة لتسريع التحميل ببرنامج التورنت "حصرية"

ادا كنت من مستعملي برنامج تورنت utorent فبالتأكيد تعاني من مشكلة السرعة في التحميل حيث أنها تكون بطيئة بعض الشيئ
و لهدا فهناك بعض الخطوات البسيطة التي تمكنك من زيادة سرعة التحميلفي برنامج تورنت ,و أردت أن أشارككم ثلاثة طرق فعالة و مجربة مني أنا شخصيا



اختيار تورنت سريع للتحميل

الخطوة الاولي والاهم هي اختيار تورنت سريع ، والتورنت السريع هو ما يكون به Seeders او Leechers اكبر من الـ Peers ، فكلما زاد العدد كان افضل واسرع. فالـ Seeders هم الاشخاص الذين قاموا بتحميل الملف ويقومون بمساعدة الاخرين من خلال جهازهم للتحميل ، والـ Peers هم الاشخاص الذين يقومون بتحميل الملف الان. لذلك فحاول دائما اختيار ملف يحتوي علي Seeders اكبر من الـ Peers ، او علي الاقل بنسبة اكبر ، فتورنت يحتوي علي 30 Seeders و 70 Peers يعتبر افضل من تورنت يحتوي علي 100  و 700 Peers ، فحاول أن تكون النسبة عالية حتي يكون التورنت سريع.

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

طريقة منع أصدقائك من رؤية المحتوى الذي تتم الإشارة إليك فيه؟

السلام عليكم و رحمة الله تعالى و بركاته , اذا كنت ممن لا يشجعون خاصية الtag في الفيسبوك فهذا الدرس مفيد لك لأن أصدقائك لن يرو المنشورات التي تم عمل لك تاج فيها فقد يقوم البعض بالاشارة لك في منشورات بها روابط دعائية بالتالي كأنه نشر على حائطك يعني أصدقائك سيرو أنك في ذالك المنشور و سيحصل هو على الزوار و المتابعين يعني كأنك ستعمل دعاية , كي لا أطيل الحديث أو شيئ أدخل لحسابك على الفيسبوك ثم اذهب الى اعدادت الحساب أو settings بعد ذالك انتقل من القائمة التي على اليمين الى تبويب اليوميات و الاشارة أو Timeline and tagging ثم انتقل الى تعديل ' كيف يمكنني إدارة الإشارات التي يضيفها الأشخاص واقتراحات الإشارات؟ ' التي ستجدها في الأسفل و قم بتغييرها من Friendsالى only me


تسريع التحميل في برنامج EAGLEGET

طبعا من منا لا يعرف البديل الوحيد لبرنامج تحميل البرامج و الملفات IDM نعم انه EAGLEGET اللدي نال شهرة كبيرة في وقت قصير جدا في العالم العربي خصوصا  كما نعرف جميعا نحن العرب كلما نجد برنامج نحاول التعمق في و اكتشاف جميع أسراره و مزاياه  لهدا اليوم اكتشفت طريقة لتسريع التحميل ببرنامج التحميل EAGLEGET ماعليك سوى متابعة الحلقة 
لا تنسى وضع بصمتك في تعليق و شكرا  تدكر أن هدا الموضوع يطرح لأول مرة في العالم اعربي لهدا ادا أردت شرحه مرة أخرى ضع المصدر أسفله  المصدر : http://dzprofessionale.blogspot.com/2013/11/Download-Accelerator-EAGLEGET.html