كيف تبرمج قسم الدليل الاجتماعي لزيادة موثوقية ومبيعات صفحة الهبوط في بلوجر.

تصميم SaaS الفاخر 💎
قسم آراء العملاء (Testimonials)

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

الهدف من القسم

إتقان البرمجة والتصميم: بناء قسم يعزز الموثوقية ويحفز الشراء

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

الخطوة الأولى

هيكل الـ HTML الديناميكي

ضع هذا الكود في المكان المناسب (عادةً بعد قسم المميزات أو الأسعار).

Blogger XMLTestimonials Structure

<!-- قسم آراء العملاء المطور -->
<section class='testimonials-section' id='testimonials'>
  <div class='section-header' style='text-align: center; margin-bottom: 70px;'>
    <span class='sub-title' style='color: #6366f1; font-weight: 700;'>آراء عملائنا</span>
    <h2 style='font-size: 2.5rem; color: #0f172a; margin-top: 10px;'>قصص نجاح نفخر بها</h2>
  </div>

  <div class='testimonials-grid'>
    <b:section id='testimonials-list-section' class='testimonials-list' showaddelement='yes'>
      <!-- ستضيف آراء العملاء هنا كودجت HTML/JS -->
    </b:section>
  </div>
</section>

الخطوة الثانية

تنسيقات الـ CSS للبطاقات

هذا الكود سيجعل بطاقات العملاء تبدو ناعمة مع زوايا منحنية وظلال احترافية.

CSS3Testimonials Styling

/* =========================================
   تنسيقات قسم آراء العملاء (النمط الحديث)
   ========================================= */

.testimonials-section {
  padding: 100px 5%;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.testimonials-grid .testimonials-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 35px;
  max-width: 1200px;
  margin: 50px auto 0; /* مساحة علوية للصور البارزة */
}

/* بطاقة العميل */
.testimonials-list .widget {
  background: #ffffff;
  padding: 45px 30px 30px;
  border-radius: 24px;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05);
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
  border-top: 4px solid var(--primary);
  margin-top: 40px; /* ضروري للصورة المتداخلة */
}

.testimonials-list .widget:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -10px rgba(99, 102, 241, 0.15);
}

/* الصورة البارزة المتداخلة (Overlapping Avatar) */
.testi-avatar {
  position: absolute;
  top: -45px;
  left: 50%;
  transform: translateX(-50%);
  width: 85px;
  height: 85px;
}

.testi-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid #ffffff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}

/* شارة الاقتباس الصغيرة */
.quote-badge {
  position: absolute;
  bottom: 0;
  right: -5px;
  background: var(--primary);
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  border: 3px solid #ffffff;
}

/* النجوم */
.testi-rating {
  color: #f59e0b;
  font-size: 1.1rem;
  margin-bottom: 15px;
}

/* نص الشهادة */
.testi-text {
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.8;
  margin-bottom: 25px;
  font-style: italic;
}

/* بيانات العميل */
.testi-author h4 {
  color: #0f172a;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 5px;
}

.testi-author span {
  color: #64748b;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .testimonials-grid .testimonials-list { grid-template-columns: 1fr; gap: 50px; }
}

الخطوة الثالثة

كيف تضيف رأي عميل جديد؟

اذهب لـ التنسيق > قسم testimonials-list-section > أضف HTML/JavaScript وضع الكود التالي:

Widget HTMLكود رأي العميل المطور

<!-- محتوى بطاقة العميل -->
<div class="testi-avatar">
  <img src="https://ui-avatars.com/api/?name=Ahmed+Ali&background=e0e7ff&color=4f46e5" alt="Ahmed Ali" />
  <div class="quote-badge"><i class="fas fa-quote-right"></i></div>
</div>

<div class="testi-rating">
  <i class="fas fa-star"></i>
  <i class="fas fa-star"></i>
  <i class="fas fa-star"></i>
  <i class="fas fa-star"></i>
  <i class="fas fa-star"></i>
</div>

<p class="testi-text">
  "تجربة استثنائية بكل المقاييس! التصميم رفع من مبيعات متجري بنسبة 40٪ في الشهر الأول، والدعم الفني كان سريعاً جداً واحترافياً لأبعد الحدود."
</p>

<div class="testi-author">
  <h4>أحمد علي</h4>
  <span>مؤسس منصة إبداع</span>
</div>

لمسة جمالية: استخدمنا &background=e0e7ff&color=4f46e5 في رابط الصورة لكي تتناسق ألوان صورة العميل الافتراضية مع الهوية البصرية الزرقاء/البنفسجية للقالب.

الخطوة التالية

الفوتر الاحترافي (Footer)

تصميم ذيل الصفحة مع روابط السوشيال ميديا وحقوق النشر.

قريبا

تم النسخ بنجاح! 🚀