تركيب اضافة احدث التعليقات متحركة بشكل عمودي بالسيد بار

 تركيب اضافة احدث التعليقات متحركة بشكل عمودي بالسيد بار على شكل سلايدر 

فائدة تركيب اداة اخر التعليقات

تُعتبر إضافة "أحدث التعليقات المتحركة" (Vertical Recent Comments Slider) في الشريط الجانبي لقالب بلوجر من الأدوات البسيطة لكن الفعّالة لتحسين تجربة المستخدم وزيادة التفاعل داخل المدونة. وهذه أبرز فوائدها:

• زيادة التفاعل مع المحتوى

من خلال عرض التعليقات الجديدة بشكل بارز، يتم جذب الزائرين للاطلاع على ما يناقشه الآخرون، مما يشجعهم على التفاعل والمشاركة بآرائهم.

• إبراز نشاط المدونة

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

• تحسين تجربة التصفح

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

• عرض تعليقات متعددة دون استهلاك مساحة

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

• تحفيز التعليق لدى الزوار الجدد

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

شرح تركيب اداة اخر التعليقات بالسيد بار

نذهب الى التنسيق و نضيف اداة جديدة بالسيد بار  و نضع الكود التالي بداخلها 

<style>

  #recent-comments-wrapper{width:100%;max-width:450px;margin:auto;box-shadow:0 5px 35px rgba(0,0,0,.07);background:#fff;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.08);font-family:'Segoe UI',sans-serif;direction:rtl;overflow:hidden;position:relative}

#recent-comments-slider{height:calc(4 * 90px);overflow:hidden;position:relative}

#recent-comments-container{display:flex;flex-direction:column;will-change:transform;transition:transform 0.6s ease;/* سلاسة الحركة */}

.recent-comment{display:flex;align-items:center;padding:2px 26px;gap:12px;border-bottom:1px solid #cfcfcf;text-decoration:none;color:#333;background:#fff;min-height:90px;box-sizing:border-box;transition:background 0.3s,opacity 0.5s ease;opacity:0.8}

.recent-comment:hover{background:#f0f8ff;opacity:1}

.recent-comment.visible{opacity:1}

.recent-comment img{width:54px;height:54px;border-radius:50%;object-fit:cover;border:2px solid #eee;flex-shrink:0}

.comment-details{flex:1;display:flex;flex-direction:column}

.comment-text{font-size:14px;margin-bottom:14px;color:#222}

.comment-meta{display:flex;justify-content:space-between;font-size:12px;color:#666}

.slider-controls{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;z-index:10}

.slider-controls button{background:#ffffffcc;border:1px solid #ccc;border-radius:50%;width:30px;height:30px;font-size:16px;font-weight:bold;cursor:pointer;transition:background 0.3s}

.slider-controls button:hover{background:#e0e0e0}

</style>

<div id="recent-comments-wrapper">

  <div class="slider-controls">

    <button onclick="scrollComments(1)">↑</button>

    <button onclick="scrollComments(-1)">↓</button>

  </div>

  <div id="recent-comments-slider" onmouseover="pauseScroll()" onmouseout="resumeScroll()">

    <div id="recent-comments-container"></div>

  </div>

</div>

<script>

 const blogURL = location.origin;

  const container = document.getElementById("recent-comments-container");

  const itemHeight = 90;

  let scrollIndex = 0;

  let autoScroll;

  let commentsCount = 0;

  let isTransitioning = false;

  function fetchComments() {

    fetch(`${blogURL}/feeds/comments/default?alt=json&max-results=20`)

      .then(res => res.json())

      .then(data => {

        const entries = data.feed.entry || [];

        commentsCount = entries.length;

        let html = "";

        entries.forEach(entry => {

          const author = entry.author[0];

          const avatar = author?.gd$image?.src || "https://www.gravatar.com/avatar/?d=mp";

          const authorName = author?.name?.$t || "مجهول";

          const content = entry.content?.$t || "";

          const cleaned = content.replace(/<[^>]+>/g, "").substring(0, 70) + "...";

          const link = entry.link.find(l => l.rel === "alternate")?.href || "#";

          const published = entry.published?.$t || "";

          const date = new Date(published).toLocaleDateString("en-US", {

            day: "numeric", month: "long", year: "numeric"

          });

          html += `

            <a href="${link}" class="recent-comment" target="_blank" title="عرض التعليق">

              <img src="${avatar}" alt="صورة المعلق">

              <div class="comment-details">

                <div class="comment-text">${cleaned}</div>

                <div class="comment-meta">

                  <span>👤 ${authorName}</span>

                  <span>📅 ${date}</span>

                </div>

              </div>

            </a>

          `;

        });

        container.innerHTML = html + html;  

        addVisibleClass();

        startAutoScroll();

      });

  }

  function addVisibleClass() {

    const comments = container.querySelectorAll('.recent-comment');

    comments.forEach((comment, i) => {

      if(i < 4 || (i >= commentsCount && i < commentsCount + 4)) {

        comment.classList.add('visible');

      } else {

        comment.classList.remove('visible');

      }

    });

  }

  function startAutoScroll() {

    autoScroll = setInterval(() => {

      if (isTransitioning) return;

      

      scrollIndex++;

      

      if (scrollIndex >= commentsCount) {

        isTransitioning = true;

        // الانتقال إلى نهاية القائمة المكررة

        container.style.transition = 'transform 0.6s ease';

        container.style.transform = `translateY(-${scrollIndex * itemHeight}px)`;

        

        setTimeout(() => {

          container.style.transition = 'none';

          scrollIndex = 0;

          container.style.transform = `translateY(0)`;

          

          setTimeout(() => {

            container.style.transition = 'transform 0.6s ease';

            isTransitioning = false;

          }, 50);

        }, 600);

      } else {

        container.style.transform = `translateY(-${scrollIndex * itemHeight}px)`;

      }

      

      addVisibleClass();

    }, 2500);

  }

  function scrollComments(dir) {

    if (isTransitioning) return;

    

    pauseScroll();

    scrollIndex += dir;

    

    if (scrollIndex < 0) {

      scrollIndex = commentsCount - 1;

    } else if (scrollIndex >= commentsCount) {

      scrollIndex = 0;

    }

    

    container.style.transform = `translateY(-${scrollIndex * itemHeight}px)`;

    addVisibleClass();

    setTimeout(resumeScroll, 3000);

  }

  function pauseScroll() {

    clearInterval(autoScroll);

  }

  function resumeScroll() {

    clearInterval(autoScroll);

    startAutoScroll();

  }

  fetchComments();

</script>

و قم بتسمية الاداة باسم مثلا أحدث التعليقات و ثم قم بالحفظ

ملاحظة

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

و في الختام تقبلوا تحياتي

تحرير المقال