كيفية إضافة جدول مواصفات الهاتف

 ماهي طريقة إنشاء جدول مواصفات وتقييم الهاتف

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

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

لماذا يعد جدول المواصفات مهمًا؟

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

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

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

الفوائد الرئيسية لجداول المواصفات:

1. سهولة المقارنة:

تتيح الجداول للمستخدمين مقارنة المواصفات الأساسية بين الهواتف المختلفة في لمح البصر. هذا يساعدهم على اتخاذ قرارات مستنيرة بسرعة.

2. تنظيم المعلومات:

تُظهر الجداول المعلومات بطريقة مرتبة، مما يسهل على القارئ فهم الفروقات بين الهواتف دون الحاجة للبحث في نصوص طويلة ومعقدة.

3. توفير الوقت:

بدلاً من قراءة مراجعات مطولة، يمكن للمستخدمين الاطلاع على النقاط الأساسية في الجداول، مما يوفر الوقت والجهد.

4. تعزيز التجربة البصرية:

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

5. تسليط الضوء على الخصائص المهمة:

تتيح الجداول للمستخدمين التركيز على الخصائص التي تهمهم، مثل الكاميرا، المعالج، والبطارية، مما يسهل عليهم اتخاذ القرار المناسب بناءً على احتياجاتهم الشخصية.

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

ماهي خطوات إضافة جدول مواصفات وتقييم الهاتف؟

1. الدخول إلى لوحة تحكم بلوجر:

افتح حسابك على بلوجر واختر المدونة التي ترغب في تعديلها

مزايا إضافة جدول مواصفات الهاتف في مدونتك

تجربة مستخدم محسنة:

تسهل الجداول عملية قراءة المعلومات وتجعلها أكثر وضوحًا.

مظهر احترافي:

تضفي الجداول لمسة جمالية وعصرية على تصميم مدونتك.

زيادة التفاعل:

المحتوى الواضح يشجع الزوار على قضاء وقت أطول في موقعك.

تحسين محركات البحث (SEO):

تساعد الجداول في تحسين ترتيب المقالات في محركات البحث.

خطوات إضافة جدول مواصفات الهاتف في بلوجر

اتبع هذه الخطوات لإنشاء جدول مواصفات وتقييم الهاتف بسهولة:

الخطوة الأولى: الدخول إلى لوحة تحكم بلوجر

1. زيارة موقع بلوجر:

افتح المتصفح وانتقل إلى [موقع بلوجر](https://www.blogger.com).

2. تسجيل الدخول:

استخدم حساب جوجل الخاص بك لتسجيل الدخول. أدخل بيانات الاعتماد الخاصة بك واضغط على "تسجيل الدخول".

3. اختيار المدونة:

بعد تسجيل الدخول، ستظهر لك قائمة بجميع المدونات التي تمتلكها. اختر المدونة التي ترغب في تعديلها بالنقر عليها.

4. الدخول إلى قسم المظهر:

في القائمة الجانبية، اضغط على خيار "المظهر".

5. تعديل HTML:

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

الخطوة الثانية: إضافة كود CSS لتصميم الجدول

للحصول على جدول بمظهر احترافي، يجب إضافة كود CSS التالي:

1. تحديد مكان إدراج الكود:

ابحث عن وسم >b:skin في الكود. سيكون هذا هو المكان الذي تحتاج لإضافة الكود فيه.

الكود:

/*https://ar-cher.com*/
.form-back{box-sizing:border-box;text-align:center;background:#fff;padding:10px;border:2px solid #ccc;border-radius:15px 15px 15px 15px;box-shadow:0 5px 5px #ccc}
.rate-addresses{display:flex;justify-content:center;align-items:center;margin:10px}
.title1{display:flex;justify-content:center;align-items:center;background:#3560ab;width:30%;height:35px;padding:5px;color:#fff;border-radius:15px 0 0 15px;border:2px solid #3560ab;margin-right:-5px;position:relative;text-align:center;font-size:20px}
.circle{background:#fff;width:130px;height:130px;border-radius:50%;border:2px solid #3560ab;text-align:center;position:relative}
.line-btwn{width:15px}
.rate{display:block;background:#fff;padding:5px;margin-top:5px;box-shadow:0 2px 2px #ccc;border-radius:5px 5px 5px 5px;border:1px solid #ccc}
.tt1{font-size:30px;color:#3560ab}
.tt2{font-size:30px;color:#3560ab;margin-top:45px;border:none;background:none}
.num{float:left}
.info{float:right;margin-right:5px}
progress{width:100%}
.bold{color:#3560ab}
@media (max-width:400px){.title1;amp;gt;tt{font-size:10px}.title1{height:25px;margin-right:-8px}.circle{width:60px;height:60px}.tt1{font-size:12px}.tt2{font-size:17px;color:#3560ab;margin-top:22px;border:none;background:none}}

الخطوة الثالثة: إضافة كود HTML لعرض الجدول

بعد حفظ التعديلات التي أجريتها على تصميم المدونة، يمكنك الآن إضافة جدول المواصفات في مقال جديد. اتبع الخطوات التالية:

1. إنشاء مقال جديد:

من لوحة التحكم في بلوجر، انتقل إلى قسم "المشاركات".

اضغط على زر "مقال جديد" لبدء كتابة مقال جديد.

2. تفعيل وضع HTML:

في محرر المقال، ابحث عن زر "HTML" في الشريط العلوي. اضغط عليه لتفعيل وضع HTML، مما يتيح لك إدخال الأكواد مباشرة.

3. إضافة كود HTML للجدول:

انسخ وألصق الكود التالي في المحرر:

اضغط على HTML ثم أضف الكود التالي:

<div class="form-back">
<br>
<b class="tt1" dir="rtl">تقييم هاتف Iphone Max Pro</b>
<div dir="ltr" class="rate-addresses">
<div class="title1"><tt dir="rtl">التقييم</tt></div>
<div class="circle">
<button class="tt2">79%</button>
</div>

<div class="line-btwn"></div>

<div class="title1"><tt dir="rtl">الجودة</tt></div>
<div class="circle">
<button class="tt2">80%</button>
</div>
</div>

<br>
<div class="rate">
<label dir="ltr" class="num"><b class="bold">10</b> / 9.5</label>
<label class="info">التصميم</label>
<br>
<progress dir="rtl" value="9.5" max="10"></progress>
</div>

<div class="rate">
<label dir="ltr" class="num"><b class="bold">10</b> / 8.4</label>
<label class="info">الشاشة</label>
<br>
<progress dir="rtl" value="8.4" max="10"><div class="rate">
<label dir="ltr" class="num"><b class="bold">10</b> / 4.5</label>
<label class="info">البطارية</label>
<br>
<progress dir="rtl" value="4.5" max="10"></progress>
</div></progress>
</div>

<div class="rate">
<label dir="ltr" class="num"><b class="bold">10</b> / 7.5</label>
<label class="info">الكاميرا</label>
<br>
<progress dir="rtl" value="7.5" max="10"></progress>
</div>

<div class="rate">
<label dir="ltr" class="num"><b class="bold">10</b> / 6.5</label>
<label class="info">المعالج</label>
<br>
<progress dir="rtl" value="6.5" max="10"></progress>
</div>

<div class="rate">
<label dir="ltr" class="num"><b class="bold">10</b> / 5.6</label>
<label class="info">نظام التشغيل</label>
<br>
<progress dir="rtl" value="5.6" max="10"></progress>
</div>

<div class="rate">
<label dir="ltr" class="num"><b class="bold">10</b> / 4.5</label>
<label class="info">البطارية</label>
<br>
<progress dir="rtl" value="4.5" max="10"></progress>
</div>

<div class="rate">
<label dir="ltr" class="num"><b class="bold">10</b> / 4.0</label>
<label class="info">التخزين / الرام</label>
<br>
<progress dir="rtl" value="4.0" max="10"></progress>
</div>
<br>
</div>

تحذير!
لقد قمنا بتحديد القيم في كود html التي يجب التعديل عليها.

  <div class="form-back">

<br>

<b class="tt1" dir="rtl">تقييم هاتف Iphone Max Pro</b>

<div dir="ltr" class="rate-addresses">

<div class="title1"><tt dir="rtl">التقييم</tt></div>

<div class="circle">

<button class="tt2">79%</button>

</div>

<div class="line-btwn"></div>

<div class="title1"><tt dir="rtl">الجودة</tt></div>

<div class="circle">

<button class="tt2">80%</button>

</div>

</div>

<br>

<div class="rate">

<label dir="ltr" class="num"><b class="bold">10</b> / 9.5</label>

<label class="info">التصميم</label>

<br>

<progress dir="rtl" value="9.5" max="10"></progress>

</div>

<div class="rate">

<label dir="ltr" class="num"><b class="bold">10</b> / 8.4</label>

<label class="info">الشاشة</label>

<br>

<progress dir="rtl" value="8.4" max="10"><div class="rate">

<label dir="ltr" class="num"><b class="bold">10</b> / 4.5</label>

<label class="info">البطارية</label>

<br>

<progress dir="rtl" value="4.5" max="10"></progress>

</div></progress>

</div>

<div class="rate">

<label dir="ltr" class="num"><b class="bold">10</b> / 7.5</label>

<label class="info">الكاميرا</label>

<br>

<progress dir="rtl" value="7.5" max="10"></progress>

</div>

<div class="rate">

<label dir="ltr" class="num"><b class="bold">10</b> / 6.5</label>

<label class="info">المعالج</label>

<br>

<progress dir="rtl" value="6.5" max="10"></progress>

</div>

<div class="rate">

<label dir="ltr" class="num"><b class="bold">10</b> / 5.6</label>

<label class="info">نظام التشغيل</label>

<br>

<progress dir="rtl" value="5.6" max="10"></progress>

</div>

<div class="rate">

<label dir="ltr" class="num"><b class="bold">10</b> / 4.5</label>

<label class="info">البطارية</label>

<br>

<progress dir="rtl" value="4.5" max="10"></progress>

</div>

<div class="rate">

<label dir="ltr" class="num"><b class="bold">10</b> / 4.0</label>

<label class="info">التخزين / الرام</label>

<br>

<progress dir="rtl" value="4.0" max="10"></progress>

</div>

<br>

</div>

4. مراجعة المقال:

بعد إضافة الكود، يمكنك التبديل إلى وضع "التصميم" لمعاينة كيف سيظهر الجدول في المقال.

5. نشر المقال:

   - إذا كنت راضيًا عن الشكل والمحتوى، اضغط على زر "نشر" لمشاركة المقال مع زوار مدونتك.

---

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

بهذه الخطوات، ستتمكن من إعداد التصميم الأساسي للجدول لجعل محتوى مدونتك يبدو أكثر احترافية وجاذبية. إذا كنت بحاجة لمزيد من المساعدة، فلا تتردد في الاستفسار!

كيفية تخصيص الجدول بسهولة

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

1. تغيير الألوان

يمكنك تعديل كود CSS لتغيير ألوان الخلفية والخطوط بكل سهولة. على سبيل المثال:

- لتغيير لون الخلفية:

  ```css

  th {

    background-color: #f2f2f2; /* استبدل هذا اللون باللون الذي تريده */

  }

  ```

- لتغيير لون الخط:

  ```css

  th, td {

    color: #333; /* استبدل هذا باللون الذي تفضله */

  }

  ```

2. تعديل التقييمات

إذا كنت تستخدم شريط تقدم أو نظام تقييم، يمكنك ببساطة تعديل الأرقام أو الرموز داخل الكود. على سبيل المثال:

```html

<p>التقييم: ★★★★☆ (4 من 5 نجوم)</p>

```

يمكنك تغيير عدد النجوم حسب تقييمك للهاتف.

3. إضافة أقسام جديدة

إذا كنت بحاجة إلى إضافة المزيد من التقييمات أو المواصفات، يمكنك نسخ القسم الموجود وإضافة المزيد حسب الحاجة. على سبيل المثال:

```html

<tr>

  <td>معالج</td>

  <td>Snapdragon 888</td>

</tr>

```

يمكنك تكرار هذا النموذج لإضافة أي مواصفات جديدة ترغب في تضمينه

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

الخطوة الأولى: الدخول إلى لوحة تحكم بلوجر

انتقل إلى موقع بلوجر.

قم بتسجيل الدخول باستخدام حساب جوجل الخاص بك.

اختر المدونة التي ترغب في تعديلها.

اضغط على "المظهر" ثم "تعديل HTML".

الخطوة الثانية: إضافة كود CSS لتصميم الجدول

للحصول على جدول بمظهر احترافي، عليك إضافة كود CSS التالي مباشرة فوق وسم ]]>b:skin>:

css

Copy

<style>

  table {

    width: 100%;

    border-collapse: collapse;

    margin: 20px 0;

  }

  th, td {

    border: 1px solid #ddd;

    padding: 10px;

    text-align: left;

  }

  th {

    background-color: #f2f2f2;

  }

</style>

الخطوة الثالثة: إضافة كود HTML للجدول

بعد إضافة كود CSS، يمكنك إنشاء جدول المواصفات باستخدام الكود التالي:

html

Copy

<table>

  <thead>

    <tr>

      <th>المواصفات</th>

      <th>التفاصيل</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>الشاشة</td>

      <td>6.5 بوصة، AMOLED</td>

    </tr>

    <tr>

      <td>الذاكرة</td>

      <td>128 جيجابايت، 8 جيجابايت RAM</td>

    </tr>

    <tr>

      <td>الكاميرا</td>

      <td>64 ميجابكسل</td>

    </tr>

    <tr>

      <td>البطارية</td>

      <td>4500 مللي أمبير</td>

    </tr>

  </tbody>

</table>

الخطوة الرابعة: نشر المقالة

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

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

أتمنى أن تكون هذه الصياغة قد نالت إعجابك!

Share

Compare

@Web-Search

Compare

@GPT-4o

Compare

@Gemini-2.0-Flash

Speak

@ElevenLabs

أين أجد وسم `]]>b:skin>` ف

ي بلوجر؟

هل يمكن استخدام جدول مختلف عن المثال المقدم؟

كيف يمكنني إضافة صور داخل الجدول؟

2. إنشاء مشاركة جديدة:

   - انقر على "مشاركة جديدة" لبدء كتابة مقال جديد حول الهاتف الذي ترغب في مراجعته.

3. تفعيل محرر HTML:

في المحرر، ابحث عن خيار "HTML" في الزاوية العلوية اليسرى، وانقر عليه لبدء إدخال الكود.

4. إضافة كود الجدول:

استخدم الكود التالي لإنشاء جدول مواصفات الهاتف:

5. **تخصيص الجدول**:

   - يمكنك تعديل المحتوى داخل الجدول وفقًا لمواصفات الهاتف الذي تقوم بمراجعته.

6. **إضافة تقييم الهاتف**:

   - بعد الجدول، يمكنك كتابة تقييمك باستخدام نص أو نجوم، مثل:

   ```html

   <p>التقييم: ★★★★☆ (4 من 5 نجوم)</p>

   ```

7. **نشر المشاركة**:

   - بعد الانتهاء من التعديلات، انقر على "نشر" لمشاركة المقال مع زوار مدونتك.

### نصائح إضافية

- تأكد من أن الجدول متناسق مع تصميم مدونتك.

- يمكن إضافة صور أو لقطات شاشة للهاتف لزيادة جاذبية المحتوى.

- تفاعل مع زوارك من خلال الرد على تعليقاتهم واستفساراتهم حول الهاتف.

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

--- 

أتمنى أن تكون هذه الصياغة قد نالت إعجابك!