اضافه جدول مواصفات وتقييم الهاتف لمدونات بلوجر

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

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

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

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

معاينة

مميزات جدول مواصفات الهاتف

جدول تقييم الموبايلات يساهم في توفير الوقت والجهد والمال على القارئ من خلال إجراء مقارنات حقيقية بين الهواتف. والكثير من المزايا التي من أبرزها:

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

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

1. قم بالدخول إلى لوحة التحكم في بلوجر
2. أبحث عن الوسم ]]></b:skin>
3. انسخ كود CSS وقم بإضافته أعلاه.
4. انقر حفظ القالب.

/* Code By | ♡ ارشر للمعلوميات */
/*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 وانسخ كود جافا سكريبت التالي والصقة في المربع وأبدا في تعديل التقييم لمواصفات الهاتف

<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>

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

لا يدعم هذا الموقع انتهاك حقوق الطبع والنشر. نحن نحترم جهود كل مدون ونشارك فقط المحتوى المتاح مجاناً عبر الإنترنت | إذا وجدت مواد محمية بحقوق الطبع والنشر موجودة على موقعنا وتريد إزالتها فأتصل بنا لإزالتها في غضون 24 ساعة