هل ترغب في تقديم محتوى تقني احترافي يجذب الزوار إلى مدونتك؟ إذا كنت تدير مدونة تقنية على بلوجر، فإن إضافة جدول مواصفات وتقييم الهاتف يمكن أن يكون وسيلة ممتازة لعرض المعلومات بطريقة واضحة ومنظمة. في هذا المقال، سأشرح لك خطوة بخطوة كيفية القيام بذلك بسهولة.
 |
| كيفية إضافة جدول مواصفات وتقييم الهاتف في مدونات بلوجر |
لماذا تعتبر جداول مواصفات الهواتف ضرورية؟
عند البحث عن هاتف جديد، يعتمد المستخدمون بشكل أساسي على المراجعات التقنية والمقارنات. وهنا تأتي أهمية الجداول؛ فهي تقدم المعلومات بشكل منسق يتيح للمستخدمين مقارنة المواصفات والتقييمات بسرعة.
جرّب المظهر الآن!مميزات إضافة جدول مواصفات الهاتف في مدونتك:
- تجربة مستخدم محسنة: تسهل الجداول عملية قراءة المعلومات.
- مظهر احترافي: تمنح مدونتك لمسة جمالية وعصرية.
- زيادة التفاعل: المحتوى الواضح يشجع الزوار على قضاء وقت أطول في موقعك.
- تحسين السيو: تساعد الجداول في تحسين ترتيب المقالة في محركات البحث.
خطوات إضافة جدول مواصفات الهاتف في بلوجر
اتبع هذه الخطوات لإنشاء جدول مواصفات وتقييم الهاتف بسهولة:
الخطوة الأولى: الدخول إلى لوحة تحكم بلوجر
- انتقل إلى بلوجر.
- قم بتسجيل الدخول باستخدام حساب جوجل الخاص بك.
- اختر المدونة التي ترغب في تعديلها.
- اضغط على المظهر ثم تعديل HTML.
الخطوة الثانية: إضافة كود CSS لتصميم الجدول
للحصول على جدول بمظهر احترافي، أضف كود CSS التالي مباشرة فوق وسم ]]>b:skin>.
ثم أضف الكود التالي:
/* 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 لعرض الجدول
بعد حفظ التعديلات، انتقل إلى:
- المشاركات → مقال جديد
- اضغط على
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 التي يجب التعديل عليها.
كيفية تخصيص الجدول بسهولة؟
- تغيير الألوان: يمكنك تعديل كود
CSSبسهولة لتغيير ألوان الخلفية والخطوط. - تعديل التقييمات: ببساطة قم بتعديل الأرقام داخل شريط التقدم.
- إضافة أقسام جديدة: انسخ قسم التقييم وأضف المزيد من التقييمات حسب الحاجة.
الخاتمة
إضافة جدول مواصفات وتقييم الهاتف في مدونات بلوجر هو خطوة ذكية لتحسين تجربة المستخدم وزيادة التفاعل على موقعك. باستخدام هذه الخطوات البسيطة، يمكنك تقديم محتوى تقني احترافي يجذب المزيد من الزوار.
الاسالة الشائعة
هل يمكنني استخدام هذا الجدول لأي هاتف؟
نعم، يمكنك بسهولة تعديل التقييمات والأسماء لتناسب أي جهاز.
هل يؤثر الجدول على سرعة تحميل الصفحة؟
لا، الكود المستخدم بسيط وخفيف، ولن يؤثر على أداء موقعك.
هل يمكنني تخصيص التصميم أكثر؟
بالتأكيد! يمكنك تعديل أكواد CSS لتغيير الألوان والخطوط وفقًا لتصميم مدونتك.
هل أحتاج إلى خبرة في البرمجة؟
لا، الشرح هنا بسيط ومناسب حتى للمبتدئين.
كيف أضمن أن الجدول يظهر بشكل متجاوب؟
الكود الذي تم استخدامه يدعم التصميم المتجاوب، وسيبدو رائعًا على أي جهاز.
إذا كانت لديك أي أسئلة أو استفسارات، فلا تتردد في مشاركتها بالتعليقات أدناه! ابدأ الآن، وأضف لمستك الإبداعية لمدونتك!
أصل للمعلوميات
via IFTTT
