مواضيع ذات صلة على شكل سلايدر



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


 نقدم لكم في هذه التدوينة اداة عرض مواضيع ذات صلة أسفل
التدوينات على شكل سلايدر


طريقة التركيب:

    1. توجه الى القالب ثم تحرير html
    2. ضع الكود التالي اسفل post-footer-line post-footer-line-1
    3. ان لم تجده ضع الكود أسفل صندوق تعريف الكاتب
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related'>
<h2>
مواضيع ذات صلة
</h2>
<div id='related-posts'>
             <b:loop values='data:post.labels' var='label'>
                          <b:if cond='data:label.isLast != &quot;true&quot;'>
                          </b:if>
                          <b:if cond='data:blog.pageType == &quot;item&quot;'>
                            <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=5&quot;' type='text/javascript'/>
                          </b:if>
             </b:loop>
                        <script type='text/javascript'>
                          var currentposturl=&quot;<data:post.url/>&quot;
                          var maxresults=15;
                          var relatedpoststitle=&quot;&quot;;
                          removeRelatedDuplicates_thumbs();
                          printRelatedLabels_thumbs();
                        </script>
  </div>
</div>
</b:if>


      1. ابحث عن </head> وضع فوقه الكود التالي
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    .owl-carousel .owl-wrapper:after{content:&quot;.&quot;;display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel{display:none;position:relative;width:100%;-ms-touch-action:pan-y}.owl-carousel .owl-wrapper{display:none;position:relative;-webkit-transform:translate3d(0px,0px,0px)}.owl-carousel .owl-wrapper-outer{overflow:hidden;position:relative;width:100%}.owl-controls .owl-page,.owl-controls .owl-buttons div{cursor:pointer}.owl-controls{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:absolute;top:15px;left:15px}.grabbing,.grabbing a,.grabbing *{cursor:e-resize!important}.owl-carousel .owl-wrapper,.owl-carousel .owl-item{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-prev,.owl-next{width:28px;height:22px;background-color:transparent;text-align:center;line-height:22px;font-size:12px;margin-top:5px;color:#fff;text-shadow:0 0 6px rgba(0,0,0,.3);display:inline-block}.owl-next:before{font-family:fontawesome}.owl-prev:before{font-family:fontawesome}.owl-carousel .owl-item{float:right}.owl-next:before{content:&quot;\f053&quot;;font-family:fontawesome;font-size:25px;background:transparent}.owl-prev:before{content:&quot;\f054&quot;;font-family:fontawesome;font-size:25px;background:transparent}.related{border-bottom:1px solid #ecf0f1}.related h2{border-bottom:1px solid #ecf0f1;border-top:1px solid #ecf0f1;font-size:17px;font-family:dev-techno,&quot;Droid Arabic Naskh&quot;,tahoma;tex-align:right;background:#ecf0f1;color:#777;height:40px;line-height:40px;;text-indent:10px}#related-posts{border-top:1px solid #ecf0f1;display:block;width:auto;margin:auto;position:relative;padding:5px;height:200px}#related-posts ul{list-style-type:none}.related-thumb{display:block;height:200px;position:reltive}.related-thumb img{width:100%;height:100%}.related-title-thumb{transition: all .5s ease-in-out; position: absolute; top: 50%; right: 15%; width: 100%; color: #303030; height: auto; font-size: 14px; width: 70%; text-align: center; margin: 0 0; font-weight: lighter; line-height: 27px; padding: 7px 5px; background: #ffffffde;}.related-title-thumb:hover{padding-bottom:15px}
    .owl-carousel{display:none;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y}.owl-carousel .owl-stage:after{content:&quot;.&quot;;display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0px,0px,0px)}.owl-carousel .owl-controls .owl-nav .owl-prev,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .owl-dot{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loaded{display:block}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel .owl-refresh .owl-item{display:none}.owl-carousel .owl-item{position:relative;min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-item img{display:block;width:100%;-webkit-transform-style:preserve-3d}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}
    </style>
    <script type='text/javascript'>
    //<![CDATA[
    var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();
    function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]= d.replace(/\/s[0-9]+(\-c)?/,"/s540");}else thumburl[relatedTitlesNum]='https://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s640/picture_not_available.png'}if(relatedTitles[relatedTitlesNum].length>55)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,55)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum] = entry.link[k].href;relatedTitlesNum++}}}}
    function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}
    function printRelatedLabels_thumbs(){document.write('<ul>');
    for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){
    relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());
    var i=0;if(relatedTitles.length>0)while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li class="related-thumb"><a ');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img src="'+thumburl[r]+'" alt="'+relatedTitles[r]+'"/><br/><div class="related-title-thumb">'+relatedTitles[r]+'</div></a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length);document.write('</ul>');}
    //]]>
    </script>




      1. ابحث عن </body> وضع فوقه الكود التالي
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
    $('#related-posts ul').owlCarousel({
    rtl:true,
    loop:true,
    margin:1,
    navText:["",""],
    nav:true,
    autoplay:true,
    autoplayHoverPause:true,
    navSpeed:400,
    responsive:{0:{items:1},
    480:{items:2},1024:{items:3}}
    });
    //]]>
    </script>
    </b:if>


      1. اذا واجهت اي مشكلة ضعها بتعليق




    ليست هناك تعليقات:

    إرسال تعليق