أخر الاخبار
بلوجر
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 تحميل
تعديل المقال
الأقسام

مقالات قد تهمك

تعليقات
إرسال تعليق

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