أخر الاخبار
بلوجر
3

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

Dr youssef elshaer
اخر تحديث :
اضافه جدول مواصفات الهاتف الى بلوجر  حيث يمكنك استخدامها اذا كنت تخطط الى امتلاك او بالفعل  تمتلك مدونه للهواتف حيث تحصر هذه الاضافه جميع مواصفات لهاتف مثل الكاميرا الاماميه او الكاميرا الخلفيه والبطاريه والمعالج بالاضافه الرامات الخاصه بالهاتف 


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

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

  1. قم بالدخول الى اللوحه الرئيسيه الى مدونتك قم بالدخول الى المظهر ثم اختر تعديل html
  2. قم بالبحث عن  وسم ]]></b:skin> عن طريق الضغط على F+Ctlمن لوحه المفاتيح  ثم قم باضافه الكود التالى قبل الوسم   
      .clearfix:before, .clearfix:after {content: "";display: table;}
.aps-shortcode ul {list-style: none;}
.aps-features-list li{ background: linear-gradient(45deg,#480048,#000000);height: 50px;margin-bottom: 10px;position: relative;width: 50%;max-width: 50%;}
  .aps-features-list li:hover{background:#d09f0d}
.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: #f9bd09;}
.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%}
  }
  3.  بعد ذلك قم بالدخول الى المشاركات او الموضوع الذى تريدان تضع به جدول مواصفات الهاتف ثم قم باضافه الكود التالى 
    <div class="aps-shortcode clearfix">
<ul class="aps-features-list">
<li>
  
<div class="aps-feature-anim">
<span class="aps-list-icon"> 
<img hight="20px" src="https://img.icons8.com/external-those-icons-fill-those-icons/24/000000/external-processor-it-components-those-icons-fill-those-icons.png" width="20px" />
</span>
<br />
<div class="aps-feature-info">
<strong>المعالج</strong>:&nbsp;Qualcomm Snapdragon 665</div>
</div>
</li>
  
<li>
<div class="aps-feature-anim">
<span class="aps-list-icon">
<img hight="20px" src="https://img.icons8.com/material-outlined/24/000000/smartphone-ram.png" width="20px" />
</span><br />
<div class="aps-feature-info">
<strong>الرام</strong>: 3/4  غيغابايت</div>
</div>
</li>
  <li>
<div class="aps-feature-anim">
<span class="aps-list-icon">
<img hight="20px" src="https://img.icons8.com/ios-filled/50/000000/memory-slot.png" width="20px" />
</span><br />
<div class="aps-feature-info">
<strong>الذاكرة</strong>:32/64/128 غيغابايت</div>
</div>
</li>
  
<li>
<div class="aps-feature-anim">
<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 />
<div class="aps-feature-info">
<strong>الشاشة</strong>: حجم 6.5 إنش&nbsp;IPS LCD</div>
</div>
</li>
  
<li>
<div class="aps-feature-anim">
<span class="aps-list-icon">
<img hight="20px" src="https://img.icons8.com/material-rounded/24/000000/camera--v2.png" width="20px" />
</span>
<br />
<div class="aps-feature-info">
<strong>الكاميرا</strong>: 12 + 8 + 2 + 2 ميغابكسل</div>
</div>
</li>
  
<li>
<div class="aps-feature-anim">
<span class="aps-list-icon">
<img hight="20px" src="https://img.icons8.com/ios-filled/50/000000/battery-.png" width="20px" />
</span>
<br />
<div class="aps-feature-info">
<strong>البطاريه</strong>:4000مللى امبير</div>
</div>
</li>
  
<li>
<div class="aps-feature-anim">
<span class="aps-list-icon">
<img hight="20px" src="https://img.icons8.com/ios-glyphs/30/000000/operating-system.png" width="20px" />
</span>
<br />
<div class="aps-feature-info">
<strong>النظام</strong>: Android 10.0</div>
</div>
</li>
</ul>
</div>
  4. اذا اردت اضافه الجدول الى صفحه معينه يمكنك اضافه الكود التالى الى الصفحه
<style>
  .clearfix:before, .clearfix:after {content: "";display: table;}
.aps-shortcode ul {list-style: none;}
.aps-features-list li{ background: linear-gradient(45deg,#480048,#000000);height: 50px;margin-bottom: 10px;position: relative;width: 50%;max-width: 50%;}
  .aps-features-list li:hover{background:#d09f0d}
.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: #f9bd09;}
.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%}
  }
</style>
<div class="aps-shortcode clearfix">
<ul class="aps-features-list">
<li>
  
<div class="aps-feature-anim">
<span class="aps-list-icon"> 
<img hight="20px" src="https://img.icons8.com/external-those-icons-fill-those-icons/24/000000/external-processor-it-components-those-icons-fill-those-icons.png" width="20px" />
</span>
<br />
<div class="aps-feature-info">
<strong>المعالج</strong>:&nbsp;Qualcomm Snapdragon 665</div>
</div>
</li>
  
<li>
<div class="aps-feature-anim">
<span class="aps-list-icon">
<img hight="20px" src="https://img.icons8.com/material-outlined/24/000000/smartphone-ram.png" width="20px" />
</span><br />
<div class="aps-feature-info">
<strong>الرام</strong>: 3/4  غيغابايت</div>
</div>
</li>
  <li>
<div class="aps-feature-anim">
<span class="aps-list-icon">
<img hight="20px" src="https://img.icons8.com/ios-filled/50/000000/memory-slot.png" width="20px" />
</span><br />
<div class="aps-feature-info">
<strong>الذاكرة</strong>:32/64/128 غيغابايت</div>
</div>
</li>
  
<li>
<div class="aps-feature-anim">
<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 />
<div class="aps-feature-info">
<strong>الشاشة</strong>: حجم 6.5 إنش&nbsp;IPS LCD</div>
</div>
</li>
  
<li>
<div class="aps-feature-anim">
<span class="aps-list-icon">
<img hight="20px" src="https://img.icons8.com/material-rounded/24/000000/camera--v2.png" width="20px" />
</span>
<br />
<div class="aps-feature-info">
<strong>الكاميرا</strong>: 12 + 8 + 2 + 2 ميغابكسل</div>
</div>
</li>
  
<li>
<div class="aps-feature-anim">
<span class="aps-list-icon">
<img hight="20px" src="https://img.icons8.com/ios-filled/50/000000/battery-.png" width="20px" />
</span>
<br />
<div class="aps-feature-info">
<strong>البطاريه</strong>:4000مللى امبير</div>
</div>
</li>
  
<li>
<div class="aps-feature-anim">
<span class="aps-list-icon">
<img hight="20px" src="https://img.icons8.com/ios-glyphs/30/000000/operating-system.png" width="20px" />
</span>
<br />
<div class="aps-feature-info">
<strong>النظام</strong>: Android 10.0</div>
</div>
</li>
</ul>
</div>

تحميل جميع اكواد الاضافه

Zip Phone specifications.zip تحميل
تعديل المقال
الأقسام
تعليقات
إرسال تعليق

يرجى اتباع ارشادات المحتوى عند كتابه التعليق




    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -