عرض مشاركة واحدة
قديم 05-18-2016, 10:41 AM   #1
كن بلوقر
مدون جديد
 
الصورة الرمزية كن بلوقر
 
تاريخ التسجيل: Mar 2016
الدولة: موريتانيا
المشاركات: 21
افتراضي جعل نماذج بلوجر متجاوب مع جميع الأجهزة



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

أولا سوف نقوم بضبط نموذج الجوال

وذلك عبر التوجه الي لوحة التحكم بلوجر
نختار قالب نقوم بضغط علي ترس الجوال ونقوم با أختيار كما في الصور





بعد ضبط نموذج الجوال نذهب الي قالب تحرير HTML
ابحث عن هذا الوسم <head> و اضف الكود التالي بعده

كود بلغة HTML:
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
وبعد وضع الكود أعلي نبحث عن هذا الوسم ]]></b:skin> و اضف الكود التالي فوقه

كود:
@media screen and (max-width : 750px) {
body {min-width: 100% !important;}
.content-outer.bzcontain {
max-width: 100% !important;
min-width: 100% !important;
overflow: hidden;
width: 100% !important;
}
.content-inner {
margin: 0 auto;
overflow: hidden;
width: 98%;
}
.bzomcmain {padding: 0 !important;}
.region-inner.main-inner {padding: 10px !important;}
.comment-link,.post-comment-link::before {display: none;}
.bzsidebar {
float: right !important;
margin: 10px auto !important;
right: 0 !important;
width: 100% !important;
}
.sidebar.section {margin: 0 !important;}
.column-left-inner {padding: 0 !important;}
.sidebar .widget {margin: 0 -4px 20px !important;}
.post-outer {overflow: hidden;}
}

وبعد ذلك نبحث عن الكود التالي
<div class='content-outer'>

ونضيف له هذه الكلمة bzcontain ليصبح با الشكل التالي

<div class='content-outer bzcontain'>

وبنحث أيضا عن الكود التالي
<div class='columns fauxcolumns'>

ونضيف له هذه الكلمة bzomcmain ليصبح با الشكل التالي

<div class='columns fauxcolumns bzomcmain'>

وأخيرا نبحث عن الكود التالي

<div class='column-left-outer'>

ونضيف له هذه الكلمة bzsidebar ليصبح با الشكل التالي

<div class='column-left-outer bzsidebar'>

وجرب تجاوب القالب وسوف تجده متجاوب 100/100
وهذا قالب من نماذج بلوجر جربت عليه التجاوب
معاينة
أي أستفسار ضعه في تعليق

المصدر : جعل نماذج بلوجر متجاوب مع جميع الأجهزة

الدعم العربي

كن بلوقر غير متواجد حالياً   رد مع اقتباس