الدرس 65 : طريقة إضافة عدد التعليقات على كل موضوع بالترتيب

بسم الله الرحمان الرحيم

السلام عليكم أحباء ومتابعي مدونة منبع المعلوميات

كلكم لاحظتم الإضافة الجديدة على يسار القالب ◀️ أو ما يسمى بالسايدبار (من لم يلاحظها يمكنك بمجرد النظر إلى اليسار أن تجدها . أو ببساطة شاهد هذا 🔽 ) .

هذه الإضافة ممتازة من حيث التصميم بحيث :

1. تصميم خفيف جدا  🎨
2. فور تمرير الماوس السكربت أو الإضافة تتفاعل معك 📥📤
3. تحدث تلقائيا دون داعي لإعادة تغيير الكود كل مرة ✅

لمن يسأل عن أهمية هذه الإضافة فهي ببساطة تجبر الزائر على مزيد البقاء في الموقع .

كيف ذلك ؟

بمجرد أن يرى أن أخد المواضيع حاز على عدد محترم من التعليقات سيقول

"لماذا حصل ذلك الموضوع على كل هذه الزيارات ؟ دعني ألقي نظرة عليه !"

و هكذا تكسب زيارة جديدة ببساطة شديدة لنمر لطريقة التركيب :

أولا : نفتح التخطيط
ثانيا : نتوجه للمكان الذي سنضع فيه الإضافة (أنصح بوضعها في السايدبار أي اليسار)
ثالثا : نختار

HTML/JavaScript إضافة وظيفة طرف ثالث أو شفرة أخرى إلى مدونتك الإلكترونية. بواسطة Blogger

رابعا : نضيف هذا الكود 

<div id="most-comments"></div><style scoped='' type='text/css'>#most-comments li,#most-comments ul,#most-comments ul li{margin:0;list-style:none;color:#444;font-family:'alba-sans',Helvetica,Arial,sans-serif;font-size:14px}#most-comments ul li{position:relative;overflow:hidden;background:#fff;margin:3.5px 0;padding:7px 10px 7px 50px;white-space:nowrap;text-overflow:ellipsis;box-shadow:inset 0 0 #2FB24A;border:1px solid #e6e6e6;transition:all .6s}#most-comments ul li:hover{box-shadow:inset 310px 0 #2FB24A}#most-comments ul li a{color:#444;font-weight:700;text-decoration:none;transition:all .3s}#most-comments ul li a:hover,#most-comments ul li:hover a{color:#fff}.count-most{position:absolute;left:0;top:0;width:40px;height:100%;margin:0;padding:7px 0;background-color:#383838;color:#fff!important;text-align:center;transition:all .3s}#most-comments ul li:hover .count-most{background-color:#2FB24A}</style><script type='text/javascript'>//<![CDATA[var numPosts=10;var homePage="www.manba3almaaloumiyet.com";var postTitlear=new Array();var postUrlar=new Array();var postCommentar=new Array();var totalpost;document.write('<div id="most-comments"><ul>');function mostComment(j){var a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];}};postTitlear.push(c);postUrlar.push(g);postCommentar.push(b)}sortPosts();for(var f=0;f<numPosts;f++){var e='<li><span class="count-most">'+postCommentar[f]+'</span><a href="'+postUrlar[f]+'" title="'+postTitlear[f]+'" target="_blank">'+postTitlear[f]+'</a>';document.write(e)}}function sortPosts(){function c(d,f){var e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]=e}for(var b=0;b<postTitlear.length-1;b++){for(var a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}document.write('<script src="http://'+homePage+'/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=mostComment"><\/script>');document.write('</li>')document.write('</ul>')document.write('</div>');//]]></script>

حسنا للتعديل على الكود إتبعوا هذا الشرح :
غير www.manba3almaaloumiyet.com برابط موقعك
غير 10 بعدد المواضيع التي تريد منها أن تظهر داخل الإضافة
غير #2FB24A بكود اللون الذي تريد أن يظهر

أتمنى يكون الشرح وافي و كافي و قد أفادكم في ربح المزيد من الزيارات الإضافية .