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

طريقة جعل قالب متوافق مع جميع الشاشات { الحل 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 ، فحاول أن تكون النسبة عالية حتي يكون التورنت سريع.

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

دورة مطوري بلوجر في العالم العربي { ج2 }

أول مرة في العالم العربي . . . دورة مطوري بلوجر , أكواد البلوجر , الأكواد التي تحتاجها لتبدأ بتصميم قالبك من الصفر بكل التخصيصات و تطوير القالب على منصة البلوجر . . . دورة طويلة ستتعلم فيها كل ما يوجد من أكواد في منصة البلوجر
اليوم سنقدم لك كل المكتبات التي تحتاجها المكتبات المرفوعة على جوجل ( juqery ,Dojo .... etc ) 
Jquery <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Angular
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>Dojo <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.2/dojo/dojo.js"></script>Ext Core <script src="//ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>Jquery.ui <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /><script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.j…

حماية الروابط بكلمة سر ( الدخول لرابط من موقعك بكلمة سر )

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



الاضافة سهلة فقط غيير ما باللون الأحمر و قم بنسخ الكود و لصقه في المشاركة في تبويب HTML في المكان الذي تريده
<script> function passWord() { var testV = 1; var pass1 = prompt('يرجى ادخال الرقم السري',' '); while (testV < 3) { if (!pass1)  history.go(-1); if (pass1.toLowerCase() == "كلمة السر هنا") { alert('تم قبول الرقم السري'); window.open('http://الرابط هنا'); break; }  testV+=1; var pass1 =  prompt('لا يمكن دخولك - الرقم السري خاطئ, يرجى إعادة المحاولة','ادخل هنا الرقم السري'); } if (pass1.toLowerCase()!="password" & testV ==3)  history.go(-1); return " "; }…