كيفية إضافة الأكورديون الأنيق ذي الصلة للمواضيع في منشور المدونة الخاص بك لـ Blogger

مرحبًا! مرحبا بكم في مدونة عالم المدون wdbloog.

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

© مدونة wdbloog | المواضيع ذات الصلة الأكورديون

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

---

كيفية إضافة الأكورديون المواضيع ذات الصلة؟

إضافة المنشورات ذات الصلة لن يتطلب الأكورديون في منشور المدونة الخاص بك الكثير من المعرفة حول HTML أو CSS أو JS لأنني قمت بالفعل بتصميمها لك. ما عليك القيام به هو تنفيذ الرموز في المكان المناسب في موضوع Blogger XML الخاص بك وإضافة رموز HTML ذات الصلة من Accordion في منتصف مشاركاتك.

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

الخطوة 1: أولاً وقبل كل شيء ، قم بتسجيل الدخول إلى

لوحة تحكم Blogger.

الخطوة 2: في Blogger Dashboard ، انقر فوق Theme .

الخطوة 3: انقر فوق رمز السهم لأسفل بجوار الزر "تخصيص" .

الخطوة 4: انقر فوق تحرير HTML ، ستتم إعادة توجيهك إلى صفحة التحرير.

الخطوة 5: الآن ابحث في الكود والصق أكواد CSS]]></b:skin> التالية فوقه مباشرة.

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

/* Accordion by wdbloog */
.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}

الخطوة 6: بعد القيام بذلك ، ابحث في الكود </b:defaultmarkup>والصق الرموز التالية فوقه مباشرة.

<!--[ Automatic Related Posts Script by wdbloog ]-->
<b:includable id='auto-relatedPost'>
  <script>
    var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];
    var autoRelatedConfig = {
      homePage: &quot;<data:blog.homepageUrl.canonical/>&quot;,
      numPosts: 10,
      titleLength:&quot;auto&quot;,
      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)+"&hellip;":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إذا كنت تريد فتح المنشورات ذات الصلة في علامات تبويب جديدة

الخطوة 7: أضف الرموز التالية أدناه إلى <data:post.body/>.

<!--[ Automatic Related Posts by wdbloog ]-->
<b:include cond='data:view.isPost' data='post' name='auto-relatedPost'/>

الخطوة 8: احفظ التغييرات بالنقر فوق هذا الرمز

تم ذلك! أضف الآن أكواد HTML التالية في منشورات المدونة الخاصة بك حيثما تريد إظهار الأكورديون ذات الصلة.

<!--[ Related Posts Accordion by wdbloog ]-->
<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>

يتم عرض المنشورات ذات الصلة حسب تسميات المنشورات.

الاستخدام البديل

يمكنك استخدام هذا كـ Accordion في مشاركاتك أيضًا ، لذلك استخدم أكواد HTML التالية :

<!--[ Accordion by wdbloog ]-->
<div class='acdn'>
  <!--[ Accordion 1 ]-->
  <div class='ac'>
    <div class='acCont'>
      <input class='acMn' id='offaccor1' name='accordion-1' type='checkbox'/>
      <label class='acTtl' for='offaccor1'>
        <i class='acIcn'></i>
        
        <!--[ Accordion Title ]-->
        <span>Accordion_Title_1</span>
      </label>
      <!--[ Accordion Content ]-->
      <div class='cont'>
        <p>...</p>
      </div>
    </div>
  </div>
  
  <!--[ Accordion 2 ]-->
  <div class='ac'>
    <div class='acCont'>
      <input class='acMn' id='offaccor2' name='accordion-2' type='checkbox'/>
      <label class='acTtl' for='offaccor2'>
        <i class='acIcn'></i>
        
        <!--[ Accordion Title ]-->
        <span>Accordion_Title_2</span>
      </label>
      <!--[ Accordion Content ]-->
      <div class='cont'>
        <p>...</p>
      </div>
    </div>
  </div>
  
  <!--[ Accordion 3 ]-->
  <div class='ac'>
    <div class='acCont'>
      <input class='acMn' id='offaccor3' name='accordion-3' type='checkbox'/>
      <label class='acTtl' for='offaccor3'>
        <i class='acIcn'></i>
        
        <!--[ Accordion Title ]-->
        <span>Accordion_Title_3</span>
      </label>
      <!--[ Accordion Content ]-->
      <div class='cont'>
        <p>...</p>
      </div>
    </div>
  </div>
  
  <!--[ Accordion 4 ]-->
  <div class='ac'>
    <div class='acCont'>
      <input class='acMn' id='offaccor4' name='accordion-4' type='checkbox'/>
      <label class='acTtl' for='offaccor4'>
        <i class='acIcn'></i>
        
        <!--[ Accordion Title ]-->
        <span>Accordion_Title_4</span>
      </label>
      <!--[ Accordion Content ]-->
      <div class='cont'>
        <p>...</p>
      </div>
    </div>
  </div>
</div>

تجريبي

هل تريد رؤيتها تعمل؟

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

دعونا نلقي نظرة عليه!

مشاهدة العرض التوضيحي

شروط الاستخدام

إذا كنت ترغب في استخدام Accordion الوظائف ذات الصلة على موقع الويب الخاص بك ، فالرجاء عدم إزالة السمات من الرموز ، فلن تكون مرئية على موقع الويب الخاص بك.

إذا كنت ترغب في إعادة كتابة مقال على هذا المنشورات ذات الصلة الأكورديون أو الأكورديون باستخدام هذه الرموز ، فيجب عليك إضافة مرجع به ارتباط مرئي وقابل للنقر يعيد التوجيه إلى موقعنا على الويب https://www.wdbloog.com:. إذا أعدت الكتابة بدون مرجع ، فسيتم اتخاذ الإجراءات القانونية .

خاتمة

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

فتح رابط التوجيه