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

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

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

لماذا تحتاج إلى إضافة منشورات ذات صلة؟

عند انتهاء القارئ من قراءة مقال، قد يغادر الموقع إذا لم يجد محتوىً آخر يثير اهتمامه. هنا تأتي أهمية المنشورات ذات الصلة، حيث تساعد في:

1. ✅ إبقاء الزائر في موقعك لفترة أطول.
2. ✅ تحسين معدل الارتداد وتحقيق تجربة تصفح سلسة.
3. ✅ زيادة عدد المشاهدات لكل زائر.
4. ✅ تحسين ترتيب موقعك في محركات البحث من خلال زيادة التفاعل الداخلي.

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

قبل أن تبدأ: لا تنسَ النسخة الاحتياطية!

قبل تعديل أي شيء في قالب المدونة، قم بعمل نسخة احتياطية من القالب الحالي. يمكنك استعادته لاحقاً في حال حدوث أي خطأ، وذلك عن طريق:

1. الذهاب إلى لوحة تحكم بلوجر.
2. الانتقال إلى المظهر > النسخ الاحتياطي/الاستعادة.
3. النقر على تنزيل نسخة احتياطية.

خطوات إضافة أداة الأكورديون للمنشورات ذات الصلة

1. الدخول إلى لوحة تحكم بلوجر

• سجل الدخول إلى حسابك على Blogger.
• انتقل إلى تبويب المظهر في القائمة الجانبية.

2. تعديل كود القالب

• اضغط على السهم بجانب زر "تخصيص".
• اختر تحرير HTML لفتح محرر الأكواد.

3. إضافة أكواد CSS لتنسيق الأكورديون

• اضغط على CTRL + F وابحث عن الكود التالي: ]]></b:skin> .

• الصق أكواد CSS المخصصة للأكورديون قبل هذا السطر مباشرةً لضبط شكل الأداة وتحسين تصميمها.

/* Accordion by Tecky AaryaN */
.acdn{position:relative;list-style:none;margin:30px 0;padding:0;font-size:14px;line-height:1.7em;font-family:inherit}
.acdn .ac{width:100%;padding:20px 0 20px 15px;margin:10px 0;background:#f0f0ff;border-radius:10px;border-left:4px solid #8a8aff;box-shadow:0 5px 10px rgba(51,51,51,.1)}
.acdn .ac:nth-child(4n + 1){background:#f0f0ff;border-left-color:#8a8aff}
.acdn .ac:nth-child(4n + 2){background:#fff0f3;border-left-color:#ff8aa1}
.acdn .ac:nth-child(4n + 3){background:#f0faff;border-left-color:#8ad8ff}
.acdn .ac:nth-child(4n + 4){background:#fff7f0;border-left-color:#ffc08a}
.acdn .cont{margin:0;padding-left:27px;padding-right:27px;position:relative;overflow:hidden;max-height:0;transition:all .3s ease;color:#08102b}
.acdn .cont ul, .acdn .cont ol{padding-left:13px}
.acdn .cont li{padding:0}
.acdn .cont a{text-decoration:none;color:#08102b}
.acdn .cont a:hover{text-decoration:underline}
.acdn p:first-child{margin-top:0}
.acdn p:last-child{margin-bottom:0} 
.acTtl{display:flex;align-items:center;font-weight:700;color:#08102b}
.acTtl span{display:flex;flex-grow:1}
.acTtl span:before{content:'';padding-left:15px}
.acIcn{flex-shrink:0;display:flex;align-items:center;width:12px;height:12px;position:relative}
.acIcn:before, .acIcn:after{content:'';display:block;width:100%;height:2px;border-radius:2px;background:#08102b}
.acIcn:after{position:absolute;transform:rotate(90deg)}
.acMn{display:none}
.acMn:checked ~ .acTtl .acIcn:after{visibility:hidden;opacity:0}
.acMn:checked ~ .cont{max-height:100vh;padding-top:15px;padding-bottom:8px}
  
.darkMode .acdn .ac{background:#252526;border-left-color:#4c4c4e}
.darkMode .acdn .cont, .darkMode .acdn .cont a, .darkMode .acTtl, .darkMode .acMn:checked ~ .acTtl{color:#fefefe}
.darkMode .acTtl .acIcn:before, .darkMode .acTtl .acIcn:after, .darkMode .acMn:checked ~ .acTtl .acIcn:before, .darkMode .acMn:checked ~ .acTtl .acIcn:after{background:#fefefe}

4. إدراج أكواد JavaScript لتفعيل الأكورديون

• ابحث عن الكود التالي في القالب: </b:defaultmarkup> .

• قبل هذا السطر مباشرةً، قم بلصق أكواد JavaScript التي تسمح للأكورديون بالعمل بسلاسة عند النقر على المنشورات ذات الصلة.

<!--[ Automatic Related Posts Script by Tecky AaryaN ]-->
<b:includable id='auto-relatedPost'>
  <script>
    var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>];
    var autoRelatedConfig = {
      homePage: "<data:blog.homepageUrl.canonical/>",
      numPosts: 10,
      titleLength:"auto",
      newTabLink: false,
      callBack:function(){}
    }
  </script>
  <script>/*<![CDATA[*/ var autoRelatedIndex,showAutoRelated;null!=document.getElementById("autoRelatedPost")&&function(a,n){var e,u={homePage:"https://blog.fineshop.eu.org",numPosts:7,titleLength:"auto",containerId:"autoRelatedPost",newTabLink:!1,callBack:function(){}};for(e in autoRelatedConfig)u[e]=("undefined"==autoRelatedConfig[e]?u:autoRelatedConfig)[e];function l(e){var t=a.createElement("script");t.async="async",t.rel="preload",t.src=e,n.appendChild(t)}function c(e){var t,a,n=e.length;if(0===n)return!1;for(;--n;)t=Math.floor(Math.random()*(n+1)),a=e[n],e[n]=e[t],e[t]=a;return e}var o="object"==typeof labelArray&&0<labelArray.length?"/-/"+c(labelArray)[0]:"";autoRelatedIndex=function(e){var t=e.feed.openSearch$totalResults.$t-u.numPosts,e=(e=1,t=0<t?t:1,Math.floor(Math.random()*(t-e+1))+e);l(u.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+o+"?alt=json-in-script&orderby=updated&start-index="+e+"&max-results="+u.numPosts+"&callback=showAutoRelated")},showAutoRelated=function(e){var t,a,n=document.getElementById(u.containerId),l=c(e.feed.entry),o="<ul>",r=u.newTabLink?' target="_blank"':"";if(n){for(var s=0;s<u.numPosts&&s!=l.length;s++){a=l[s].title.$t,a="auto"!==u.titleLength&&u.titleLength<a.length?a.substring(0,u.titleLength)+"…":a;for(var d=0,i=l[s].link.length;d<i;d++)t="alternate"==l[s].link[d].rel?l[s].link[d].href:"#";o+='<li><a href="'+t+'" '+r+"><span>"+a+"</span></a></li>"}n.innerHTML=o+="</ul>",u.callBack()}},l(u.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+o+"?alt=json-in-script&orderby=updated&max-results=0&callback=autoRelatedIndex")}((window,document),document.getElementsByTagName("head")[0]); /*]]>*/</script>
</b:includable>

ملاحظة!
تغيير الأجزاء المميزة 10: الحد الأقصى لا. من المشاركات ذات الصلة (على سبيل المثال 15) auto: الحد الأقصى لا. من أحرف العنوان (على سبيل المثال 30)، اتركه تلقائيًا للحصول على العنوان الكامل false: استبدله true إذا كنت تريد فتح المشاركات ذات الصلة في علامات تبويب جديدة.

5. إضافة كود المنشورات ذات الصلة داخل المشاركات

• لتفعيل الأداة داخل منشورات المدونة، ضع كود الأكورديون داخل وسم:

• هذا الكود <data:post.body/> يضمن أن الأداة ستعرض المقالات ذات الصلة استنادًا إلى التصنيفات الخاصة بالمحتوى.

<!--[ Automatic Related Posts by Tecky AaryaN ]-->

<b:include cond='data:view.isPost' data='post' name='auto-relatedPost'/>

6. حفظ التغييرات واختبار الأداة

• بعد إدخال الأكواد، اضغط على حفظ السمة.
• انتقل إلى أي منشور في مدونتك وتحقق من أن الأكورديون يعمل بشكل صحيح.

الاستخدام البديل: إضافة أكورديون داخل المنشورات

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

<!--[ Related Posts Accordion by Tecky AaryaN ]-->

<div class='acdn'>

  <!--[ Related Posts ]-->

  <div class='ac'>

    <div class='acCont'>

      <input class='acMn' id='offrelPost' name='relatedposts-1' type='checkbox'/>

      <label class='acTtl' for='offrelPost'>

        <i class='acIcn'></i>

        

        <!--[ Related Posts Title ]-->

        <span>More Articles on this topic</span>

      </label>

      <!--[ Related Posts Content ]-->

      <div class='cont'>

        <div id='autoRelatedPost'></div>

      </div>

    </div>

  </div>

</div>

يمكنك تعديل النصوص والألوان وفقًا لأسلوب مدونتك لجعلها متوافقة مع التصميم العام.

الأسئلة الشائعة

1. هل يمكن استخدام هذه الطريقة مع جميع قوالب بلوجر؟

نعم، تعمل هذه الطريقة مع معظم قوالب بلوجر، ولكن قد تحتاج إلى بعض التعديلات البسيطة حسب تنسيق القالب المستخدم.

2. هل أداة الأكورديون تؤثر على سرعة المدونة؟

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

3. كيف يمكنني تغيير ألوان وتصميم الأكورديون؟

يمكنك تعديل كود CSS المضاف داخل القالب لتغيير الألوان، حجم الخط، والتأثيرات البصرية حسب رغبتك.

4. هل هناك إضافات بلوجر جاهزة للمنشورات ذات الصلة؟

نعم، هناك بعض الإضافات الجاهزة التي يمكن تثبيتها مباشرةً، ولكن تخصيص الأكواد يتيح لك تحكمًا كاملاً في التصميم والأداء.

5. ماذا أفعل إذا لم تعمل الأداة بعد الإضافة؟

تحقق من:

• إدراج الأكواد في المكان الصحيح.
• توافق القالب مع الأكواد المستخدمة.
• تنظيف ذاكرة التخزين المؤقت (Cache) في المتصفح قبل الاختبار.

الخاتمة

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

إذا واجهت أي مشكلة أثناء التطبيق، لا تتردد في مشاركتها في التعليقات، وسنكون سعداء بمساعدتك!