معهد خبراء بلوجر

معهد خبراء بلوجر (https://www.bloggerexp.com/index.php)
-   دروس بلوجر (https://www.bloggerexp.com/forumdisplay.php?f=11)
-   -   جعل نماذج بلوجر متجاوب مع جميع الأجهزة (https://www.bloggerexp.com/showthread.php?t=18896)

كن بلوقر 05-18-2016 10:41 AM

جعل نماذج بلوجر متجاوب مع جميع الأجهزة
 
https://3.bp.blogspot.com/-W25q8pGqQ...e-Template.jpg

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

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

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

https://3.bp.blogspot.com/-7zCHdbwQA...e-Template.png

https://1.bp.blogspot.com/-_3ObGSuTK...e-Template.png

بعد ضبط نموذج الجوال نذهب الي قالب تحرير 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
وهذا قالب من نماذج بلوجر جربت عليه التجاوب
معاينة
أي أستفسار ضعه في تعليق

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



الساعة الآن 09:51 PM

Powered by vBulletin® Copyright ©2000 - 2024 Dov By EGYNT.Co
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012