جدول مواصفات الهاتف مثل موقع موبيزل

جدول مواصفات الهاتف مثل موقع موبيزل حيث اننا قمنا بنشر مقال سابق عن جدول مواصفات الهاتف ولكن فى هذا المقال نقدم كم جدول مواصفات الهاتف مثل موقع موبيزل

جدول مواصفات الهاتف مثل موقع موبيزل حيث اننا قمنا بنشر مقال سابق عن جدول مواصفات الهاتف ولكن فى هذا المقال نقدم لكم جدول مواصفات الهاتف مثل موقع موبيزل تماما وبدون اى تغيير وتم تكويد هذه الاضافه بواسطه موقعنا اسكربتات اونلاين.


هذه الاضافه مطابقه لجدول مواصفات الهاتف الخاص بموقع موبيزول وتم تكويد هذه الاضافه بلغتى html&css فقط  ولمعاينه الاضافه يمكنك الضغط على الزر التالى

معاينه

جدول مواصفات الهاتف مثل موقع موبيزل 

1.قم بالدخول الى لوحه التحكم الخاصه بمدونه بلوجر ثم قم باختيارالمظهرثم تعديل html
2.قم بالبحث عن وسم ]]></b:skin> ثم اضف الكود التالى اعلى الوسم     
ul.phone-spec-table {width: 100%;margin-top: 30px;margin-bottom: 30px;}ul.phone-spec-table li {height: 50px;width: 95%;  margin-bottom: 10px; position: relative; color: #fff; line-height: 3; font-weight: 700; list-style: none;background: #155a9c;}ul.phone-spec-table li span:nth-child(1){float: right; height: 50px; display: inline-block; background: #cc0000; width: 50px; margin: 0 0 0 0; position: relative; z-index: 10;text-align: center;}ul.phone-spec-table li span:nth-child(1) i{font-size: 20px;}ul.phone-spec-table li span:nth-child(2){ float: right;display: block;height: 100%; text-align: right; padding: 2px 8px;max-width: 100%;position: relative; z-index: 10;}ul.phone-spec-table li::after{position: absolute; top: 0; right: 0;background: #02a8de; height: 100%;width: 0; content: '';transition: all 2s ease;}ul.phone-spec-table li i{font-family:'fontawesome';}ul.phone-spec-table li:hover::after{width:100%}@media screen and (max-width:550px){ul.phone-spec-table li span:nth-child(1) {height: 35px; width: 35px;}ul.phone-spec-table li {height: 35px;}ul.phone-spec-table li span:nth-child(2) {font-size: 10px;}}
3.قم بنسخ الكود التالى  واضفه فى الصفحه التى تريد ان يظهر بها الجدول
<ul class='phone-spec-table'>
 <li><span><i class="fa fa-microchip"></i></span>
 <span><strong>المعالج: </strong></span>
  </li>
  <li><span><i class='fas fa-memory'></i></span>
    <span><strong>التخزين / الرام: </strong></span>
  </li>
  <li><span><i class='fas fa-camera'></i></span>
    <span><strong>الكاميرا: </strong></span>
  </li>
  <li><span><i class='fas fa-desktop'></i></span>
    <span><strong>الشاشة: </strong></span>
  </li>
  <li><span><i class='fas fa-cogs'></i></span>
    <span><strong>نظام التشغيل: </strong></span>
  </li>
  <li><span><i class='fas fa-battery-three-quarters'></i></span>
    <span><strong>البطارية: </strong></span>
  </li>
  <li><span><i class='fas fa-dollar-sign'></i></span>
    <span><strong>السعر: </strong></span>
  </li></ul>

4.تاكد من ان مكتبه fontawesome موجوده فى قالبك واذا لم تجدها  اضف الكود التالى اعلى وسم </head> او اعلى وسم </body>

<script crossorigin='anonymous' src='https://kit.fontawesome.com/568d186ba4.js'/>

الايقونات لن تظهر فى جميع قوالب بلوجر لان بعض القوالب لا تدعم مكتبه fontawesome

تحميل الاكواد

specification table.zip 941B

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

الاسم احمد منصور امتلك خبره اكثر من ثلاث سنوات فى مجال التدوين مهتم بمجال التدوين والبرمجه

إرسال تعليق