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

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

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

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

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

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

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

قم بتسجيل الدخول إلى لوحة تحكم بلوجر.
في لوحة التحكم، انقر على "القالب".
انقر على أيقونة السهم لأسفل بجوار زر "تخصيص".
انقر على "تحرير HTML"، وسيتم توجيهك إلى صفحة التحرير.
ابحث عن الكود ]]></b:skin> والصق أكواد CSS التالية أعلى منه.


/* أكورديون بواسطة أوعي وشك */
.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}

بعد ذلك، ابحث عن الكود </b:defaultmarkup> والصق الأكواد التالية أعلى منه.


<!--[ أكورديون المواضيع ذات الصلة التلقائي بواسطة أوعي وشك ]-->
<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)+"&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)، اتركه "auto" لعرض العنوان كاملاً.
false: استبدله بـ true إذا كنت تريد فتح المواضيع ذات الصلة في نافذة جديدة.

أضف الأكواد التالية أسفل <data:post.body/>.


<!--[ أكورديون المواضيع ذات الصلة التلقائي بواسطة أوعي وشك ]-->
<b:include cond='data:view.isPost' data='post' name='auto-relatedPost'/>

احفظ التغييرات بالنقر على أيقونة الحفظ.

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


<!--[ أكورديون المواضيع ذات الصلة بواسطة أوعي وشك ]-->
<div class='acdn'>
  <!--[ المواضيع ذات الصلة ]-->
  <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>
        
        <!--[ عنوان المواضيع ذات الصلة ]-->
        <span>المزيد من المقالات حول هذا الموضوع</span>
      </label>

      <!--[ محتوى المواضيع ذات الصلة ]-->
      <div class='cont'>
        <div id='autoRelatedPost'></div>
      </div>
    </div>
  </div>
</div>

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

استخدام بديل

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


<!--[ أكورديون بواسطة Fineshop ]-->
<div class='acdn'>
  <!--[ أكورديون 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>
        
        <!--[ عنوان الأكورديون ]-->
        <span>عنوان_الأكورديون_1</span>
      </label>

      <!--[ محتوى الأكورديون ]-->
      <div class='cont'>
        <p>...</p>
      </div>
    </div>
  </div>
  
  <!--[ أكورديون 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>
        
        <!--[ عنوان الأكورديون ]-->
        <span>عنوان_الأكورديون_2</span>
      </label>

      <!--[ محتوى الأكورديون ]-->
      <div class='cont'>
        <p>...</p>
      </div>
    </div>
  </div>
  
  <!--[ أكورديون 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>
        
        <!--[ عنوان الأكورديون ]-->
        <span>عنوان_الأكورديون_3</span>
      </label>

      <!--[ محتوى الأكورديون ]-->
      <div class='cont'>
        <p>...</p>
      </div>
    </div>
  </div>
  
  <!--[ أكورديون 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>
        
        <!--[ عنوان الأكورديون ]-->
        <span>عنوان_الأكورديون_4</span>
      </label>

      <!--[ محتوى الأكورديون ]-->
      <div class='cont'>
        <p>...</p>
      </div>
    </div>
  </div>
</div>

الخلاصة

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

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار

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

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

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

استخدام بديل

الخلاصة

إرسال تعليق

اذا كنت تبحث اوتبحثين عن عمل اضافي بجانب عملك مقابل مادي اتصل بنا

الدردشة وتساب

إرسال طلب

إنشاء زر تنزيل جميل ومثير للإعجاب على بلوجر

كيفية إنشاء صندوق ملاحظات ملون على مدونة

طريقة حذف الرمز ?m=1 في رابط مدونتك أو موقعك على بلوجر

اهم مكتبات خطوط لمدونات بلوجر

طريقة إنشاء أداة إشعار الموافقة على ملفات تعريف الارتباط المستجيبة في Blogger

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار