لاصحاب مواقع الهواتف اضافة مواصفات الهاتف لمدونات بلوجر

لاصحاب مواقع الهواتف اضافة مواصفات الهاتف لمدونات بلوجر 

اليكم اضافة جديد لمدونات الهواتف وهي اضافة مواصفات الهواتف بشكل جديد 

لاصحاب مواقع الهواتف اضافة مواصفات الهاتف لمدونات بلوجر

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

الشرح 
اولا اتجه الي المظهر ثم تعديل HTML ثم ابحث عن هذا الكود 
</b:skin> 
وضع هذا الكود اعلاه 
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.aps-shortcode ul {list-style: none;}
.aps-features-list li{    background: linear-gradient(45deg,#480048,#c04848);    height: 46px;
    margin-bottom: 10px;
    position: relative;}
    .aps-shortcode *{
    line-height: 1.5;
    padding: 0;
    margin: 0;
     list-style: none!important;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.aps-feature-anim:hover{background: #055cef}
.aps-feature-anim{
    height: 100%;
    width: 100%;
        font-size: 13px;
    padding: 0px 10px 1px 19px;
    margin-bottom: 10px;
    color: #fff;
    line-height: 15px;
    position: absolute;
    top: 0;
    left: 0;
}
.aps-list-icon{
    background: #FFC107;
}
.aps-list-icon {
    height: 46px;
    padding: 11px;
    color: #fff;
    font-size: 24px;
    line-height: 24px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}
.aps-icon-cpu:before {
    content: '\e893';
}
.aps-feature-info {
    height: 20px;
    position: relative;
    z-index: 5;
    overflow: hidden;
}
.aps-feature-info strong {
    display: inline-block;
}
.aps-main-features, .aps-video-col {
float:left;
    width: 50%;
margin-left: 10px;
}
.aps-product-pic {
    max-width: 45%;width: 45%;float:right;    border: 1px solid #52525217;margin-top: 20px;
}
@media screen and (max-width: 768px){.aps-product-pic {width: 100%;max-width: 100%}
    .aps-main-features, .aps-video-col {
    width: 100%;
margin: 0px;
}
    }

ثم قم بحفظ القالب وتوجه الي انشاء مقالة جديدة وقم بفتح HTML  المقالة 
وضع هذا الكود 

 
وقم بتغيير التفاصيل للتفاصيل الذي تريدها ووضعها في المقال ثم قم بنشر المقال لتكون مثل هذه الصورة تماما 

 واتمني ان يكون الموضوع اعجبكم ونعتذر علي الـتأخيروانتظروا كل جديد 
  ولاتنسي زيارة قسم بلوجر  لمزيد من المواضيع واذا واجهتك اي مشكلة عموما في موقعك قم بكتابتها في صفحة اسألنا,  او اذا كنت تريد  شرح معين عن  أي شي في بلوجر او SEO لاتتردد في كتابته في التعليقات , وقم بالاطلاع علي شهادات الموقع .

 

0/تعليقات

أحدث أقدم