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

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

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

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

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

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

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

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

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

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

الشاشة

6.5 إنش AMOLED بدقة FHD+

المعالج

Snapdragon 8 Gen 2 بسرعة 3.2GHz

الكاميرا

108MP خلفية + 32MP أمامية

البطارية

5000mAh مع شحن سريع 67W

الرام

8GB RAM

النظام

Android 13

الذاكرة الداخلية

256GB

طريقة تركيب الجدول

يمكنك اضافه جدول مواصفات الهاتف داخل مقال موقعك مباشرة عبر نسخ الكود التالي:



<style>  
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Cairo', sans-serif; }  
        body { background: #f4f4f9; color: #333; padding: 10px; font-size: 14px; }  
        .phone-box { max-width: 100%; margin: 20px auto; background: #fff4ec; border-radius: 15px; box-shadow: 0 8px 15px rgba(255, 102, 0, 0.1); padding: 10px; }  
        .phone-box h2 { text-align: center; color: #ff6600; font-size: 1.4rem; margin-bottom: 15px; }  
        .spec-card { background: #fff; margin-bottom: 12px; padding: 10px; border-radius: 12px; display: flex; align-items: center; gap: 15px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); transition: transform 0.2s; cursor: pointer; }  
        .spec-card:hover { transform: scale(1.02); box-shadow: 0 4px 10px rgba(255, 102, 0, 0.2); }  
        .spec-card:hover .spec-title { color: #ff6600; font-size: 13px; }  
        .spec-card:active { transform: scale(0.98); }  
        .spec-icon { background: #fff4ec; padding: 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }  
        .spec-icon svg { width: 20px; height: 20px; fill: #ff6600; transition: transform 0.2s; }  
        .spec-card:hover .spec-icon svg { transform: rotate(15deg); }  
        .spec-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }  
        .spec-title { font-weight: bold; font-size: 12px; color: #333; transition: color 0.3s, font-size 0.3s; }  
        .spec-desc { font-size: 11px; color: #666; transition: color 0.3s; }  
        .spec-card:hover .spec-desc { color: #ff6600; }  
  
        /* Media Queries for responsiveness */  
        @media (max-width: 768px) {  
            .phone-box { padding: 15px; }  
            .phone-box h2 { font-size: 1.3rem; }  
            .spec-card { padding: 8px; gap: 10px; }  
            .spec-title { font-size: 11px; }  
            .spec-desc { font-size: 10px; }  
            .spec-icon svg { width: 18px; height: 18px; }  
        }  
  
        @media (max-width: 480px) {  
            .phone-box { padding: 10px; }  
            .phone-box h2 { font-size: 1.2rem; }  
            .spec-card { padding: 6px; gap: 8px; }  
            .spec-title { font-size: 10px; }  
            .spec-desc { font-size: 9px; }  
            .spec-icon svg { width: 16px; height: 16px; }  
        }  
    </style>  <div class="phone-box">  
    <h2>مواصفات الهاتف</h2>  <div class="spec-card">  
    <div class="spec-icon">  
        <svg viewBox="0 0 24 24"><path d="M3 4h18v14H3V4zm2 2v10h14V6H5zm6 14h2v2h-2v-2z"/></svg>  
    </div>  
    <div class="spec-text">  
        <div class="spec-title">الشاشة</div>  
        <div class="spec-desc">6.5 إنش AMOLED بدقة FHD+</div>  
    </div>  
</div>  

<div class="spec-card">  
    <div class="spec-icon">  
        <svg viewBox="0 0 24 24"><path d="M9 2h6v2H9V2zM3 9h2v6H3V9zm16 0h2v6h-2V9zM9 20h6v2H9v-2zM6 4h2v2H6V4zm10 0h2v2h-2V4zM6 18h2v2H6v-2zm10 0h2v2h-2v-2zM8 8h8v8H8V8z"/></svg>  
    </div>  
    <div class="spec-text">  
        <div class="spec-title">المعالج</div>  
        <div class="spec-desc">Snapdragon 8 Gen 2 بسرعة 3.2GHz</div>  
    </div>  
</div>  

<div class="spec-card">  
    <div class="spec-icon">  
        <svg viewBox="0 0 24 24"><path d="M4 3v18h16V3H4zm2 2h12v14H6V5zm0 16h12v2H6v-2z"/></svg>  
    </div>  
    <div class="spec-text">  
        <div class="spec-title">الكاميرا</div>  
        <div class="spec-desc">108MP خلفية + 32MP أمامية</div>  
    </div>  
</div>  

<div class="spec-card">  
    <div class="spec-icon">  
        <svg viewBox="0 0 24 24"><path d="M16 4h-1V2h-6v2H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2z"/></svg>  
    </div>  
    <div class="spec-text">  
        <div class="spec-title">البطارية</div>  
        <div class="spec-desc">5000mAh مع شحن سريع 67W</div>  
    </div>  
</div>  

<div class="spec-card">  
    <div class="spec-icon">  
        <svg viewBox="0 0 24 24"><path d="M4 3v18h16V3H4zm2 2h12v14H6V5zm0 16h12v2H6v-2z"/></svg>  
    </div>  
    <div class="spec-text">  
        <div class="spec-title">الرام</div>  
        <div class="spec-desc">8GB RAM</div>  
    </div>  
</div>  

<div class="spec-card">  
    <div class="spec-icon">  
        <svg viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12s5.37 12 12 12 12-5.37 12-12S18.63 0 12 0zm0 22c-5.52 0-10-4.48-10-10S6.48 2 12 2s10 4.48 10 10-4.48 10-10 10zM12 6c-.55 0-1 .45-1 1v4H7c-.55 0-1 .45-1 1s.45 1 1 1h4v4c0 .55.45 1 1 1s1-.45 1-1v-4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4V7c0-.55-.45-1-1-1z"/></svg>  
    </div>  
    <div class="spec-text">  
        <div class="spec-title">النظام</div>  
        <div class="spec-desc">Android 13</div>  
    </div>  
</div>  

<div class="spec-card">  
    <div class="spec-icon">  
        <svg viewBox="0 0 24 24"><path d="M4 3v18h16V3H4zm2 2h12v14H6V5zm0 16h12v2H6v-2z"/></svg>  
    </div>  
    <div class="spec-text">  
        <div class="spec-title">الذاكرة الداخلية</div>  
        <div class="spec-desc">256GB</div>  
    </div>  
</div>

</div>

ختامًا

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

هل أعجبتك الإضافة؟ شاركنا رأيك في التعليقات، ولا تنس مشاركة المقال مع أصدقائك المهتمين!