تركيب أداة أخر التعليقات لقوالب بلوجر

• تركيب أداة أخر التعليقات لقوالب بلوجر بالسيد بار
• شرح تركيب الاداة بالفيديو
• الاكواد الخاصة لتركيب أداة أخر التعليقات
• الاكواد الخاصة بالوضع الليلي
• التعديلات 
• و اخيرا تذهب الى التخطيط و تضيف أداة جديدة و تسميها ما تريد و تلصق الكود التالي بداخلها

تركيب أداة أخر التعليقات لقوالب بلوجر بالسيد بار

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

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

وعلى الجانب التقني، فإن وجود تعليقات متجددة يُحسّن من أداء المدونة في محركات البحث، حيث تعتبر التعليقات جزءًا من المحتوى المتجدد، وهو عاملٌ محبّب لدى خوارزميات البحث مثل جوجل، مما قد يُسهم في تحسين ترتيب المدونة وظهورها في نتائج البحث الأولى.

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

وباختصار، فإن تركيب أداة "آخر التعليقات" يُعد خيارًا ذكيًا لأي مدون يسعى لتطوير مدونته وزيادة التفاعل فيها.

شرح تركيب الاداة بالفيديو

الاكواد الخاصة لتركيب أداة أخر التعليقات

نذهب الى المظهر ثم اختيار تعديل HTML  ثم نبحث عن ]]></b:skin>  و نضيف الأكواد التالية اعلاها

.recent-comments{list-style:none;padding:0;margin:0}

.recent-comments li{display:flex;align-items:flex-start;gap:12px;padding:10px;margin-bottom:12px; box-shadow: 0 5px 35px rgba(0, 0, 0, .07) !important;;border-radius:10px;}

.recent-comments img{width:50px;height:50px;border-radius:50%;object-fit:cover;box-shadow:0 2px 6px rgba(0,0,0,0.1);border:2px solid #9f9f9f40;flex-shrink:0;}

.comment-text{width: 100%;display:flex;flex-direction:column}

.comment-author{font-weight:bold;margin-bottom:4px;font-size:15px}

.comment-snippet a{color:#555;font-size:14px;line-height:1.5;padding:10px 0 9px 10px;cursor:pointer}

.comment-snippet a:hover{color:#0070ff}

div#HTML1 {padding: 20px;background: var(--contentB);box-shadow: 0 5px 35px rgba(0, 0, 0, .07);border-radius: 10px;}

الاكواد الخاصة بالوضع الليلي

.drK .recent-comments li {background: rgba(0, 0, 0, .15);}

.drK .comment-snippet a { color: var(--darkT);}

.drK .comment-snippet a:hover { color: var(--darkU);}

قم بتغير الكلاس الموجود بالقالب الخاص بالوضع الليلي بالموجود بالكود .drK

  ثم نبحث عن </body>  و نضيف الأكواد التالية اعلاها

 <script type='text/javascript'>

//<![CDATA[

function loadRecentComments() {

  const feedUrl = '/feeds/comments/default?alt=json&orderby=published&max-results=5';

  fetch(feedUrl)

    .then(response => response.json())

    .then(data => {

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

      list.innerHTML = '';

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

      entries.forEach(entry => {

        const author = entry.author[0];

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

        const name = author.name.$t;

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

        

        const rawContent = entry.content ? entry.content.$t : '';

        const tempDiv = document.createElement('div');

        tempDiv.innerHTML = rawContent;

        let content = tempDiv.textContent || tempDiv.innerText || "";

        content = content.substring(0, 35) + '...';

        const li = document.createElement("li");

        li.innerHTML = `

          <img src="${img}" alt="صورة الملف الشخصي لـ ${name}">

          <div class="comment-text">

            <div class="comment-author">${name}</div>

            <div class="comment-snippet" itemprop="text">

              <a href="${link}" title="${content}">${content}</a>

            </div>

          </div>

        `;

        list.appendChild(li);

      });

    })

    .catch(error => {

      console.error("Error loading comments:", error);

    });

}

document.addEventListener("DOMContentLoaded", loadRecentComments);

//]]>

</script>

التعديلات 

ستجد بكود الجافا سكربت  هذا السطر و هو مخصص لعدد التعليقات التي ستظهر بالكود يمكن تغيرها للعدد اللذي تريده 

الموجدوة رقم 5 و هي باللون الاحمر

  const feedUrl = '/feeds/comments/default?alt=json&orderby=published&max-results=5';

و ستجد بالكود هذا السطر و الرقم الموجود هو عدد الحروف التي تظهر بالتعليق و الرقم 35  باللون الاحمر يمكن تغيره

content = content.substring(0, 35) + '';

و ثم تقوم بالحفظ

و اخيرا تذهب الى التخطيط و تضيف أداة جديدة و تسميها ما تريد و تلصق الكود التالي بداخلها

<ul class="recent-comments" id="recent-comments-widget"></ul>

و ثم حفظ و مبروك عليك الاداة .