القائمة الرئيسية

الصفحات

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

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

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

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

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

الشرح 
اولا اتجه الي المظهر ثم تعديل 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 لاتتردد في كتابته في التعليقات , وقم بالاطلاع علي شهادات الموقع .

 

تعليقات

7 تعليقات
إرسال تعليق
  1. ازاي اغير مكان الايقونات الصغيره واخليه جهة اليمين وليس اليسار ؟!!!

    ردحذف
    الردود
    1. تحتاج منك خبرةفي التعامل مع CSS

      حذف
  2. تم تعديل مكان الايقونات ولكن الاضافه تملي عرض الصفح اريد ان اضع صوره بجوار الموصفات كثل موقع قاعة الموبيلات ؟؟؟

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

      حذف
  3. مش شغالو معاية

    ردحذف
  4. ثاعة الموبيلات

    ردحذف
  5. انت عامل كود منع النسخ ازاى هاخد الكووود

    ردحذف

إرسال تعليق