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

السلام عليكم ورحمة الله وبركاته

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

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

- شرح طريقة توافق مدونات بلوجر مع جميع الأجهزة :

1- ادخل إلى مدونتك | ثم أختر تحرير قالب .

2- إبحث عن الوسم : </head>

3- ضع هذا الكود فوقه :

<meta name = "viewport" content = "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0"/>

4- ثم إحفظ القالب .

5- بعد ذلك أختر قالب ثم تخصيص ثم أختر متقدم ثم أختر إضافة CSS

6- الصق الكود التالي في صندوق Css بعد ذلك أختر تطبيق على المدونة .

هذا هو الكود المسؤول عن توافق القالب

/* CSS Global Responsive */
@media screen and (max-width:960px) {
}
@media only screen and (max-width:768px){
}
@media (min-width:768px) and (max-width:979px) {
}
@media (max-width:767px) {
}
@media only screen and (min-width:640px){
}
@media only screen and (max-width:640px){
}
@media only screen and (min-width:640px){
}
@media only screen and (max-width:480px){
}
@media screen and (max-width:320px){
}

- الان يجب التعديل علي الكود
مثلا نقوم بإحضار الجزء الاول من الكود :

@media screen and (max-width:960px) {
}

الان هذا الكود يعني الشاشه من 768 حتي مقاس 960
- نقوم بإضافه الاكواد بداخله . ونحن نعلم بأن القالب الاساسي والعادي يتكون من :
- قائمه علويه
- ثم الهيدر
- ثم القائمه الثانيه
- تم مكان المشاركات
- ثم القائمه الجانبيه
- ثم الفوتر

نقوم بإحضار معرف كل عنصر من العناصر

القائمه العلويه menu-top
الهيدر header
القائمه الثانيه menu
مكان المشاركات main
القائمه الجانبيه sidebar
الفوتر footer

ملحوظه : المعرفات تختلف من قالب الي اخر
- طريقه احضار المعرف
1- تقوم بالضغط كلك يمين علي الذي تريد احضار معرفه
2- ثم تقوم بإختيار فحص العنصر او Inspect element
3-تم تجد نافذه ظهرت تجد بها المعرف كما هو موضح كما بالصورة التالية :

نقوم الان بالتعديل كما قلت الجزء الاول من الكود يعني مقاس الشاشه 768 حتي مقاس 960

نبدأ بتعديل علي القالب القائمه الاولى

اجعلها بعرض 100% حتي تكون بعرض الشاشه بالكامل

الهيدر ايضا اجعلها بعرض 100%

والقائمه الثانيه ايضا

اما المشاركات فلا تجعلها 100% بل قم بتصغير عرضها قليلا وكذلك مع القائمه الجانبيه

حتى نحصل علي كود كل من العناصر نحو :

#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}

ثم تضيفها الي الجزء الاول من الكود ليصبح بهذا الشكل :

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

نقوم بتكرار العمليه حتي نصل الي الجزء الثامن
نقوم بإخفاء القائمه الجانبيه ثم نجعل مكان المشاركات بعرض 100%
نحو:

#main { width:100%;}
#sidebar { display:none;}

ثم نقوم بإضافتها للجزء الثامن والتاسع من الكود ليصبح هكذا :

@media only screen and (max-width:480px){
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
#main { width:100%;}
#sidebar { display:none;}
}
@media screen and (max-width:320px){
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
#main { width:100%;}
#sidebar { display:none;}
}

الان بعد ان قمنا بالتعديل علي كل الاجزاء سيصبح الكود هكذا :

/* CSS Global Responsive */
@media screen and (max-width:960px) {
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media only screen and (max-width:768px){
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media (min-width:768px) and (max-width:979px) {
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media (max-width:767px) {
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media only screen and (min-width:640px){
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media only screen and (max-width:640px){
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media only screen and (min-width:640px){
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media only screen and (max-width:480px){د
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
#main { width:100%;}
#sidebar { display:none;}
}
@media screen and (max-width:320px){
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
#main { width:100%;}
#sidebar { display:none;}
}