حل مشكلة عدم تجاوب القالب بلوجر مع الهواتف الذكية
حل مشكلة عدم تجاوب القالب بلوجر مع الهواتف الذكية
طريقة تجاوب القالب بلوجر مع الهواتف الذكية
السلام عليكم ورحمة الله وبركاته ومغفرته ، احبتي ومتابعي مدونة هشام هاشم للمعلوميات والتقنيات ، ارجو ان تكون بصحة وهنا هذا اليوم وسائر الايام ان شاء الله ، كما تعلمون دائما نحاول ما يمكن ان نوفر لكم العديد من الحلول الخاصة بي قوالب بلوجر ، وكا إشارة للمدونين المحترفين ان يشرحوا للمبتدئين بطريقة الخشيبات دون ذكر اسماء او كلمات غير معروفة لديهم لتعم الفائدة وتصل الرسالة ، ولا شك قد تعلمت كلمة تقال من القدم ( كن انت الطبيب وهو المريض ووجد له الدواء ) .
اليوم سوف نتعرف على كيفية تجاوب القالب بلوجر مع الهواتف الذكية ، لاشك انك دخلت الى الموضوع من اجل ايجاد حل لهذا المشكل الذي اصبح يعاني منها العديد من المدونين وحتى المحترفين احيانا ، وكما تعلمون اخوتي في الله ان من احد اسباب التي تسبب عدم رفع ترتيب موقعك في محرك جوجل هو عدم تجاوب القالب مع الهواتف الذكية ، ولهذا تجد اقبال كبير في البحث عن مشكلة الهواتف مع قوالب بلوجر .
ايضا اخي الزائر يجب ان تعلم ان من سياسة ادسنس ان القالب اذا كان غير متجاوب مع الهواتف الذكية سوف يتم عدم قبولك او حظر الاعلانات وتكون النسبة قليلة جدا مقارنة مع المخالفات الاخرى ، ولهذا من مصلحتك تعلم في كيفية جعل الهاتف يتجاوب مع الهواتف SMARTPHONES ، ولكي لا نطيل عليكم في الكلام ادخل مباشرة في الشرح وبالتوفيق ان شاء الله .
تنبيه : يجب عليك اولا ان تجرب الطريقة المعروفة في بلوجر التي يتم تعديلها في صفحة القالب .
أخي انا لا اعرف الطريقة العادية المعروفة التي تتحدث عنها ؟
طيب اذا كان الحال هكذا سوف نشرح لك كيفية تجاوب القالب بلوجر مع الهواتف الذكية بالطريقة المعروفة .
اولا دخلو الى مدونتي >> ثم الى القالب >> ثم تختار اعدادات الجوال >> اختيار لا إظهار
تمام الان قد اجبتك على سؤالك واصبحت لك معرفة في هذا الباب ، ولكن تبقى مشكلة واحد هناك قوالب ولو باتباع هذه العملية اليدوية السهلة يكون القالب به عيوب يجب اصلاحها ، اما اذا ظهر القالب بطريقة الصحيحة فلا تكمل القراءة .
هو عيب واحد فقط ☺
- العيب هو عدم ظهور القالب بالعرض المناسب على الهواتف وهذه هي اكثر تعرضا لها .
* ربما يكون ظهور الكتابة خارج الخط
* ظهور الموقع بعرض صغير و يكون صعبا على الزائر القرائة
* ظهور القالب بعرض اكبر او اصغر
- ايضا لاصحاب الاعلانات التي تظهر في الموقع ، تكون بحجم كبير وتخرج عن العرض او العكس ، ( 336 px )
العديد يعرف قالب اتقان فهو احد القوالب المصممة بطريقة احترافية ، ولكن هناك نقطة صغيرة ليست عيبا ولكن لها علاقة بالعرض ، وهي ان القالب يظهر في الهواتف بحجم صغير من جهة العرض ، وغالبا الزوار تحب المواقع دوي العرض الكبير ولهذا تشتري الهواتف الكبيرة .
حل مشكلة عدم تجاوب القالب بلوجر مع الهواتف الذكية :
تنبيه الثاني : هذه العملية استعملها فقط في القالب الذي لا يظهر بالطريقة الصحيحة في الهواتف .
اولا ادخل الى القالب >> ثم تحرير HTML >> بعدها افتح محرك البحث CRTL+F >> وبحث عن امر <head>
نضع اسفلها مباشرة هذا الكود
كما في الصورةتنبيه الثاني : هذه العملية استعملها فقط في القالب الذي لا يظهر بالطريقة الصحيحة في الهواتف .
اولا ادخل الى القالب >> ثم تحرير HTML >> بعدها افتح محرك البحث CRTL+F >> وبحث عن امر <head>
نضع اسفلها مباشرة هذا الكود
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
ثم نبحث عن امر ]]></b:skin> ونضع فوقه هذا الكود
@media screen and (max-width : 1280px) {
/* CSS CODE HERE FOR DESKTOP ---*/
}
@media screen and (max-width : 1024px) {
/* CSS CODE HERE FOR TABLETS ---*/
}
@media screen and (max-width : 768px) {
/* CSS CODE HERE FOR SMALL TABLETS ---*/
}
@media screen and (max-width : 640px) {
/* CSS CODE HERE FOR IPHONE ---*/
}
@media screen and (max-width : 480px) {
/* CSS CODE HERE FOR SMARTPHONES ---*/
}
@media screen and (max-width : 320px) {
/* CSS CODE HERE FOR SMALL MOBILES ---*/
}
/* CSS CODE HERE FOR DESKTOP ---*/
}
@media screen and (max-width : 1024px) {
/* CSS CODE HERE FOR TABLETS ---*/
}
@media screen and (max-width : 768px) {
/* CSS CODE HERE FOR SMALL TABLETS ---*/
}
@media screen and (max-width : 640px) {
/* CSS CODE HERE FOR IPHONE ---*/
}
@media screen and (max-width : 480px) {
/* CSS CODE HERE FOR SMARTPHONES ---*/
}
@media screen and (max-width : 320px) {
/* CSS CODE HERE FOR SMALL MOBILES ---*/
}
الان انتبه جيدا معي ولا تتسرع .
- أدخول الى موقعك
- سوف تنقر على يمين الفائرة في اي مكان على الصفحة وختر Inspect elements
- بعدها سوف تختار الشاشه كاملة بالبحث عن الكود ويكون بهذا الشكل
كما تلاحظ في الصورة عند النقر على هذا الامر #outer-wrapper { ظهرت الشاشة كاملة باللون الازرق والليموني
فهذا الكود هو من سوف يتحكم في العرض الخاص بالهواتف.
- بعدها سوف نقوم بنسخ الكود الخاص بعرض الشاشة كما في الصورة
الان سوف نرجع الى امر ]]></b:skin> ونتجه مباشرة الى الكود الذي وضعته من قبل ، و سوف نختار هذا المكان الخاص بي قياس 480 بيكسل ونضع اسفله كود العرض .
@media screen and (max-width : 480px) {
/* CSS CODE HERE FOR SMARTPHONES ---*/
#outer-wrapper {
width: 1050px;
margin: 0 auto;
position: relative;
}
}
/* CSS CODE HERE FOR SMARTPHONES ---*/
#outer-wrapper {
width: 1050px;
margin: 0 auto;
position: relative;
}
}
ملاحظة :
- اذا كانت اعلانات تظهر بحجم كبير فاعلم انه يجب عليك اخفائها من الهواتف وقد شرحنا الامر سابقا
- اذا كان مثلا الشعار او اداة الاقسام تظهر بشكل غير جيد تستعمل نفس العملية وقم بتعديلها او حذفها بنفس الشرح ويكون اسفل كود /* CSS CODE HERE FOR SMARTPHONES ---*/ ،يمكنك ملء دون مشاكل وهذا مثال في الصورة .
يمكنك من هذا الموقع Mobile-Friendly ان تعرف هل القالب متجاوب بطريقة سليمة وسوف تظهر كلمة باللون الاخضر والعكس باللون الاحمر .
حل مشكلة عدم تجاوب القالب بلوجر مع الهواتف الذكية
Reviewed by هشام هاشم
on
4/24/2016
Rating:
Reviewed by هشام هاشم
on
4/24/2016
Rating:
اذا وجدت صعوبة في حل هذا المشكل فباب النقاش مفتوح وقريبا سوف نشرح الامر على الفيديو يوتيوب لتعم الفائدة
ردحذفشكرا على المجهود
ردحذفالعفو ومرحبا بك
حذفاخي حاولة كثيرا لكن لم انجح في جعل قالبي متجاوب هل يمكن ان تساعدني
ردحذفاذا كان القالب اصلا فيه مشاكل ولو تستعمل معه العديد من الاكود لن بعدل الا بستبداله اما اذا تورط في العرض فهذا الكود يحل المشكل
حذفهل يمكن ان اجعلك مشرف في مدونتي لتساعدني
حذفاشكرك على ذلك وتحيتي لك وهذا شرف ولكن انا اشتغل في مدونة بتاعي شكرا حبيبي
حذف