جدول لعرض مواصفات الموبايل بلغة الماتريال V1

جدول لعرض مواصفات الموبايل بلغة الماتريال V1

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

مميزات الجدول :

متجاوب مع جميع الشاشات وهذه المشكلة الرئيسية التي تواجة معظم المتابعين .
تستطيع تغيير الالوان والايقونات كما تشاء .
يتم وضع الايقونات تلقائي؟ سوف تقول كيف هذا هل تقصد انني لا احتاج اكواد لاضافتها في كل.
تدوينة اقوم بعملها . الاجابة نعم كما اخبرتك انني انشر كل ما هو حصري وهدفي الوحيد ان اساعد المتابعين واسهل علليهم كل شيء .
تستطيع اضافة عدد لا نهائي من الايقونات .
والمزييييييييد.

طريقة التركيب وهي ابسط من البساطة سوف اشرحها لك في فيديو و بي الكتابة ولكن انصحك بي الفيديو لانني قمت بشرح كل شيء بتفصيل.

قم بدخول الي المظهر ثم تعديل HTML وقم بوضع الكود اسفل <head>

<link href='https://pro.fontawesome.com/releases/v5.13.0/css/all.css' rel='stylesheet'/>

قم بدخول الي المظهر ثم تعديل HTML وقم بوضع الكود فوق ]]></b:skin>


.post-body ul {all: revert;}
.post-body ul li {
all: unset;
list-style: none;
background: #614124;/*background text*/
padding: 2px 20px 2px 0px;
margin: 16px 4px;
border-radius: 6px;
display: block;
position: relative;
color: #fff;/*color text*/
}

.post-body ul li:before {
content: "\f6ad";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 free", "Font Awesome 5 Solid", "Font Awesome 5 Regular", "Font Awesome 5 Light", "Font Awesome 5 Duotone", "Font Awesome 5 Brands";
    background: #de822c;/*background icon*/
    padding: 5px 7px;
    border-radius: 8px;
    margin: 0px 0 0 5px;
    position: absolute;
    right: -20px;
    top: -12%;
    font-size: 20px;
    color: #fff;/*color icon*/
-webkit-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.post-body ul li:hover:before{transform: scale(1.2);}

/*The Icon*/
.post-body ul li:nth-child(1):before{content: "\f10b";}/*Name*/
.post-body ul li:nth-child(2):before{content: "\f030";}/*camera*/
.post-body ul li:nth-child(3):before{content: "\f241";}/*battery*/
.post-body ul li:nth-child(4):before{content: "\f085";}/*gears*/
.post-body ul li:nth-child(5):before{content: "\f26c";}/*display*/
.post-body ul li:nth-child(6):before{content: "\f2db";}/*Cpu*/
.post-body ul li:nth-child(7):before{content: "\f7c2";}/*sd-card*/
.post-body ul li:nth-child(8):before{content: "\f155";}/*$*/
.post-body ul li:nth-child(9):before{content: "\f1c0";}/*storage*/
.post-body ul li:nth-child(10):before{content: "\f538";}/*memory*/
.post-body ul li:nth-child(11):before{content: "\f778";}/*memory*/

شرح كتابي

الجدول يعتمد علي وسم ul في بلوجر

:nth-child(11) بمعني في السطر الحادي عشر

:nth-child(5) بمعني في السطر الخامس

content: "\f778"; الايقونة

موقع الايقونات

جدول لعرض مواصفات الموبايل بلغة الماتريال V1