ودجت آخر المقالات بالصور لبلوجر | قائمة جانبية احترافية 2024

 

📋

ودجت آخر المقالات بالصور والتواريخ

اعرض أحدث محتواك بطريقة جذابة واحترافية! 🎨

هل تريد زيادة تفاعل الزوار مع محتوى مدونتك؟

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

✨ مميزات الودجت

🖼️

صور مصغرة جذابة

عرض صورة بارزة لكل مقال بشكل أنيق واحترافي.

📅

تواريخ النشر

يعرض تاريخ نشر كل مقال بصيغة واضحة وجميلة.

💬

عدد التعليقات

إظهار عدد التعليقات لتشجيع التفاعل.

📱

متجاوب تماماً

يتكيف مع جميع أحجام الشاشات بشكل مثالي.

🎨

قابل للتخصيص

سهل التعديل حسب ألوان وتصميم مدونتك.

⚡

سريع التحميل

كود محسّن لا يؤثر على سرعة المدونة.

👀 معاينة الودجت

📋 آخر المقالات

عنوان المقال الأول هنا

📅 منذ يومين | 💬 5 تعليقات

عنوان المقال الثاني

📅 منذ 3 أيام | 💬 12 تعليق

عنوان المقال الثالث

📅 منذ أسبوع | 💬 8 تعليقات

💻 كود HTML

⚠️ تنبيه: احفظ نسخة احتياطية من قالبك قبل إضافة أي كود!

أضف هذا الكود في المكان الذي تريد ظهور الودجت فيه (عادة في الشريط الجانبي):

انقر للنسخ

<!-- Recent Posts Widget -->
<div class='recent-posts-widget'>
  <h3 class='widget-title'>📋 آخر المقالات</h3>
  <div class='recent-posts-container' id='recentPostsContainer'>
    <div class='loading'>جاري التحميل...</div>
  </div>
</div>
<!-- End Recent Posts Widget -->

🎨 كود CSS

أضف هذا الكود قبل وسم </head>:

انقر للنسخ

<style>
/* Recent Posts Widget Styles */
.recent-posts-widget {
  background: white;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  margin: 20px 0;
}

.widget-title {
  color: #00b4d8;
  font-size: 1.5em;
  margin: 0 0 20px 0;
  padding-bottom: 15px;
  border-bottom: 3px solid #e0e0e0;
  position: relative;
}

.widget-title::after {
  content: '';
  position: absolute;
  bottom: -3px;
  right: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.recent-posts-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.post-item {
  display: flex;
  gap: 15px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.post-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.post-item:hover {
  transform: translateX(-5px);
}

.post-thumbnail {
  width: 90px;
  height: 90px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  position: relative;
}

.post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.post-item:hover .post-thumbnail img {
  transform: scale(1.1);
}

.post-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.post-title {
  margin: 0 0 10px 0;
  font-size: 15px;
  line-height: 1.5;
}

.post-title a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

.post-title a:hover {
  color: #00b4d8;
}

.post-meta {
  display: flex;
  gap: 15px;
  font-size: 13px;
  color: #999;
  flex-wrap: wrap;
}

.post-date::before {
  content: '📅';
  margin-left: 5px;
}

.post-comments::before {
  content: '💬';
  margin-left: 5px;
}

.loading {
  text-align: center;
  padding: 30px;
  color: #999;
  font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
  .recent-posts-widget {
    padding: 20px 15px;
  }
  
  .post-thumbnail {
    width: 70px;
    height: 70px;
  }
  
  .post-title {
    font-size: 14px;
  }
  
  .post-meta {
    font-size: 12px;
  }
}
</style>

⚙️ كود JavaScript

أضف هذا الكود قبل وسم </body>:

انقر للنسخ

<script>
// Recent Posts Widget Script
document.addEventListener('DOMContentLoaded', function() {
  const container = document.getElementById('recentPostsContainer');
  if (!container) return;
  
  const maxPosts = 5; // عدد المقالات المراد عرضها
  
  // جلب المقالات من بلوجر
  fetch(`/feeds/posts/default?alt=json&max-results=${maxPosts}`)
    .then(response => response.json())
    .then(data => {
      const posts = data.feed.entry;
      
      if (!posts || posts.length === 0) {
        container.innerHTML = '<div class="loading">لا توجد مقالات</div>';
        return;
      }
      
      let html = '';
      
      posts.forEach(post => {
        // عنوان المقال
        const title = post.title.$t;
        
        // رابط المقال
        const link = post.link.find(l => l.rel === 'alternate').href;
        
        // الصورة
        let thumbnail = 'https://via.placeholder.com/90x90/4facfe/ffffff?text=No+Image';
        if (post.media$thumbnail) {
          thumbnail = post.media$thumbnail.url.replace(/s72-c/, 's200-c');
        } else if (post.content && post.content.$t.match(/<img[^>]+src="([^">]+)"/)) {
          thumbnail = post.content.$t.match(/<img[^>]+src="([^">]+)"/)[1];
        }
        
        // التاريخ
        const date = new Date(post.published.$t);
        const now = new Date();
        const diffTime = Math.abs(now - date);
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
        
        let dateText;
        if (diffDays === 1) dateText = 'منذ يوم واحد';
        else if (diffDays === 2) dateText = 'منذ يومين';
        else if (diffDays < 7) dateText = `منذ ${diffDays} أيام`;
        else if (diffDays < 30) dateText = `منذ ${Math.floor(diffDays/7)} أسابيع`;
        else dateText = `منذ ${Math.floor(diffDays/30)} شهر`;
        
        // عدد التعليقات
        const comments = post.thr$total ? post.thr$total.$t : '0';
        
        html += `
          <div class="post-item">
            <div class="post-thumbnail">
              <img src="${thumbnail}" alt="${title}" loading="lazy">
            </div>
            <div class="post-content">
              <h4 class="post-title">
                <a href="${link}">${title}</a>
              </h4>
              <div class="post-meta">
                <span class="post-date">${dateText}</span>
                <span class="post-comments">${comments} ${comments == '1' ? 'تعليق' : 'تعليقات'}</span>
              </div>
            </div>
          </div>
        `;
      });
      
      container.innerHTML = html;
    })
    .catch(error => {
      console.error('Error loading posts:', error);
      container.innerHTML = '<div class="loading">حدث خطأ في التحميل</div>';
    });
});
</script>

📝 خطوات التركيب

1

افتح محرر القالب

المظهر → تعديل HTML

2

أضف كود CSS

الصق كود CSS قبل </head>

3

أضف كود HTML

الصق الكود في الشريط الجانبي (sidebar) أو أي مكان تريد

4

أضف كود JavaScript

الصق كود JavaScript قبل </body>

5

احفظ وشاهد النتيجة

احفظ القالب وافتح مدونتك لترى الودجت!

🎨 تخصيص الودجت

تغيير عدد المقالات:

في كود JavaScript، ابحث عن:

const maxPosts = 5;

غيّر الرقم 5 إلى العدد الذي تريده.

تغيير الألوان:

في كود CSS، ابحث عن:

color: #00b4d8;

استبدل بأي لون تفضله!

تغيير حجم الصور:

في كود CSS، ابحث عن:

width: 90px;
height: 90px;

غيّر الأرقام كما تشاء.

❓ أسئلة شائعة

هل تعمل مع جميع القوالب؟

نعم، الودجت متوافقة مع جميع قوالب بلوجر.

ماذا لو لم تظهر الصور؟

تأكد أن مقالاتك تحتوي على صور، أو سيتم عرض صورة افتراضية.

هل يمكن استخدامها في الهيدر؟

نعم، يمكنك وضع الكود في أي مكان تريد في القالب.

🎉

رائع! الآن لديك ودجت احترافية

زوارك سيستكشفون المزيد من محتواك! 💙