كود بطاقات أسعار احترافي لبلوجر بتصميم متجاوب وعصري

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

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

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

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

لماذا تحتاج إلى بطاقات أسعار في موقعك؟

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

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

 أهم مميزات الكود

يتميز هذا الكود بمجموعة كبيرة من الخصائص التي تجعله مناسبًا لمعظم مواقع بلوجر، ومن أبرزها:

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

فيما يمكن استخدام هذا الكود في العديد من المجالات، مثل:

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

هل الكود سريع و يؤثر على القالب

يعتمد الكود على HTML وCSS فقط، لذلك فهو خفيف جدًا ولا يحتاج إلى تحميل مكتبات خارجية أو ملفات JavaScript إضافية. وهذا يساهم في تحسين سرعة تحميل الصفحة، وهو عامل مهم لتحسين تجربة المستخدم ورفع تقييم الموقع في أدوات قياس الأداء مثل Google PageSpeed Insights و هومتوافق مع تحسين محركات البحث

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

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

طريقة التركيب

نذهب الى المظهر

نختارتعديل HTML

نبحث بداخل اكواد القالب عن </head> و نضيف الكود التالي اعلاه

  <style>

:root {

  --primary-color: #07acb2;

  --secondary-color: #53bca7;

  --font-family: 'Tajawal', sans-serif;

}

.pricing-wrapper {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 25px;

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

  padding: 20px;

  font-family: var(--font-family);

  direction: rtl;

  box-sizing: border-box;

}

/* متغيرات ألوان كل حزمة */

.plan-starter {

  --theme-color: #10aeb0;

  --gradient-bg: linear-gradient(270deg, #07acb2 0.2%, #53bca7);

  --shadow-color: rgba(11, 121, 107, 0.3);

}

.plan-popular {

  --theme-color: #f7a379;

  --gradient-bg: linear-gradient(90.1deg, #f59878 0.2%, #fdca7b 99.9%);

  --shadow-color: rgba(247, 163, 121, 0.3);

}

.plan-pro {

  --theme-color: #ee5285;

  --gradient-bg: linear-gradient(90.1deg, #f4806f 0.2%, #ee4d88);

  --shadow-color: rgba(238, 77, 136, 0.3);

}

.plan-card {

  flex: 1 1 300px;

  max-width: 360px;

  background: #ffffff;

  border: 1px solid var(--theme-color);

  border-radius: 20px;

  padding: 30px 20px;

  display: flex;

  flex-direction: column;

  align-items: center;

  position: relative;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.plan-card:hover {

  transform: translateY(-8px);

  box-shadow: 0 10px 25px var(--shadow-color);

}

.plan-card.popular .badge {

  position: absolute;

  top: -14px;

  background: var(--gradient-bg);

  color: #fff;

  font-size: 12px;

  font-weight: bold;

  padding: 6px 16px;

  border-radius: 20px;

  box-shadow: 0 4px 10px var(--shadow-color);

}

.plan-header {

  text-align: center;

  margin-bottom: 20px;

  width: 100%;

}

.plan-icon {

  font-size: 50px;

  color: var(--theme-color);

  margin-bottom: 15px;

}

.plan-title {

  background: var(--gradient-bg);

  color: #ffffff;

  padding: 8px 20px;

  border-radius: 20px;

  font-size: 16px;

  margin: 0 auto;

  width: fit-content;

  box-shadow: 0 4px 12px var(--shadow-color);

}

.plan-price {

  display: flex;

  align-items: baseline;

  justify-content: center;

  gap: 5px;

  color: var(--theme-color);

  margin-bottom: 25px;

}

.plan-price .amount {

  font-size: 48px;

  font-weight: 700;

  line-height: 1;

}

.plan-price .currency {

  font-size: 16px;

  font-weight: 500;

}

.plan-features {

  list-style: none;

  padding: 0;

  margin: 0 0 30px 0;

  width: 100%;

}

.plan-features li {

  padding: 10px 0;

  font-size: 14px;

  color: #555;

  display: flex;

  align-items: center;

  justify-content: flex-start;

  gap: 10px;

  border-bottom: 1px dashed #f0f0f0;

}

.plan-features li:last-child {

  border-bottom: none;

}

.plan-features li::before {

  content: "\f058";

  font-family: "Font Awesome 6 Free";

  font-weight: 900;

  color: var(--theme-color);

  font-size: 16px;

}

.plan-footer {

  margin-top: auto;

  width: 100%;

  display: flex;

  justify-content: center;

}

.btn-buy {

  background: var(--gradient-bg);

  color: #ffffff;

  text-decoration: none;

  padding: 10px 40px;

  border-radius: 25px;

  font-weight: bold;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  transition: all 0.3s ease;

  box-shadow: 0 4px 12px var(--shadow-color);

}

.btn-buy::before {

  content: "\f07a";

  font-family: "Font Awesome 6 Free";

  font-weight: 900;

  font-size: 14px;

  transition: transform 0.3s ease;

}

.btn-buy:hover {

  opacity: 0.95;

}

.btn-buy:hover::before {

  transform: translateX(-4px);

}

/* التجاوب مع الشاشات الصغيرة */

@media (max-width: 768px) {

  .pricing-wrapper {

    flex-direction: column;

    align-items: center;

  }

  .plan-card {

    width: 100%;

    max-width: 100%;

  }

}

</style>

ثم نقوم بالذهاب الى اي مكان نريد اظهار فيه البطاقات مثلا بداخل المواضيع او بالواجهة الرئيسية للقالب و نلصق 

الكود التالي بداخله

<div class="pricing-wrapper">
  <!-- الباقة الأولى -->
  <div class="plan-card plan-starter">
    <div class="plan-header">
      <i class="plan-icon fa-solid fa-briefcase"></i>
      <h3 class="plan-title">الحزمة المبتدئة</h3>
    </div>
    
    <div class="plan-price">
      <span class="currency">ريال</span>
      <span class="amount">80</span>
    </div>

    <ul class="plan-features">
      <li>استبدل النص هنا</li>
      <li>استبدل النص هنا</li>
      <li>استبدل النص هنا</li>
      <li>استبدل النص هنا</li>
    </ul>

    <div class="plan-footer">
      <a href="#" class="btn-buy" target="_blank">شراء</a>
    </div>
  </div>

  <!-- الباقة الثانية (الأكثر شهرة) -->
  <div class="plan-card plan-popular popular">
    <span class="badge">الأكثر شهرة</span>
    <div class="plan-header">
      <i class="plan-icon fa-solid fa-rocket"></i>
      <h3 class="plan-title">الحزمة المتوسطة</h3>
    </div>

    <div class="plan-price">
      <span class="currency">ريال</span>
      <span class="amount">110</span>
    </div>

    <ul class="plan-features">
      <li>استبدل النص هنا</li>
      <li>استبدل النص هنا</li>
      <li>استبدل النص هنا</li>
      <li>استبدل النص هنا</li>
    </ul>

    <div class="plan-footer">
      <a href="#" class="btn-buy" target="_blank">شراء</a>
    </div>
  </div>

  <!-- الباقة الثالثة -->
  <div class="plan-card plan-pro">
    <div class="plan-header">
      <i class="plan-icon fa-solid fa-paper-plane"></i>
      <h3 class="plan-title">الحزمة المتقدمة</h3>
    </div>

    <div class="plan-price">
      <span class="currency">ريال</span>
      <span class="amount">150</span>
    </div>

    <ul class="plan-features">
      <li>استبدل النص هنا</li>
      <li>استبدل النص هنا</li>
      <li>استبدل النص هنا</li>
      <li>استبدل النص هنا</li>
    </ul>

    <div class="plan-footer">
      <a href="#" class="btn-buy" target="_blank">شراء</a>
    </div>
  </div>
</div>

الكود يعتمد على مكتبة ايقونات font-awesome اذا لا يحتوي القالب الخاص بك المكتب يمكنك 

استخدام الكود التالي و تقوم بلصقه اسفل <head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

ثم قم بالحفظ و شاهد النتيجة

وفي الختام !

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

اضافات بلوجر سكربتات