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

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

ولكن، لماذا نكتفي بقائمة عادية مملة عندما يمكننا تحويلها إلى عنصر تفاعلي أنيق وجذاب؟ في هذا الدليل الشامل، سنأخذك في رحلة لتعلم كيفية إضافة منشورات ذات صلة في بلوجر باستخدام تأثير الأكورديون (Accordion)، مما يمنح مدونتك لمسة احترافية تتفوق بها على المنافسين.

شاهد العرض التجريبي الحي

لماذا تعتبر إضافة منشورات ذات صلة بإسلوب الأكورديون استثمارًا ذكيًا لمدونتك؟

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

1. تقليل معدل الارتداد (Bounce Rate) بشكل ملحوظ

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

2. زيادة مشاهدات الصفحات ومدة الجلسة

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

3. تحسين الربحية والتحويلات

سواء كنت تحقق الدخل من خلال الإعلانات (like Google AdSense) أو التسويق بالعمولة, أكثر عدد مرات مشاهدة الصفحة تعني فرصًا أكثر للربح. إذا كان الزائر منغمسًا في قراءة سلسلة من المقالات المتعلقة بمنتج ما، فمن المرجح أن ينقر على رابط رابط تابع أو إعلان ذي صلة.

4. تحسين البنية الداخلية للموقع (Internal Linking)

الروابط الداخلية القوية هي عصب استراتيجية SEO. تساعد محركات البحث في اكتشاف المحتوى الجديد، ونشر "link equity" (قوة الروابط) عبر صفحاتك، وتوضيح هيكل موقعك ومواضيعه الرئيسية. المنشورات ذات الصلة المؤتمتة تبني هذه البنية تلقائيًا.

5. تجربة مستخدم متفوقة وسلسة

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

المعيار	القائمة العادية (العادية)	تصميم الأكورديون (المتقدمة)
التفاعل البصري	❌ ثابت وممل	✅ تفاعلي وجذاب
توفير المساحة	❌ تستهلك مساحة كبيرة دائمًا	✅ تظهر فقط عند الحاجة (نقر المستخدم)
معدل النقر (CTR)	منخفض نسبيًا	مرتفع بسبب عنصر المفاجأة والتشويق
الاحترافية	عادية	عالية جدًا، تشبه التصاميم الحديثة
التكيف مع الهاتف	جيد	ممتاز وسلس

قبل أن نبدأ: الخطوة الأهم التي يتجاهلها الجميع!

في حماسك لتطبيق هذه الميزة الرائعة، لا تخطو الخطوة الأولى نحو الكارثة. أنشئ نسخة احتياطية من قالب مدونتك الآن!

لماذا هذه الخطوة غير قابلة للمساومة؟ الأكواد حساسة للغاية. خطأ بسيط مثل حذف علامة > أو ; يمكن أن "يكسر" تصميم مدونتك بالكامل. النسخة الاحتياطية هي شبكة الأمان الخاصة بك.

كيفية عمل نسخة احتياطية في بلوجر:

1. انتقل إلى لوحة تحكم بلوجر.
2. من القائمة الجانبية، اختر "الموضوع" أو "Theme".
3. انقر على زر "النقاط الثلاث" في الزاوية اليمنى العليا.
4. اختر "نسخ احتياطي" ثم "تنزيل".
5. احفظ الملف (.xml) في مكان آمن على جهازك.

الآن، يمكنك المتابعة بثقة تامة!

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

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

الخطوة 1: الدخول إلى محرر قالب بلوجر

1. في لوحة تحكم بلوجر، انتقل إلى "المظهر" > "تحرير HTML".
2. ستظهر لك نافذة تحتوي على جميع الأكواد الخاصة بقالبك. لا تشعر بالرهبة! سنرشدك بالضبط إلى مكان كل شيء.

الخطوة 2: إضافة أنماط CSS للتنسيق والتجربة البصرية

أنماط CSS هي التي تعطي للأكورديون شكله الجميل وألوانه الجذابة وتأثيراتها السلسة.

1. داخل محرر HTML، استخدم اختصار الكيبورد Ctrl + F (أو Cmd + F على الماك) للبحث عن السطر التالي:

   </style>

2. قبل هذا السطر مباشرة، قم بلصق كود CSS التالي. يمكنك تخصيص الألوان (#8a8aff) لتناسب ألوان علامتك التجارية.

/* Accordion Related Posts by Tecky AaryaN - Styles */
.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, 0.1);
transition: all 0.3s ease;
}
.acdn .ac:hover {
box-shadow: 0 8px 15px rgba(51, 51, 51, 0.15);
transform: translateY(-2px);
}
.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 0.3s ease; color:#08102b; } .acdn.cont ul, .acdn .cont ol { padding-left: 13px; } .acdn.cont li { padding: 5px 0; } .acdn.cont a { text-decoration:none; color:#08102b; font-weight:500; } .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; cursor:pointer; } .acTtl span{ display: flex; flex-grow: 1; } .acTtl span:before{ content: ''; padding-left: 15px; } .acIcn{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:20px; height:20px; position:relative; margin-right:10px; transition:transform 0.3s ease; } .acIcn:before,.acIcn:after { content:''; display:block; width:100%; height:2px; border-radius:2px; background:#08102b; position:absolute; } .acIcn:after{ transform: rotate(90deg); }

.acMn { display: none; } .acMn:checked~ .acTtl .acIcn { transform: rotate(180deg); } .acMn:checked~ .acTtl .acIcn:after { opacity: 0; } .acMn:checked~ .cont { max-height:500px; padding-top:15px; padding-bottom:20px; }

/* دعم الوضع الداكن (Dark Mode) - إضافة احترافية */ .darkMode.acdn .ac { background: #252526; border-left-color: #4c4c4e; } .darkMode.acdn .cont, .darkMode .acdn .cont a, .darkMode .acTtl { color: #fefefe; } .darkMode.acTtl .acIcn:before, .darkMode .acTtl .acIcn:after { background: #fefefe; }

/* التجاوب مع الهاتف (Responsive) */ @media(max-width: 768px) { .acdn{ margin: 20px 0; } .acdn.ac { padding: 15px 0 15px 10px; } .acdn.cont { padding-left: 20px; padding-right: 20px; } .acTtl{ font-size: 15px; } } 

الخطوة 3: إضافة كود JavaScript للمنطق والوظيفة

هذا الكود هو العقل المدبر وراء الكواليس. هو المسؤول عن جلب المنشورات ذات الصلة تلقائيًا بناءً على تسميات (Labels) المقال الحالي.

1. في نفس محرر HTML، ابحث عن السطر: </body> أو </b:skin>
2. قبل السطر </body> مباشرة، الصق كود JavaScript التالي. هذا هو المكان الأمثل لوضعه لضمان عدم إبطاء تحميل الصفحة.

   
   <script type='text/javascript'>
   //<![CDATA[
   // Automatic Related Posts Script by Tecky AaryaN
   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/>",
   numPosts: 8, // غيّر هذا الرقم لزيادة أو تقليل عدد المنشورات المعروضة
   titleLength: "auto", // "auto" للعنوان الكامل، أو رقم مثل "50" لقص العنوان
   newTabLink: false, // true لفتح الروابط في نافذة جديدة، false في نفس النافذة
   containerId: "autoRelatedPost", // ID of the container
   callBack: function(){} // دالة استدعاء بعد التحميل (اختياري)
   };
   // لا تقم بتعديل أي شيء أدناه إذا لم تكن تعرف ما تفعله
   (function(window, document) {
   var scriptContainer = document.getElementsByTagName('head')[0];
   var config = autoRelatedConfig;
   var homeUrl = config.homePage.replace(//$/, "");
   
   code Code download content_copy expand_less
   
   function loadScript(url) { var script = document.createElement('script'); script.async = true; script.src = url; scriptContainer.appendChild(script); }
   
   function shuffleArray(array) { for (var i = array.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var temp = array[i]; array[i] = array[j]; array[j] = temp; } return array; }
   
   var labelPath = (typeof labelArray === 'object' && labelArray.length > 0) ? "/-/"+ shuffleArray(labelArray)[0] : "";
   
   // First, get the total number of posts to calculate a random start index window.autoRelatedIndex = function(e) { var totalPosts = parseInt(e.feed.openSearch$totalResults.$t); var numPosts = config.numPosts; var maxStartIndex = Math.max(1, totalPosts - numPosts); var randomStartIndex = Math.floor(Math.random() * maxStartIndex) + 1;
   
   var feedUrl = homeUrl + "/feeds/posts/summary" + labelPath + "?alt=json-in-script&orderby=updated&start-index=" + randomStartIndex + "&max-results=" + numPosts + "&callback=showAutoRelated"; loadScript(feedUrl); };
   
   // Then, process the feed and display the posts window.showAutoRelated = function(e) { var container = document.getElementById(config.containerId); if (!container) return;
   
   var entries = shuffleArray(e.feed.entry || []); var html = '<ul style="list-style: none; padding: 0; margin: 0;">'; var target = config.newTabLink ? ' target="_blank" rel="noopener noreferrer"' : '';
   
   for (var i = 0; i < Math.min(entries.length, config.numPosts); i++) { var post = entries[i]; var title = post.title.$t; // Trim title if needed if (config.titleLength !== "auto" && title.length > config.titleLength) { title = title.substring(0, config.titleLength) + "..."; } var link = "#"; // Find the alternate link for (var j = 0; j < post.link.length; j++) { if (post.link[j].rel === "alternate") { link = post.link[j].href; break; } } html += '<li style="margin-bottom: 12px; padding-left: 0;">'; html += '<a href="' + link + '"' + target + ' style="color: inherit; text-decoration: none; display: block; padding: 8px 5px; border-radius: 6px; transition: background-color 0.2s ease;">'; html += '<span style="font-weight: 500;">' + title + '</span>'; html += '</a>'; html += '</li>'; } html += '</ul>';
   
   container.innerHTML = html; if (typeof config.callBack === "function") config.callBack(); };
   
   // Kick things off by loading the initial feed to get the total count var initFeedUrl = homeUrl + "/feeds/posts/summary" + labelPath + "?alt=json-in-script&orderby=updated&max-results=0&callback=autoRelatedIndex"; loadScript(initFeedUrl);
   
   })(window, document); //]]> 

ملاحظة! نصائح للتخصيص:
- numPosts: 8: غيّر الرقم 8 إلى العدد الذي تريده (مثلاً 5 أو 10).
- titleLength: "auto": اتركه "auto" لإظهار العنوان الكامل، أو استبدله برقم مثل 50 لقص العناوين الطويلة.
- newTabLink: false: غيّر false إلى true إذا كنت تريد فتح الروابط في علامة تبويب جديدة.

الخطوة 4: وضع الكود في المكان الصحيح داخل المقال

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

1. في محرر HTML، ابحث عن الكود التالي الذي يمثل مكان ظهور جسم المقال: <data:post.body/>
2. أسفل هذا السطر مباشرة، الصق الكود التالي:

   
   <!-- Automatic Related Posts Accordion by Tecky AaryaN -->
   <b:if cond='data:view.isPost'>
   <div class='acdn'>
   <div class='ac'>
   <input class='acMn' id='related-posts-accordion' type='checkbox'/>
   <label class='acTtl' for='related-posts-accordion'>
   <i class='acIcn'></i>
   <span>مقالات ذات صلة قد تهمك</span> <!-- يمكنك تغيير هذا النص -->
   </label>
   <div class='cont'>
   <div id='autoRelatedPost'></div>
   </div>
   </div>
   </div>
   </b:if>
   

   يمكنك تخصيص النص مقالات ذات صلة قد تهمك إلى أي شيء آخر مثل "اقرأ أيضًا" أو "لمزيد من المعلومات".

الخطوة 5: الحفظ والاختبار

1. انقر على "حفظ السمة".
2. انتقل إلى إحدى مقالات مدونتك وقم بإعادة تحميل الصفحة.
3. يجب أن ترى الآن قسم "مقالات ذات صلة" بتصميم الأكورديون الجميل. جرب النقر عليه لترى التأثير السلس!

استكشاف الأخطاء وإصلاحها: ماذا لو لم تعمل؟ لا تقلق إذا واجهتك مشكلة، فالأمر شائع. إليك الحلول لأكثر المشاكل شيوعًا:

• المشكلة: لا يظهر شيء.
• الحل: تأكد من أنك قد أضفت كود الـ JavaScript قبل </body> وليس في مكان آخر. تأكد من أن المقال لديه تسميات (Labels)، فالأداة تعتمد عليها للعثور على المنشورات ذات الصلة.
• المشكلة: التصميم يبدو مكسورًا أو غير منسق.
• الحل: تأكد من أنك قد ألصقت كود CSS بالكامل ودون نقص داخل الوسم أو <style>. تأكد من عدم وجود تعارض بين أنماط CSS الخاصة بك والأنماط المضافة.
• المشكلة: الأكورديون لا ينفتح أو ينغلق.
• الحل: تأكد من أن قيمة id في الوسم <input> (related-posts-accordion) تطابق قيمة for في الوسم <label>.

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

1. هل هذه الطريقة متوافقة مع جميع قوالب بلوجر؟

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

2. هل تؤثر هذه الإضافة على سرعة تحميل موقعي؟

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

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

يمكنك بسهولة تعديل كود CSS. ابحث عن قيم الألوان (مثل #f0f0ff, #8a8aff) وغيرها إلى الألوان التي تريدها. يمكنك استخدام أدوات مثل Adobe Color Wheel لاختيار ألوان متناسقة.

4. ماذا لو أردت إظهار منشورات ذات صلة بناءً على معيار غير التسميات (Labels)؟

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

الخاتمة

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

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

الآن دورك! جرب هذه الخطوات وشاركنا تجربتك في التعليقات أدناه.

• هل واجهتك أي مشكلة؟ اطرحها وسنساعدك في حلها.
• هل لديك أفكار إبداعية أخرى لتحسين مدونة بلوجر؟
• لا تنسَ مشاركة هذا المقال مع أصدقائك من أصحاب المدونات لتعم الفائدة!

المصدر:
www.asltk1.com

وفي النهاية!

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

تنويه!

المحتوى محمي بموجب قانون DMCA. يمنع نسخ أو إعادة نشر المحتوى دون إذن مسبق.
جميع الحقوق محفوظة © أصل للمعلوميات.