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

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

كيفية اضافة مواصفات الهواتف علي بلوجر

كيفية اضافة جدول مواصفات الهواتف علي بلوجر، إذا كنت مدونًا على الإنترنت أو تمتلك مدونة تقنية، فلا شك أنك تعرف جيدًا إضافة مواصفات الهواتف الشهيرة والجديدة على مواقع WordPress، فإن المكون plugin رائع يضم العديد من الرموز مع شرح بسيط لمواصفات هواتف مثل: البطارية، ومساحة التخزين، وذاكرة الوصول العشوائي، ونظام الهاتف، والكاميرا، حيث يسهل على الزائرين معرفة مواصفات الهاتف الجديدة الذي يرغبون في شراء هذا الهاتف.

إضافة مواصفات الهاتف، فهو لا غنى عنه لأصحاب المواقع التقنية، خاصة تلك التي تقدم مقالات عن مراجعات الهاتف، أو مواصفات الهاتف وأسعاره، هذا البرنامج المساعد لمواقع WordPress وهو مدفوع وليس مجانيًا ، لكن هل تعلم أنه يمكنك الآن تثبيت البرنامج المساعد لمواقع Blogger مجانًا؟، نعم يا صديقي، من خلال هذه المقالة، سنتعرف على كيفية تثبيت إضافة مواصفات الهاتف إلى مدونات بلوجر. تابع معنا.

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

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

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

الخطوة الأولي - إضافة كود 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}

الخطوة الثانية - إضافة أكواد 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) هو اسم فئة Icon، يمكنك وضع صورة مصغرة (Icon)، كما تريد أثناء وضع علامة على رمز آخر هو رمز svg، يرجى استبداله بأيقونة svg الخاصة بك، للحصول على رمز svg، تفضل بزيارة https://materialdesignicons.com.

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

<div class='mw-sp icon-nameicon'>

<b>العنوان:</b> الوصف

</div>

ℹملحوظة: إذا لم تنجح معك هذه الخطوات قم بتحميل ملف الأكواد بالترتيب بطريقة جيدة.

تحميل الملف

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