![[ جافا سكربت ] زيادة حجم النص او انقاصه داخل HTML](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvsKajTZpsRWSwijDNPzZWU4y0frb-IeMOo9hyoe0vwzDj0lQabogU-NRKEgoLOLgK_oWpbbZRQ7PldV0kBGlWm_E0UdvJhSwujBra9u_TIFyhs8b8fgeaRXhuU5kfvTadX9jY4_6jGTOV/s72-c/Untitled-232.png)
 |
| تغيير شكل تصميم التخطيط في مدونة بلوجر |
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته.
تغيير شكل تصميم التخطيط في مدونة بلوجر
في الحقيقه سابقاَ حاولت كثيراَ لتغير شكل تصميم التخطيط في مدونة بلوجر ولاكن محاولاتي اتت بفشل , وفقدت الامل في هذه المسأله حتى وجدت الحل , اضع اليوم بين ايديكم الطريقة كاملة , وتستطيع التعديل كما تشاء مادمت لديك خلفيه عن CSS ولاكن يجب التنبيه انه عند تطبيق الطريقة لاننا سنقوم بترقية XML من الاصدار الاول الى الاصدار الثاني فستجد بعض الاختلافات في padding و margin الخاصة بـ ul و li وسيتوجب عليك تعديلها يدويا على العموم نبدأ.
صورة لشكل التخطيط بعد تغيير شكله :
 |
| تغيير شكل تصميم التخطيط في مدونة بلوجر |
طريقة التركيب :
اولاَ : ادخل قالبك .- حرر القالب وانظر الى بداية القالب ستجد كود شبيه بهذا :
<?xml version="1.0" encoding="UTF-8" ?>المهم لدينا هو هذه b:version='2' اذا وجدتها فهذا جيد , اما اذ لم تجدها فقم بأضافتها مثل مافي الكود.
<!DOCTYPE html>
<html b:version='2' class='v2' dir='rtl' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
ثانياَ : ابحث عن </b:skin> واضف اسفلها هذا الكود :
<b:template-skin>تنسيق CSS في الكود السابق هو تنسيق عام , بمعنى انه سيركب على كل القوالب.
body#layout {
background: rgba(51,51,51,1);
background: -moz-linear-gradient(45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(51,51,51,1)), color-stop(50%, rgba(51,51,51,1)), color-stop(51%, rgba(65,65,65,1)), color-stop(51%, rgba(65,65,65,1)), color-stop(71%, rgba(65,65,65,1)), color-stop(100%, rgba(65,65,65,1)));
background: -webkit-linear-gradient(45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
background: -o-linear-gradient(45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
background: -ms-linear-gradient(45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
background: linear-gradient(45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#414141', GradientType=1 );
border: 1px solid #312F2D;
}
body#layout .section {
background-color: rgba(54, 54, 54, 0.5) !important;
border: 1px solid rgba(51, 51, 51, 0.5) !important;
}
body#layout .section h4 {
color: #E6E6E6!important;
}
body#layout .widget-wrap2 {
background: #984949!important;
}
body#layout .add_widget {
background-color: rgba(51, 51, 51, 0.5)!important;
border: 1px dashed rgba(74, 73, 73, 0.79)!important;
}
body#layout .add_widget a,body#layout div.layout-title {
color: #B9B9B9!important;
font: 11px tahoma!important;
}
body#layout .draggable-widget .widget-wrap3 {
background: rgba(51,51,51,1);
background: -moz-linear-gradient(-45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(51,51,51,1)), color-stop(50%, rgba(51,51,51,1)), color-stop(51%, rgba(65,65,65,1)), color-stop(51%, rgba(65,65,65,1)), color-stop(71%, rgba(65,65,65,1)), color-stop(100%, rgba(65,65,65,1)));
background: -webkit-linear-gradient(-45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
background: -o-linear-gradient(-45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
background: linear-gradient(135deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#414141', GradientType=1 );
}
body#layout .widget-content {
border: 1px solid #353535!important;
}
body#layout .widget-content a {
text-decoration: none;
color: #B9B9B9!important;
font: 11px tahoma !important;
background-color: #333;
padding: 2px 10px;
border-radius: 5px;
}
body#layout .locked-widget .widget-content {
background: rgba(51,51,51,1);
background: -moz-linear-gradient(-45deg,rgba(51,51,51,1) 0%,rgba(51,51,51,1) 50%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 71%,rgba(65,65,65,1) 100%);
background: -webkit-linear-gradient(-45deg,rgba(51,51,51,1) 0%,rgba(51,51,51,1) 50%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 71%,rgba(65,65,65,1) 100%);
background: -o-linear-gradient(-45deg,rgba(51,51,51,1) 0%,rgba(51,51,51,1) 50%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 71%,rgba(65,65,65,1) 100%);
background: -ms-linear-gradient(-45deg,rgba(51,51,51,1) 0%,rgba(51,51,51,1) 50%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 71%,rgba(65,65,65,1) 100%);
background: linear-gradient(135deg,rgba(51,51,51,1) 0%,rgba(51,51,51,1) 50%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 71%,rgba(65,65,65,1) 100%);
}
</b:template-skin>
ثالثاَ : في حال الضرورة فقط ( في حال وجدت انه هناك اختلافات في القالب مثل زيادة في العرض او قيمة margin مختلفة الخ.. اضف هذا الكود قبل </b:skin> :
.post-body ul {
padding: 0!important;
margin: 0!important;
line-height: auto!important;
}
اذا كان لديك استفسار فباب التعليقات مفتوح.
عند نقلك للموضوع او نسخه , حاول ان تذكر المصدر لينتفع الزائر في حال اراد المزيد من المساعده , وايضاَ احتراما وتقديراَ للجهود المبذولة في المواضيع.
معلومات عن التدوينة
صورة التدوينة
عنوان التدوينة :تغيير شكل تصميم التخطيط في مدونة بلوجر
ملخص التدوينة:
تغيير شكل تصميم التخطيط في مدونة بلوجر بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته. تغيير شكل تصميم التخطيط في مدونة بلوج...
تاق :
جميل
ردحذفشكرا لك اخي لم اتخيل يوما بالامكان التعديل على شكل التخطيط ابد رائع بالفعل
ردحذفوارجوا منك ايضا شرح طريقة اضافة الابتسمات التي تستخدمها في قالبك لانها بسيطة وجميله
شكرا لك اخ عبدالله الحربي انا من معجبيك د1 وانا احب مدونتك افدتني كتير
ردحذففي عندي استفسار في ما يخص التحكم في عرض التخطيط ان امكن
لانه عندي التخطيط صغير
ووو، مذهل، شكل رائع عبد الله كن ^__^
ردحذفباركك الله، أنا زائر يومي لمدونتك، بس إنتا
ما تشوفني خخخ، تحياتي / ليو
من فضلك
ردحذفكيف اضهر كل تدوينة بجانب بعضها البعض
في الصورة تضهر التدوينة اسفل الاخرى و انا اريدها كل تلات تدوينات بجانب بعضها
http://www3.0zz0.com/2015/11/17/01/686594616.jpg
ممكن رد بالحل
مرحبا بك ياغالي , سهله جداَ بأستخدام css فقط اعطي كلاس التدوينات flat:right
حذفمشكوووور
ردحذف