طريقة تغيير مكان القائمة الجانبية فى مدونات بلوجر
يرجي قراءة هذه التدوينة اولا مكونات التمبلت....
تعتبر القائمة الجانبية (والتي تسمي بالانجليزية Sidebar ) من اهم مكونات المدونة ككل بما انه تحتوي علي التصنيفات و اماكن الاعلانات و الارشيف ولذلك يتعتبر الاهتمام بتصميمها مهم جدا.
كيفية تغيير مكان السايد بار في التمبلت من الشمال الي اليمين ؟؟
هذا هو الشكل قبل التغيير
الان اذهب الي
Layout==>Edit Html
ثم اضغط Ctrl+F للبحث داخل الصفحة و اكتب في المربع الذي ظهر لك الآتي
Sidebar-wrapper
و سوف يظهر لك الكود الاتي
الان استبدل الجزء الملون بالاحمر بهذا الجزء
float:right;
و لكن السايد بار لن يتغير مكانه عندما تضغط preview لان ال main wrapper موجود علي اليمن و طبعا غير ممكن الاثنين يكونوا مع بعض في جهة اليمين...
اذا يجب تغيير مكان ال main wrapper الي الشمال..
اذا اضغط Ctrl+f ثم اكتب في مربع البحث main-wrapper
و ابحث الي ان تجد هذا الكود
استبدل الجزء الملون بالاحمر بالاتي
float:left;
ثم اضغط preview لكي تتأكد من ان التمبلت قد تم تعديله بشكل صحيح و صورته كالاتي :
اتمني يكون الشرح سهل و بسيط ومنتظر استفساراتكم.
شكرا
منقول من عرب بلوج
تعتبر القائمة الجانبية (والتي تسمي بالانجليزية Sidebar ) من اهم مكونات المدونة ككل بما انه تحتوي علي التصنيفات و اماكن الاعلانات و الارشيف ولذلك يتعتبر الاهتمام بتصميمها مهم جدا.
كيفية تغيير مكان السايد بار في التمبلت من الشمال الي اليمين ؟؟
هذا هو الشكل قبل التغيير
الان اذهب الي
Layout==>Edit Html
ثم اضغط Ctrl+F للبحث داخل الصفحة و اكتب في المربع الذي ظهر لك الآتي
Sidebar-wrapper
و سوف يظهر لك الكود الاتي
#sidebar-wrapper {
float:left;
margin:0pt 5px 0pt 0pt;
width:180px;
}
#sidebar-wrapper h2 {
color:$colortituloslateral;
background-color:#157DEC;
font-size:20px;
text-align: center;
font-weight:normal;
line-height:22px;
margin:0pt 0pt 2px;
}
الان استبدل الجزء الملون بالاحمر بهذا الجزء
float:right;
و لكن السايد بار لن يتغير مكانه عندما تضغط preview لان ال main wrapper موجود علي اليمن و طبعا غير ممكن الاثنين يكونوا مع بعض في جهة اليمين...
اذا يجب تغيير مكان ال main wrapper الي الشمال..
اذا اضغط Ctrl+f ثم اكتب في مربع البحث main-wrapper
و ابحث الي ان تجد هذا الكود
#main-wrapper {
float:right;
margin:0pt 0pt 0pt 5px;
width:580px;
}
#main-wrapper a {
}
#main-wrapper a:hover {
}
استبدل الجزء الملون بالاحمر بالاتي
float:left;
ثم اضغط preview لكي تتأكد من ان التمبلت قد تم تعديله بشكل صحيح و صورته كالاتي :
اتمني يكون الشرح سهل و بسيط ومنتظر استفساراتكم.
شكرا
منقول من عرب بلوج
هناك تعليق واحد:
بارك الله فيك ساعدني موضوع في حل المشكلة وفقك الله
إرسال تعليق