أفضل طريقة لإظهار مواضيع ذات صلة داخل التدوينات على منصة بلوجر

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

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

طريقة احترافية لإظهار مواضيع ذات صلة داخل التدوينات على بلوجر تلقائيًا لزيادة التفاعل وتحسين تجربة الزائر.

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

إضافة كود JavaScript لعرض منشورات ذات الصلة

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

يتم ذلك من خلال استخدام أكواد JavaScript أو HTML مخصصة، تعمل تلقائيًا على تحليل تسميات التدوينة الحالية (Labels)، ثم تُظهر تدوينات أخرى تشترك معها في نفس التصنيفات.

1. اذهب إلى لوحة تحكم بلوجر > المظهر > تعديل HTML
   ابحث عن وسم <data:post.body/> داخل كود القالب. ستجده غالبًا داخل عنصر يحمل الصنف postBody.

   ملاحظة
   قد يظهر وسم <data:post.body/>أكثر من مرة داخل القالب، تأكد من اختيار الموضع ، (ويُفضل أسفل النسخة الثانية منه). إن وُجد، فهو الأنسب لإدراج الكود بعد منتصف التدوينة.

2. ضع الكود التالي أسفل <data:post.body/> مباشرة:

   <b:if cond='!data:view.isPage'>
   <div class='postTextRelated' id='postTextRelated'>
   <script>/*<![CDATA[*/ var relatedTitles=new Array,relatedTitlesNum=0,relatedUrls=new Array;function related_results_labels(e){for(var t=0;t<e.feed.entry.length;t++){var l=e.feed.entry[t];relatedTitles[relatedTitlesNum]=l.title.$t;for(var r=0;r<l.link.length;r++)if("alternate"==l.link[r].rel){relatedUrls[relatedTitlesNum]=l.link[r].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),t=new Array(0),l=0;l<relatedUrls.length;l++)contains(e,relatedUrls[l])||(e.length+=1,e[e.length-1]=relatedUrls[l],t.length+=1,t[t.length-1]=relatedTitles[l]);relatedTitles=t,relatedUrls=e}function contains(e,t){for(var l=0;l<e.length;l++)if(e[l]==t)return!0;return!1}function printRelatedLabels(){for(var e=Math.floor((relatedTitles.length-1)*Math.random()),t=0;t<relatedTitles.length&&t<20;){var l=document.createElement(dir='RTL'),r=document.createElement("li"),a=document.createElement("a");a.setAttribute("href",relatedUrls[e]),a.setAttribute("target","_blank"),a.innerText=relatedTitles[e],l.appendChild(r),r.appendChild(a),document.querySelector(".postTextRelated").appendChild(l),e<relatedTitles.length-1?e++:e=0,t++}} /*]]>*/</script>
   <b:if cond='data:post.labels'>
   <b:loop index='i' values='data:post.labels' var='label'>
   <b:if cond='data:i&lt;1'>
   <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' rel='preload'/>
   </b:if>
   </b:loop>
   </b:if>
   <b>شاهد ايضا :</b>
   <script>removeRelatedDuplicates(); printRelatedLabels();</script>
   </div>
   <script>/*<![CDATA[*/
   // (postBody) sesuaikan dengan kode di template kalian, biasanya dapat di lihat pebungkus kode ini <data:post.body/> contoh <div class='postBody'><data:post.body/></div>
   !function() {
       let c = document.querySelector("#postTextRelated");
       if (c) {
           let a = document.querySelectorAll(".postBody p"),
               b = parseInt(a.length / 2);
           if (a.length > 0) {
           c.style.display = 'block';
           "P" == a[b].nodeName ? a[b].parentNode.insertBefore(c, a[b]) : a[b].parentNode.insertBefore(c, a[b].nextSibling)
       }
   }
   }()
   /*]]>*/</script></b:if>

ملاحظة
هذا الكود يعتمد على تصنيفات التدوينة (Labels)، لذا تأكد من استخدام تسميات واضحة ومرتبطة ببعضها عبر مقالاتك.

---

الخطوة 2: إضافة كود CSS لتنسيق العرض

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

نقوم في هذه الخطوة بإضافة كود CSS مسؤول عن تنسيق المظهر العام للعناصر التي أضفناها، بما في ذلك العنوان، الروابط، الأيقونات، والمظهر في الوضع الليلي (Dark Mode).

1. من لوحة التحكم > المظهر > تعديل HTML
   ابحث عن الوسم </b:skin>، ثم ضع كود التنسيق فوقه مباشرة.

   ملاحظة
   إذا كنت تستخدم قالب Plus UI v3.1.0، يُفضل وضع الكود أسفل هذا التعليق مباشرة:
   /*--[ Custom CSS Global (NO AMP) ]--*/

2. أضف كود CSS التالي:

   /* ubah warna cari kode #f89000 و %23f89000 */
   .postTextRelated{position:relative;margin:42px 0;padding:1.5em 0;border:1px solid #eceff1;border-right:0;border-right:0; font-size:14px;line-height:1.8em;display:none}
   .postTextRelated a{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}
   .postTextRelated a:hover{opacity:.8}
   .postTextRelated b{font-size:13px;font-weight:400;margin:0;padding:2px 14px;background-color:#fefefe;border:1px solid #e6e6e6;border-radius:15px; position:absolute;top:-15.5px;right:20px}
   .postTextRelated ul{margin:8px 0 0;padding-right:20px}
   .postTextRelated li:hover{margin-right:5px}
   .postTextRelated li{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) translate(6.500000, 3.000000)'><line fill='none' stroke='%23f89000' x1='5.3939' y1='9.7001' x2='5.3939' y2='0.7501'></line><path fill='none' stroke='%23f89000' d='M5.3998,17.3539 C6.6558,17.3539 10.6708,10.9899 9.9488,10.2679 C9.2268,9.5459 1.6418,9.4769 0.8508,10.2679 C0.0598,11.0599 4.1448,17.3539 5.3998,17.3539 Z'></path></g></svg>") right / 20px no-repeat;list-style-type:none;padding:0 25px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f89000;transition:all .4s ease}
   
   /* css darkmode sesuaikan class (.drK) */
   .drK .postTextRelated b{background-color:#1e1e1e;}
   .drK .postTextRelated,.drK .postTextRelated b{border-color:rgba(255,255,255,.15)}

ملاحظة
لون الروابط والأيقونات يمكن تغييره من خلال الكود اللوني #f89000 (أو صيغته المشفرة %23f89000) لتتوافق مع ألوان مدونتك.

الخطوة 3: التأكد من استخدام التسميات

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

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

ملاحظة
في حال لم يتم إضافة أي تسمية إلى التدوينة، فلن يظهر قسم المواضيع ذات الصلة إطلاقًا.

---

حلول ونصائح إذا لم تظهر المواضيع ذات الصلة داخل التدوينات

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

1. تأكد من وجود تسميات في التدوينة
   الكود يعتمد على عرض تدوينات لها نفس التسمية. إذا لم يكن هناك أي تصنيف (Label) مضاف إلى التدوينة، فلن يظهر القسم المرتبط بها.

   ملاحظة
   يُفضل استخدام تسمية واحدة أو اثنتين كحد أقصى لكل تدوينة لضمان دقة النتائج المعروضة.

2. تأكد من وضع كود JavaScript في المكان الصحيح
   تحقّق من أن الكود موضوع تحت الوسم <data:post.body/> وليس خارجه، ويفضّل أسفل الكود الثاني داخل هذا الوسم كما شرحنا سابقًا.
3. اختبر الكود في تدوينة تحتوي على محتوى حقيقي
   أحيانًا لا يتم عرض النتائج في تدوينات تجريبية فارغة أو لا تحتوي على محتوى كافٍ.
4. فحص التوافق مع القالب
   إذا كنت تستخدم قالبًا مختلفًا عن Plus UI أو قمت بتعديله مسبقًا، فتأكد من أن هيكل التدوينة لا يمنع إدخال العناصر الديناميكية داخل المحتوى.

   ملاحظة
   يجب أن تكون التدوينة معروضة بصيغة "post" وليس صفحة ثابتة (page) لأن الكود يستثني الصفحات.

5. فحص أدوات الحماية أو الإضافات الخارجية
   بعض أدوات تحسين الأداء أو الحماية قد تمنع تنفيذ السكربتات الديناميكية. جرّب تعطيلها مؤقتًا للتحقق.

---

خاتمة المقال

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

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

في حال واجهت أي مشكلة أثناء التركيب، أو رغبت في تخصيص المظهر ليتماشى أكثر مع هوية مدونتك، لا تتردد في طرح استفسارك أو طلب التعديل المناسب.

معلومة مهمة
تم إعداد هذا المقال وتوفير الكود اعتمادًا على فكرة تم نشرها مسبقًا في موقع WendyCode، مع إجراء تعديلات لتناسب المدونات العربية على منصة بلوجر.

يمكن الرجوع إلى المصدر للاطلاع على النسخة الأصلية أو لاكتشاف أفكار أخرى مشابهة ومفيدة.

شاهد ايضا :