اضافه جدول مواصفات الهاتف الى مدونه بلوجر seoplus v8

ABDELGHAFOR DBANI

اضافه جدول مواصفات الهاتف الى مدونه بلوجر seoplus 2023

صورة : المطور المغربي

وقد قمت بالتعديل على هذه الاضافه وجعلها متوافقه مع جميع الشاشات بالاضافه الى دعمها للعديد من قوالب بلوجر وخاصة سيوبلس SeoPlus لأني أستعمل هذا القالب والان دعونا نتعرف على كيفيه اسستخدام هذه الاضافه .

خطوات اضافه جدول مواصفات الهاتف الى بلوجر

قم بالدخول الى اللوحه الرئيسيه في مدونتك قم بالدخول الى المظهر ثم اختر تعديل html
قم بالبحث عن وسم ]]></b:skin> عن طريق الضغط على Ctrl+F من لوحه المفاتيح ثم قم باضافه الكود التالى قبل الوسم .

.clearfix:before, .clearfix:after {content: "";display: table;}
.aps-shortcode ul {list-style: none;}
.aps-features-list li{ background: linear-gradient(45deg,#035dcd,#000000);height: 50px;margin-bottom: 10px;position: relative;width: 50%;max-width: 50%;}
  .aps-features-list li:hover{background:#0256bd}
.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-container ul, .aps-container ol {padding-right: 0;padding-left: 0;list-style: none;border-bottom: none;border-right: none;border-left: none;}
.aps-feature-anim {z-index: 1 !important;}
.aps-feature-anim{height: 100%;width: 100%;padding: 0px 40px 15px 10px;margin-bottom: 10px;color: #fff;line-height: 15px;position: absolute;top: 0;right: 0;}
.aps-list-icon{background: linear-gradient(89deg,#ffffff,#85bbff)}
.aps-list-icon {height: 50px;padding: 12px 5px 5px;color: #fff;font-size: 24px;line-height: 24px;position: absolute;top: 0;right: 0;z-index: 99;width: 36px;}
.aps-icon-cpu:before {content: '\e893';}
.aps-feature-info {height: 20px;position: relative;z-index: 83;overflow: hidden;font-size: 11px;font-family: tajawal;}.aps-feature-info strong {display: inline-block;}
.aps-main-features, .aps-video-col {float:right;width: 50%;margin-right: 10px;}
.aps-product-pic {max-width: 45%;width: 45%;float:left; border: 1px solid #52525217;margin-top: 20px;}

@media screen and (max-width : 480px) {
  .aps-features-list li{width:100%;max-width:100%}
  }
  @media screen and (max-width : 320px){
  .aps-features-list li{width:100%;max-width:100%}
  }

بعد ذلك قم بالدخول الى المشاركات او الموضوع الذى تريد ان تضع به جدول مواصفات الهاتف ثم قم باضافه الكود التالى بعد أن تختار عرض HTML بعدها تقوم بعرض الكتابة وتقوم بالتعديل .

<img hight="20px" src="https://img.icons8.com/ios-filled/50/000000/memory-slot.png" width="20px" />
</span><br />
</span><div class="aps-feature-info">
<span style="font-family: inherit;"><b>التخزين : 128 غيغابايت</b></span></div>
</div>
</li>
  
<li>
<div class="aps-feature-anim">
<span style="font-family: inherit;"><span class="aps-list-icon">
<img hight="20px" src="https://img.icons8.com/external-itim2101-lineal-itim2101/64/000000/external-storage-smartphone-technology-itim2101-lineal-itim2101.png" width="20px" />
</span>
<br />
</span><div class="aps-feature-info">
<span style="font-family: inherit;"><b>الشاشة : حجم 6.5 إنش IPS LCD</b></span></div>
</div>
</li>
  
<li>
<div class="aps-feature-anim">
<span style="font-family: inherit;"><span class="aps-list-icon">
<img hight="20px" src="https://img.icons8.com/material-rounded/24/000000/camera--v2.png" width="20px" />
</span>
<br />
</span><div class="aps-feature-info">
<span style="font-family: inherit;"><b><span>الكاميرا : ال</span>خلفية : رباعية 64+12+5+5 م.ب</b></span></div>
</div>
</li>
 <li>
<div class="aps-feature-anim">
<span style="font-family: inherit;"><span class="aps-list-icon">
<img hight="20px" src="https://img.icons8.com/material-rounded/24/000000/camera--v2.png" width="20px" />
</span>
<br />
</span><div class="aps-feature-info">
<span><b><span style="font-family: inherit;"><span>الكاميرا : </span></span><span><span style="font-family: inherit;">امامية : 32 م.ب</span></span></b></span></div>
</div>
</li> 
  
<li>
<div class="aps-feature-anim">
<span style="font-family: inherit;"><span class="aps-list-icon">
<img hight="20px" src="https://img.icons8.com/ios-filled/50/000000/battery-.png" width="20px" />
</span>
<br />
</span><div class="aps-feature-info">
<span style="font-family: inherit;"><b>البطاريه : 700 مللى امبير</b></span></div>
</div>
</li>
  
<li>
<div class="aps-feature-anim">
<span style="font-family: inherit;"><span class="aps-list-icon">
<img hight="20px" src="https://img.icons8.com/ios-glyphs/30/000000/operating-system.png" width="20px" />
</span>
<br />
</span><div class="aps-feature-info">
<span style="font-family: inherit;"><b>النظام: Android 10.0</b></span></div></div></li></ul>
</div>