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

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

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

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

 

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;لا توجد تدويناتavailable</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/AVvXsEiH_qXL1p50X1wgiGU5Eu7pxDaiepuezENUY1m9HOBqvfWXoBZ9Y7W-Z9WZjRZlH6CfiWVYPtfeRExUfTAFMuAOK6esf9cCHrWoVCj5fSloH4Xgxm_e5rwFMSKXhfJKPTWJqwNdL-C2fz9r/'};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/>&#39;);</script>
    </b:if>
    </div>
    <div class='clear'/>

التخصيص:

1. اللون         خاص بطول وعرض الإضافة 
2. اللون         خاص بعدد عرض التدوينات

تم بحمد الله تعالى