طريقة تغيير شكل او تصميم التخطيط في مدونات بلوجر


السلام عليكم ورحمة الله وبركاته ، الكثير منا يريد تغييرتصميم التحطيط في مدونات بلوجراضع اليوم بين ايديكم الطريقة كاملة , وتستطيع التعديل كما تشاء مادمت لديك خلفيه عن CSS كي لا اطيل عليكم دعونا نبدأ بالطريقة : 

حرر القالب وانظر الى بداية القالب ستجد كود شبيه بهذا .
<?xml version="1.0" encoding="UTF-8" ?><!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:version='2' اذا وجدتها فهذا جيد , اما اذ لم تجدها فقم بأضافتها مثل مافي الكود.

  1. ابحث عن </b:skin> واضف اسفلها هذا الكود
<b:template-skin>
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=&#39;#333333&#39;, endColorstr=&#39;#414141&#39;, 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=&#39;#333333&#39;, endColorstr=&#39;#414141&#39;, 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>

تنسيق CSS في الكود السابق هو تنسيق عام , بمعنى انه سيركب على كل القوالب.

ثالثاَ : في حال الضرورة فقط ( في حال وجدت انه هناك اختلافات في القالب مثل زيادة في العرض او قيمة margin مختلفة الخ.. اضف هذا الكود قبل </b:skin> :
.post-body ul {    padding: 0!important;    margin: 0!important;    line-height: auto!important;}

الي هنا ينتهي موضوعنا اليوم

أبلغ عن رابط لا يعمل
اشترك في نشرتنا الإخبارية