الإضافة الصحيحة للمواضيع ذات صلة

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

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

لمعاينة هده الإضافة

وللإضافة هده الخاصية إتبع الخطوات التالية

الخطوت الأولى : إذهب إلى تحرير html لقالب مدونتك ولا تنسى أن تضغط على مربع ( توسيع قوالب عناصر واجهة المستخدم ) كى يظهر الكود كاملا.

الخطوت الثانية : إبحث عن هدا الكود </head> عندما تجده نضع فوقه مباشرة هدا الكود

كود:

<script src='http://blogspotjeusef.googlecode.com/files/related-by-www-al3ajaib-blogspot-com.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding:0;margin:10px 0 5px 0;}
#related-posts h2{margin:0;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrmz9nCppSriWygqKSz1Ma73zCU4gHYtS_toiENgsGs5cDgAAvrOq9PyAW_WVhLdj48q21hkevtIQe6v-zUas8cPenkYzV7kFdBOvskzlZ2x_Nm3-2DbU7_-bJt1rm5u94PrvOvIdbeA0/s1600/newslienquan.jpg) no-repeat scroll left 0 transparent;height: 16px;}
#related-posts a:hover {background-color:#d4eaf2}
.lienquan {background: #ddd;height:57px;float: left;padding-left: 1px;width: 173px;margin:1px;overflow:hidden;line-height:1.4em}
.related-posts {margin: 0;padding: 0}
.related-posts ul {margin: 0;padding-top: 5px}
.related-posts ul li {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9hHbuzjmCIvGCCdcVg74SCk-MX3TozsoVT63IrPP29dG28Tt7NDo-mKNi6UnCgpptA5YmZ6zdFRJlrsTWa1HkqA_qf2kKF9S1zeL-3z-E0PjNFlKBFyP6Z1S09UEbGvLAbEDtciNbE5OJ/s1600/list.png) no-repeat top left;list-style-type: none;margin: 0 0 2px 5px;padding: 2px 0 0 18px;word-wrap: break-word}
</style>
<script type='text/javascript'>
//<![CDATA[
var titles=new Array();var titlesNum=0;var urls=new Array();var time=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);e=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a]}}titles=c;urls=b;time=e}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;document.write("<ul>");if(titles.length==0){document.write("<li>Không c? bài vi?t liên quan</li>")}else{while(b<titles.length&&b<20&&b<maxresults){document.write('<li><a href="'+urls[c]+'" title="'+time[c].substring(8,10)+"/"+time[c].substring(5,7)+"/"+time[c].substring(0,4)+'">'+titles[c]+"</a></li>");if(c<titles.length-1){c++}else{c=0}b++}}document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length)};
//]]>
</script>
</b:if>

الخطوت الثالتة : نبحث كدلك على هدا الوسم <data:post.body/> ستجد منه إثنين أو ثلاتة إختر الأول وضع أسفله الكود التالي

كود:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=9;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div style='margin-bottom:5px;clear:both'/>
<img border='0' src='http://2.bp.blogspot.com/-Y3adlpBwqDQ/Twx31TM0XvI/AAAAAAAACoQ/kh3cR7fgE0Y/s1600/t0esqo7n.jpg'/>
<div class='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</div>
<div class='clear'/></b:if>

ملاحظة : يمكنك تغيير الرقم var maxresults=6، وهو يدل على عدد المواضيع ذات الصلة التي سيتم عرضها. بغير الصورة
وكدلك الرقم var maxresults=9 وهو يدل على عدد المواضيع التي تظهر مع الصورة

ads

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