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

لو عندك مدونة تقنية على بلوجر وبتنشر فيها مراجعات أو مقالات عن الهواتف، فأكيد فكرت قبل كده إزاي تعرض المواصفات بطريقة تكون جذابة وواضحة. معظم الزوّار لما يدخلوا يقروا عن موبايل معين، بيهمهم يشوفوا المواصفات بسرعة ومن غير لَف ودوران. وهنا بييجي دور أداة جدول المواصفات اللي بتقدملك حل أنيق وسهل.

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

ما هو جدول مواصفات الهاتف؟

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

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

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

قبل ما تستخدم الأداة، تعال شوف شكلها النهائي:

smartphone

| الشاشة: Dynamic AMOLED بحجم 5.8 بوصة بدقة

fullscreen

| المعالج: Exynos 9820 - ثماني النواة - 8 نانومتر

photo_camera

| الكاميرات: خلفية 16+12 م.ب / امامية 10 م.ب

memory

| الرام+الذاكرة: 6/8 + 128/256 جيجابايت

code

| النظام: Android 9.0 (Pie)

battery_full

| البطارية: 3100 ملي امبير - شحن 15 واط

كما هو واضح اعلاة، التصميم داكن وأنيق، الأيقونات واضحة، والمحتوى منظم في مربعات متناسقة. الشكل ده بيدي مصداقية أكتر للمقال، وبيخلي الزائر يقضي وقت أطول يقرأ باقي التفاصيل.

اضافة جدول المواصفات لبلوجر؟

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

خطوات التركيب

• ادخل على لوحة التحكم في بلوجر
• الذهاب إلى قسم المظهر
• بجانب تخصيص اختر تعديل html
• ثم ابحث عن وسم head (بداية القالب)
• اسفلة مباشرة الصق الكود التالي

استدعاء مكتبة الأيقونات

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght@400&display=swap" rel="stylesheet">
  

الخطوة الثانية

• ابحث عن وسم ]]></b:skin>
• أضف الكود التالي اعلاة مباشرة
• اضغط حفظ القالب

css Code

.phone-box {
  max-width: 400px;
  margin: auto;
  font-family: 'changa', sans-serif;
  direction: rtl;
  color: #333;
}

.phone-img {
  width: 100%;
  border-radius: 10px;
}

.brand-info {
  font-size: 15px;
  margin: 10px 0 15px;
}

.specs-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.spec-item {
  background-color: #1c2238;
  color: #fff;
  padding: 10px 12px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: background 0.3s, transform 0.3s;
}

.icon-box {
  background-color: #111627;
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.icon-box .material-symbols-rounded {
  color: #fff;
  font-size: 20px;
}
.divider {
  margin: 0 10px;
  color: #ffffff99;
  font-weight: bold;
}

.text {
  flex: 1;
  font-size: 14px;
}

.spec-item:hover {
  background-color: #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
  

الخطوة الأخيرة

• اذهب الى تبويب المشاركات
• اضغط على إنشاء مقال جديد
• حوّل للمحرر "HTML".
• الصق الكود التالي في المكان اللي يناسبك.
• اضغط معاينة علشان تشوف النتيجة.

HTML Code

<div class="phone-box">
  <img src="https://i5.walmartimages.com/seo/Pre-Owned-Samsung-Galaxy-S10-G973U-T-Mobile-Only-128GB-Prism-Blue-C-Refurbished-Fair_c250b27a-4350-49a6-a9ad-be63b2cd0e40.561eb02b9b393fa015379df782475e0f.jpeg" alt="هاتف سامسونج S10e" class="phone-img" />

  <div class="specs-box">
    <div class="spec-item">
      <div class="icon-box">
        <span class="material-symbols-rounded">smartphone</span>
      </div>
      <span class="divider">|</span>
      <span class="text"><strong>الشاشة:</strong> Dynamic AMOLED بحجم 5.8 بوصة بدقة</span>
    </div>

    <div class="spec-item">
      <div class="icon-box">
        <span class="material-symbols-rounded">fullscreen</span>
      </div>
      <span class="divider">|</span>
      <span class="text"><strong>المعالج:</strong> Exynos 9820 - ثماني النواة - 8 نانومتر</span>
    </div>

    <div class="spec-item">
      <div class="icon-box">
        <span class="material-symbols-rounded">photo_camera</span>
      </div>
      <span class="divider">|</span>
      <span class="text"><strong>الكاميرات:</strong> خلفية 16+12 م.ب / امامية 10 م.ب</span>
    </div>

    <div class="spec-item">
      <div class="icon-box">
        <span class="material-symbols-rounded">memory</span>
      </div>
      <span class="divider">|</span>
      <span class="text"><strong>الرام+الذاكرة:</strong> 6/8 + 128/256 جيجابايت</span>
    </div>

    <div class="spec-item">
      <div class="icon-box">
        <span class="material-symbols-rounded">code</span>
      </div>
      <span class="divider">|</span>
      <span class="text"><strong>النظام:</strong> Android 9.0 (Pie)</span>
    </div>

    <div class="spec-item">
      <div class="icon-box">
        <span class="material-symbols-rounded">battery_full</span>
      </div>
      <span class="divider">|</span>
      <span class="text"><strong>البطارية:</strong> 3100 ملي امبير - شحن 15 واط</span>
    </div>
  </div>
</div>
  

الخلاصة

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

جرّبها، ولو عجبتك شاركنا رأيك أو رابط لمقالك بعد ما تضيفها، وهنكون مبسوطين ندعمك ونشوف شغلك!