طريقة جعل قوالب بلوجر الافتراضية متجاوبة بسهولة جدا

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

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

فقط ان كنت مهتما اتبع الشرح.

أولا: يجب عليك تعطيل أداة navbar فقط قم بالدخول الى تخطيط layout واضغط تعديل ثم اضغط off

ثانيا: التعديل على أكواد الصور لجعلها متجاوبة فقط قم باستبدال الكود التالى بالكود الذى يليه

Data hosted with ♥ by Pastebin.com - Download Raw - See Original

1. .post-body img, .post-body .tr-caption-container {
2.   padding: $(image.border.large.size);
3. }

Data hosted with ♥ by Pastebin.com - Download Raw - See Original

1. .post-body img, .post-body .tr-caption-container {
2. padding: 0;
3. width:auto;
4. max-width:100%;
5. height:auto;
6. }

ثالثا: قم باستبدال الكود التالى بالكود الذى يليه

Data hosted with ♥ by Pastebin.com - Download Raw - See Original

1.     <b:if cond='data:blog.isMobile'>
2.       <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
3.     <b:else/>
4.       <meta content='width=1100' name='viewport'/>
5.     </b:if>

Data hosted with ♥ by Pastebin.com - Download Raw - See Original

1. <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

رابعا: قم بالبحث عن  </head>  وأضف فوقه أو قبله الكود التالى

Data hosted with ♥ by Pastebin.com - Download Raw - See Original

1. <style type='text/css'>
2. @media screen and (max-width:1024px){
3. body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important}
4. body .navbar {height: 0!important;}
5. .footer-inner {padding: 30px 0px!important;}
6. }
7.  
8. @media screen and (max-width: 603px){
9. .main-inner .columns {padding-right: 0!important;}
10. .main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
11. }
12. </style>

خامسا: قم بحفظ القالب الافتراضى من بلوجر ومبارك عليك فقالبك الأن متجاوبا مع الهواتف والأجهزة الذكية.