إضافة تدوينات ذات صلة بشكل أنيق وجداب 2016

;

السلام عليكم ورحمة الله تعالى وبركاته 

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

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

1. قم بأخذ نسخة إحتياطية للقالب قبل أى تعديل
2. إضغط على تحرير HTML

3-إبحث عن ]]></b:skin> وضع الكود التالى قبلة مباشرة 

 /* hadystore Thumbnail Related Posts With ToolTips --- */
        .related-post .post-thumbnail {
         z-index: 1;
         position: relative;
         width: 98px;
         height: 98px;
         margin: 0;
         display: block;
         border-right: 1px solid #fff;
         border-bottom: 1px solid #fff;
         -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
         border-radius: 5px;
         -webkit-box-shadow: inset 2px 2px 5px #444;
         -moz-box-shadow: inset 2px 2px 5px #444;
         box-shadow: inset 2px 2px 5px #555;
        }
        .related-post {
         float: left;
         position: relative;
         width: 98px;
         height: 98px;
         margin: 0 10px 10px 0;
         background: #F6F6F6;
         -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
         border-radius: 5px;
         }
        .related-post .related-post-title {
         display: none;
         float: left;
         background: #000;
         color: #fff;
         text-shadow: none;
         font-weight: bold;
         padding: 10px;
         position: absolute;
         top: -20px;
         left: 40px;
         z-index: 2;
         width: 200px;
         -webkit-box-shadow: 0 0 2px #444;
         -moz-box-shadow: 0 0 2px #444;
         box-shadow: 0 0 2px #444;
        }
        .related-post:hover .related-post-title {display: block;}

 

ثم نبحث عن سطر واحد فقط من الأسطر الآتية هذة مختلفة من قالب لآخر

<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>

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

 

<div id='related-posts'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>//<![CDATA[
    var ry='<h3>مواضيع ذات  صلة</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;لا توجد  تدوينات</h3>';rcomment='comments';rdisable='disable  comments';commentYN='no';
    var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new  Array();thumb=new Array();commentsNum=new Array();comments=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('thr$total' in  d){commentsNum[titlesNum]=d.thr$total.$t+'  '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail'  in  d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6xPWbSTEX7TYPaT_-V-1txoI6FfhpxoBDuKyc6SFLDm2DWCmPqonNBqZiSpp0daYgq7QC_sho7uXmdDLK3P5CjNVnNT_1_sH4yTFI1gKJJt0GZyIfbdbALAUE08SnIKlIN6XcfHXK3p7g/'};titlesNum++;break}}}}function  removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new  Array(0);f=new Array(0);g=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]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function  contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return  true}}return false}function printRelatedLabels(a){var  y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var  b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var  c=Math.floor((titles.length-1)*Math.random());var  b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div  class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]='  - '+commentsNum[c]}else{comments[c]=''};dw+='<div  class="related-post"><div  class="related-post-title">'+titles[c]+'</div><a  href="'+urls[c]+'" rel="nofollow"><img border="0"  class="post-thumbnail" alt="'+titles[c]+'"  src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
    //]]></script>
    <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(&#39;<data:post.url/>');</script>
    </b:if>
    </div>
    <div class='clear'/> 

 

نغير الرقم  6 إلى عدد المواضيع المراد إظهارها.

مبرووك عليك الإضافة

 

هل أعجبك الموضوع؟ ضع بصمتك وشاركه مع أصدقائك

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →