كيفية إنشاء جدول المواصفات مثل مواقع مواصفات الهواتف

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

كيف يتم إنشاء جدول المواصفات؟

لإنشاء جدول المواصفات هذا في بلوجر، تحتاج فقط إلى إضافة بعض أكواد CSS و HTML التي يسهل إضافتها. ما عليك سوى اتباع الخطوات المحددة بعناية.

معاينة اضغط هنا

الخطوة 1. إضافة أكواد CSS

انسخ كود css أدناه والصقه من قبل]]></b:skin> في القالب الخاص بك.

/* جدول مواصفات الهواتف بواسطة مينت ويب باللون الأخضر لتغيره أبحث عن (#43a047) وغيره بما يناسبك  */
.mw-sp{position:relative;width:100%;line-height:15px;font-family:'Noto Sans', sans-serif;font-size:12px;color:#455065;font-weight:400;background:#ebeff3;margin-top:5px;padding:12px 70px 12px 0}
.mw-sp:before{content:'';position:absolute;height:100%;width:50px;right:0;top:0;padding:10px;z-index:2}
.mw-sp.icon-battery:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M16 20H8V6H16M16.67 4H15V2H9V4H7.33C6.6 4 6 4.6 6 5.33V20.67C6 21.4 6.6 22 7.33 22H16.67C17.41 22 18 21.41 18 20.67V5.33C18 4.6 17.4 4 16.67 4M15 16H9V19H15V16M15 7H9V10H15V7M15 11.5H9V14.5H15V11.5Z' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#43a047} 
.mw-sp.icon-dimension:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M4,6H20V16H4M20,18A2,2 0 0,0 22,16V6C22,4.89 21.1,4 20,4H4C2.89,4 2,4.89 2,6V16A2,2 0 0,0 4,18H0V20H24V18H20Z' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#43a047}
.mw-sp.icon-chipset:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M5,3H7V5H9V3H11V5H13V3H15V5H17V3H19V5H21V7H19V9H21V11H19V13H21V15H19V17H21V19H19V21H17V19H15V21H13V19H11V21H9V19H7V21H5V19H3V17H5V15H3V13H5V11H3V9H5V7H3V5H5V3Z' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#43a047}
.mw-sp.icon-storage:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M18,8H16V4H18M15,8H13V4H15M12,8H10V4H12M18,2H10L4,8V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V4A2,2 0 0,0 18,2Z' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#43a047}
.mw-sp.icon-camera:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M12,17C10.37,17 8.94,16.21 8,15H12A3,3 0 0,0 15,12C15,11.65 14.93,11.31 14.82,11H16.9C16.96,11.32 17,11.66 17,12A5,5 0 0,1 12,17M12,7C13.63,7 15.06,7.79 16,9H12A3,3 0 0,0 9,12C9,12.35 9.07,12.68 9.18,13H7.1C7.03,12.68 7,12.34 7,12A5,5 0 0,1 12,7M20,4H16.83L15,2H9L7.17,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#43a047}
.mw-sp.icon-os:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M7 22H9V24H7V22M11 22H13V24H11V22M15 22H17V24H15V22M5 4H19A2 2 0 0 1 21 6V18A2 2 0 0 1 19 20H5A2 2 0 0 1 3 18V6A2 2 0 0 1 5 4M5 8V18H19V8H5' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#43a047}

الخطوة 2. إضافة أكواد HTML

الآن قم بلصق كود HTML الوارد أدناه حيث تريد إضافة جدول المواصفات.

<div class='mw-sp icon-battery'>
<b>سعة البطارية:</b> 5000mAh
</div>

<div class='mw-sp icon-dimension'>
<b>الأبعاد:</b> 197g, 0mm thickness
</div>

<div class='mw-sp icon-chipset'>
<b>المعالج:</b> Qualomm Snapdragon 450
</div>

<div class='mw-sp icon-storage'>
<b>التخزين:</b> 32Gb/64GB
</div>

<div class='mw-sp icon-camera'>
<b>الكاميرا:</b> Rear, 13 MP + Front, 8 Mp
</div>

<div class='mw-sp icon-os'>
<b>نطام التشغيل:</b> Android 10
</div>

إضافة أيقونة جديدة في جدول المواصفات

.mw-sp.icon-nameicon:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M7 22H9V24H7V22M11 22H13V24H11V22M15 22H17V24H15V22M5 4H19A2 2 0 0 1 21 6V18A2 2 0 0 1 19 20H5A2 2 0 0 1 3 18V6A2 2 0 0 1 5 4M5 8V18H19V8H5' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#FF6383}

معلومات:

الجزء الذي قمت بتمييزه .icon-nameicon هو اسم Class الأيقونات ، يمكنك وضع Class الأيقونة كما يحلو لك.
بينما قمت بتمييز الرمز الآخر هو رمز svg ، يرجى استبداله برمز svg الخاص بك ، للحصول على رمز svg ، يمكنك زيارة https://materialdesignicons.com

يتم توفير تنسيق كتابة HTML للرمز الجديد أدناه ، لاحظ أن الجزء الذي قمت بتمييزه هو اسم الفئة ، ويجب أن يكون اسم الفئة الخاص به هو نفس الفئة في CSS.

<div class='mw-sp icon-nameicon'>
<b>العنوان:</b> الوصف
</div>

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

تحميل اضغط هنا