إضافة صندوق المصادر لمدونات بلوجر بتصميم أنيق وجذاب

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

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

ما هو صندوق المصادر؟

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

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

مقالات تعليمية
أدوات أونلاين
مواقع رسمية

وكل مصدر بيظهر في بطاقة منفصلة، فيها:

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

مميزات صندوق المصادر

تصميم أنيق بلون برتقالي جذّاب
متجاوب مع جميع الشاشات
سهل التعديل والإضافة (تقدر تضيف مصادر جديدة بنسخ جزء بسيط من الكود)
خفيف ومناسب لجميع قوالب بلوجر

معاينة صندوق المصادر

المصادر:

مقال شامل عن HTML

زيارة

ضغط الصور

زيارة

اضافة المصادر لبلوجر

انسخ الكود التالي بالكامل.

الصقه في المكان المناسب داخل مقالك (يفضل يكون في النهاية).

عدّل روابط وأسماء المصادر حسب محتوى مقالك.

HTML Code

<!--
  تم تطوير هذا الكود بواسطة موقع "التقني للمعلوميات" - https://www.eltiqni.com
-->

<style>
.sources-box {
  border: 2px solid #ff7b00;
  border-radius: 10px;
  padding: 15px;
  background-color: #fff8f1;
  margin: 20px 0;
  font-family: 'Cairo', sans-serif;
  font-size: 14px;
}

.sources-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ff7b00;
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 10px;
}

.open-book-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px #ff7b00);
}

.source-item {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px 15px;
  margin-top: 10px;
}

.source-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.source-info {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #333;
  flex: 1;
  min-width: 200px;
}

.source-button a {
  color: #fff;
  background: #ff7b00;
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 13px;
  text-decoration: none;
  transition: 0.3s;
}

.source-button a:hover {
  background: #e86b00;
}

.source-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
</style>

<div class="sources-box">
  <div class="sources-title">
    <svg class="open-book-icon" fill="#ff7b00" viewBox="0 0 24 24"><path d="M21 4H12a1 1 0 00-1 1v13a1 1 0 001 1h9v-2h-8v-2h8v-2h-8v-2h8V9h-8V7h8V5a1 1 0 00-1-1zM3 4a1 1 0 00-1 1v14h10V5a1 1 0 00-1-1H3z"/></svg>
    <span>المصادر:</span>
  </div>

  <!-- مصدر 1 -->
  <div class="source-item">
    <div class="source-top">
      <div class="source-info">
        <svg class="source-icon" fill="#ff7b00" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1010 10A10.011 10.011 0 0012 2zm1 15h-2v-2h2zm0-4h-2V7h2z"/></svg>
        <span>التقني للمعلوميات</span>
      </div>
      <div class="source-button">
        <a href="https://www.eltiqni.com" target="_blank">زيارة</a>
      </div>
    </div>
  </div>

  <!-- مصدر 2 -->
  <div class="source-item">
    <div class="source-top">
      <div class="source-info">
        <svg class="source-icon" fill="#ff7b00" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10
        10-4.48 10-10S17.52 2 12 2zm0 17l-1.41-1.41L15.17 13H4v-2h11.17l-4.58-4.59L12 5l7 7-7 7z"/></svg>
        <span>أداة صندوق المصادر</span>
      </div>
      <div class="source-button">
        <a href="https://www.eltiqni.com/2025/04/Resource-box.html" target="_blank">زيارة</a>
      </div>
    </div>
  </div>
</div>