اكبر مكتبة تصاميم فوتوشوب psd مفتوحة المصدر لكل المصممين

كيفية وضع جدول مواصفات الهواتف فى مواقع مراجعة الهواتف

جدول مواصفات الهاتف فى المدونة

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


الجدول الذى نقصده يشتمل على التالى :

المعالج
التخزين
الكاميرا الخلفية
الكاميرا الامامية
الشاشة
نظام التشغيل
البطارية
البلوتوث
الواى فاى
الانفرا ريد
السعر
وهكذا 

• تتوجة الى المظهر ثم تعديل  HTML ثم تقوم بوضع الاكواد فوق /b:skin .

ul.shdowtech_mobizil { width: 50%; margin: 0 auto; } ul.shdowtech_mobizil li { height: 50px; margin-bottom: 10px; position: relative; color: #fff; line-height: 3; font-weight: 700; list-style: none; background: #155a9c; } ul.shdowtech_mobizil li span:nth-child(1){ float: right; height: 100%; display: inline-block; background: #cc0000; width: 50px; margin: 0 0 0 0; position: relative; z-index: 10; } ul.shdowtech_mobizil li span:nth-child(1) i{font-size: 20px;} ul.shdowtech_mobizil 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.shdowtech_mobizil li::after{ position: absolute; top: 0; right: 0; background: #02a8de; height: 100%; width: 0; content: ""; transition: all 2s ease; } ul.shdowtech_mobizil li:hover::after{width:100%} @media (max-width: 768px){ ul.shdowtech_mobizil{ width: 100%;}}  

  

• تتوجة الى المظهر ثم تعديل  HTML ثم تقوم بوضع الاكواد اسفل b:skin .

@import url("https://pro.fontawesome.com/releases/v5.13.0/css/all.css");  

  

• ثم عندمات تريد وضع الجدول فى موضوع على موقعك ما عليك هو ان تضيف الاكود في المكان الذي تريدة.

<ul class="shdowtech_mobizil"> <li><span><i class="fas fa-microchip"></i></span><span><strong>المعالج: </strong>ثماني النواة Snapdragon 665 تكنولوجيا 11 نانو</span></li> <li><span><i class="fas fa-memory"></i></span><span><strong>التخزين / الرام: </strong> 128 جيجا مع 8 جيجا رام</span></li> <li><span><i class="fas fa-camera"></i></span><span><strong>الكاميرا: </strong> خلفية رباعية 48+8+2+2 م.ب. / امامية 16 م.ب.</span></li> <li><span><i class="fal fa-desktop"></i></span><span><strong>الشاشة: </strong>ثماني النواة Snapdragon 665 تكنولوجيا 11 نانو</span></li> <li><span><i class="fas fa-cogs"></i></span><span><strong>نظام التشغيل: </strong>اندرويد 10.0</span></li> <li><span><i class="fas fa-battery-three-quarters"></i></span><span><strong>البطارية: </strong>5000 مللي أمبير</span></li> <li><span><i class="fas fa-usd-circle"></i></span><span><strong>السعر: </strong>5000$</span></li> </ul>  

  

يمكنك اضافة وتعديل اى اسم او قسم فى الكود الاخير 

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

تحميل الكود


المصدر شادوتك