حصرياتالمزيد

الجمعة، 16 فبراير 2018

احصل على هذة الاداة من هنا

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



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


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


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

    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. اذا واجهت اي مشكلة ضعها بتعليق





    EmoticonEmoticon