اضافة أداة مواضيع ذات صلة وسط المواضيع بشكل تلقائي

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

من المعروف ان مواضيع ذات صلة هي عبارة عن روابط من نفس التسمية لها علاقة بالموضوع الذي تكتبه . ومن مزايا ظهور مواضيع ذات صلة وسط المشاركات انها تساعد كثيرا في زيادة عدد الزوار وتحسين الروابط الداخليه او ما يعرف بالباك لينك الداخلي pack link . ومن مزاياها ايضا انها توفر عليك مجهود وضع الروابط بشكل يدوي حيث تعمل هذه الاضافة تلقائيا .

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

شرح طريقة تثبيت اضافة مواضيع ذات صلة وسط المشاركات بشكل تلقائي :

1- الخطوة الأولى :

 خذ نسخة احتياطية من القالب تجنبا لحدوث اي خطأ ، انتقل الى لوحة تحكم بلوجر ثم المظهر ثم تحرير html وابحث عن العلامة </head> وضع فوقها مباشرة الكود التالي :

<b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> //<![CDATA[ var relatedSimply = new Array(); var relatedSimplyNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedSimply[i];}} relatedSimply = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');} //]]> </script> </b:if>

2- الخطوة الثانية :

 الآن ابحث عن العلامة ]]></b:skin> والصق فوقها مباشرة الكود التالي :

/* Related Post Style 1 */ .related-simplify{position :relative;padding:0;margin:15px auto;width : 100%;} .related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5} .related-simplify ul{margin:0;padding:0} .related-simplify ul li{background:#f6f6f6;position :relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s} .related-simplify ul li:nth-child(odd){background:#fefefe} .related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)} .related-simplify ul li:before{content:'\f138';font-family:fontawesome;position :absolute;margin:0 4px 0 9px;color:#2ecc71;overflow:hidden;transition:all .3s} .related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceleft .3s alternate ease infinite;animation:bounceleft .3s alternate ease infinite} .related-simplify a{color:#0383d9;font-size:13px;margin:0 30px 0 0;} .related-simplify a:hover{color:#0383d9;text-decoration:underline} .related-simplify ul li:nth-child(n+4) {display :none;} @-webkit-keyframes bounceleft{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}} @keyframes bounceleft{from{transform:translateX(0)}to{transform:translateX(3px)}}

3- الخطوة الأخيرة :

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

<div expr:id='"post2" + data:post.id'><p><data:post.body/></p></div> <script type='text/javascript'> var obj0=document.getElementById("post1<data:post.id/>"); var obj1=document.getElementById("post2<data:post.id/>"); var s=obj1.innerHTML; var t=s.substr(0,s.length/2); var r=t.lastIndexOf("<br>"); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} </script>

والآن قم بحفظ القالب وتوجه لمدونتك وشاهد تطبيق الآداة ستجد أن الموضوعات ذات الصلة أصبحت تظهر في منتصف الموضوع وبشكل ملفت وجذاب