5/18/2018

settings_overscan print announcement
أهلا أصدقائي من جديد .. في موضوعنا هذا سنكمل مع  مكتبة OwlCarousel.js  المميزة ..ما سنقوم به هو تطبيق عملي لتركيب سلايدر شو تلقائي بإستخدام مكتبة OwlCarousel.js .
لكن قبل أن تكمل الموضوع فأنت مجبور على مراجعة التدوينة السابقة حول تثبيت المكتبة في القالب من هنا الدرس الأول // مكتبة OwlCarousel.js تتيح لك إنشاء شريط تمرير دائري رائع الاستجابة لأن هذه التدوينة تعتبر الحجر الأساس والمرجع لأي تدوينة ننشرها من هذا النوع ذلك لأننا لن نعيد شرح طريقة التثبيت لمكتبة OwlCarousel.js..ما سنقوم به هو فقط تركيب الإضافات التى نريد تطبيق عنصر الإنزلاق أو التمرير الدائري عليها.





قبل أن نشرع في الشرح دعونا نلقي نظرة على الإضافة التى سنقوم بتركيبها

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على تحرير  Edit HTML 
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية

  • قم بالبحث عن هذا الوسم ]]></b:skin> فوقه أي قبله قم بوضع كود.css التالي ..

  • 
    /*=====================================
    = Featured Slider
    =====================================*/
    #featuredSlider{float:none;margin:0;padding:0;width:100%;height:auto;position:relative;overflow:hidden;display:block;}
    #featuredSlider .container{overflow:hidden;}
    /*-----shah content------*/
    .featured-slider{list-style:none outside none;padding:0;margin:0;}
    /*----post-sl---*/
    .featured-slider .post-sl{position:relative;padding:0;overflow:hidden;margin:0;}
    .featured-slider .post-sl .post-media{position:relative;}
    .featured-slider .post-sl .post-media img{width:100%;height:320px;object-fit:cover;display:block;}
    .featured-slider .post-sl .post-media:after{content:"";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:rgba(0,0,0,0.7);z-index:9;}
    .featured-slider .post-sl .post-body{position:absolute;top:0;right:0;opacity:1;width:100%;padding:35px 20px;z-index:9;}
    .featured-slider .post-sl .post-body .post-title a{color:#fff;font-size:14px;position:relative;display:block;text-align:center;}
    .featured-slider .post-sl:hover .post-body .post-title a{text-align:right;}
    .featured-slider .post-sl .post-body .post-title a:hover{color:#f79029;}
    .featured-slider .post-sl .post-body .post-meta .post-date{color:#eee;font-size:11px;letter-spacing:0.03em;}
    .featured-slider .post-sl .post-body p.text-description{color:#FFFFFF;font-size:13px;font-weight:400;margin:5px 0;}
    .featured-slider .post-sl .post-Collection-de-mo a{position:absolute;}
    .featured-slider .ptn-popposts-more {background: #f79029;color: #fff;font-size: 14px;padding: 2px 10px;line-height: normal;font-weight: 400;}
    .featured-slider .ptn-popposts-more:hover {background: #757575;}
    /*--------label---------*/
    .featured-slider .post-sl span.pp-label{position:absolute;top:0;left:0;z-index:20;margin:5px 10px;}
    .featured-slider .post-sl span.pp-label a{display:block;color:#fff;background:#f79029;padding:4px 8px;font-size:11px;}
    .featured-slider .post-sl span.pp-label a:hover{background:#f79029;}
    /*-------post meta-------*/
    .featured-slider .post-sl .post-Collection-de-mo span.post-meta {border: 0;border-bottom: 4px double #f79029;padding: 5px 0;margin: 0;font-size: 12px;}
    .featured-slider .post-sl .post-Collection-de-mo span.post-meta span{display:inline-block;color:white;font-size:11px;margin:0 2px;}
    .featured-slider .post-sl .post-Collection-de-mo span.post-meta i{margin:0 0 0 5px;}
    /*========================================
    stat [ anim ]
    ========================================*/
    /*-----border-radius---------*/
    .waves-effect {border-radius: 3px;-o-border-radius: 3px;-ms-border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;}
    /*-----user-select---------*/
    .featured-slider{-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);}
    /*-----transition---opacity 600ms .3s---------*/
    .featured-slider .post-sl:hover .post-Collection-de-mo{-webkit-transition:opacity 600ms .3s;-moz-transition:opacity 600ms .3s;-o-transition:opacity 600ms .3s;transition:opacity 600ms .3s;}
    /*------transition---0.5---------*/
    *.featured-slider .post-sl .post-body, .featured-slider .post-sl .post-Collection-de-mo a{-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-ms-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;}
    /*-----transform-Y--(50%)---------*/
    .featured-slider .post-sl .post-body{-webkit-transform:translateY(50%);-moz-transform:translateY(50%);-ms-transform:translateY(50%);-o-transform:translateY(50%);transform:translateY(50%);}
    /*-----transform-Y--(-50%)---------*/
    .featured-slider.owl-carousel .owl-controls .owl-buttons div{-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);}
    /*-----transform-Y--(-300px)---------*/
    .featured-slider .post-sl .post-Collection-de-mo a {-webkit-transform:translateY(-300px);-moz-transform:translateY(-300px);-o-transform:translateY(-300px);-ms-transform:translateY(-300px);transform:translateY(-300px);}
    /*-----transform-X--(-300px)---------*/
    .featured-slider i.fa.fa-angle-left,.featured-slider .post-sl .post-Collection-de-mo a{-webkit-transform:translateX(-300px);-moz-transform:translateX(-300px);-o-transform:translateX(-300px);-ms-transform:translateX(-300px);transform:translateX(-300px);}
    /*-----transform-X--(300px)---------*/
    .featured-slider i.fa.fa-angle-right{-webkit-transform:translateX(300px);-moz-transform:translateX(300px);-o-transform:translateX(300px);-ms-transform:translateX(300px);transform:translateX(300px);}
    /*-----transform-Y--(0)---------*/
    .featured-slider:hover .owl-buttons div .fa,.featured-slider .post-sl:hover .post-body,.featured-slider .post-sl:hover .post-Collection-de-mo a{-webkit-transform: translateY(0);-moz-transform: translateY(0);-ms-transform: translateY(0);-o-transform: translateY(0);transform: translateY(0);}
    /*-----transition: all 0.5s---------*/
    .featured-slider:hover .owl-buttons div .fa{-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;}
    /*========================================
    stat [ opacity ]
    ========================================*/
    /*----1----*/
    .featured-slider .post-sl:hover .post-media:after, .featured-slider .post-sl:hover .post-Collection-de-mo{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);
    opacity:1;}
    /*----0----*/
    .featured-slider .post-sl .post-media:after, .post-Collection-de-mo{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);
    opacity:0;}
    

  • قم بالبحث عن هذا الوسم </head> فوقه أي قبله قم بوضع كود.js التالي ..

  • 
        <!-- featured Slider -->
    <script type='text/javascript'>
    //<![CDATA[
    //slider main
    imgr = new Array();
    imgr[0] = "https://3.bp.blogspot.com/-Jc__Qnmo0Ls/WrE56gnKytI/AAAAAAAACqI/dERZwqQ3vBQgH7WULIuSwOPgi5ZfHVUcACLcBGAs/s1600/alt.png";
    showRandomImg = true;
    aBold = true;
    summaryPost = 150;
    summaryTitle = 25;
    numposts  = 10;
    function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
    function showrecentposts(json) {
     j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
     img  = new Array();
        document.write('<ul class="owl-carousel featured-slider">')
     if (numposts <= json.feed.entry.length) {
      maxpost = numposts;
      }
     else
           {
        maxpost=json.feed.entry.length;
        }
       for (var i = 0; i < maxpost; i++) {
         var entry = json.feed.entry[i];
         var posttitle = entry.title.$t;
         var pcm;
         var posturl;
         var label;
         var cate = '';
         for (var e = 0; e < json.feed.entry[i].category.length; e++) {
                cate = cate + '<a href="/search/label/' + json.feed.entry[i].category[e].term + '?max-results=4">' + json.feed.entry[i].category[e].term + '</a>, ';
                label = '<a href="/search/label/' + json.feed.entry[i].category[e].term + '?max-results=4">' + json.feed.entry[i].category[e].term + '</a> '
              }
         if (i == json.feed.entry.length) break;
         for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'alternate') {
              posturl = entry.link[k].href;
              break;
            }
         }
      for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
              pcm = entry.link[k].title.split(" ")[0];
              break;
            }
         }
         if ("content" in entry) {
            var postcontent = entry.content.$t;}
         else
         if ("summary" in entry) {
            var postcontent = entry.summary.$t;}
         else var postcontent = "";
         postdate = entry.published.$t;
     if(j>imgr.length-1) j=0;
     img[i] = imgr[j];
     s = postcontent ; 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!="")) img[i] = d;
    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
     var month = [1,2,3,4,5,6,7,8,9,10,11,12];
     var month2 = ["جانفى", "فيفرى", "مارس", "أبريل", "ماى", "جوان", "جويلية", "أوت", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر"];
     var day = postdate.split("-")[2].substring(0,2);
     var m = postdate.split("-")[1];
     var y = postdate.split("-")[0];
     for(var u2=0;u2<month.length;u2++){
      if(parseInt(m)==month[u2]) {
       m = month2[u2] ; break;
      }
     }
              var daystr = day+ ' ' + m + ' ' + y ;
     var trtd = '<li class="post-sl"><span class="pp-label">'+label+'</span><div class="post-media"><img width="350" height="262" src="'+img[i]+'"/></div><div class="post-body"><div class="post-title"><a href="'+posturl+'">'+posttitle+'</a></div><div class="post-Collection-de-mo"><span class="post-meta"><span class="dd"><i class="fa fa-calendar-o"></i>'+day+'</span><span class="dm">'+m+'</span><span class="dy">'+y+'</span><span class="comm"><i class="fa fa-comment-o"></i>' + pcm + '</span></span><p class="text-description">'+removeHtmlTag(postcontent,summaryPost)+'... </p><a class="waves-effect ptn-popposts-more" href="'+posturl+'" class="readmore">إقرأ المزيد</a></div></div></li>';
     document.write(trtd);
     j++;
    }
        document.write('</ul>')
    };
          //]]>  
        </script>
    

    الكود هو السكريبت المسؤول عن إخراج المواضيع في السلايدر شو منها العناوين والتسمية والصور..الى غير ذلك لاحظ كيف قمنا بحقن المعرف owl-carousel في عنصر الحاوية ul الخاص بالسلايدر وذلك حتى يتصل بوظيفة المكوّن الإضافي OwlCarousel.js .

    شرح الكود
    الكود imgr[0] المحدد بهذا اللون يحتوي على رابط الصورة البديلة لموضوع لا يحتوى على صور
    الكود summaryPost المحدد بهذا اللون خاص بعدد أحرف الإقتباس 150 تعني عدد الأحرف
    الكود numposts المحدد بهذا اللون خاص بعدد المواضيع المراد عرضها 10 تعني عدد التدوينات

  •  الآن قم بإختيار المكان الذي تريد إظهار السلايدر ثم قم بوضع كود.js التالي ..

  • 
        <!-- featured Slider -->
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <div id='featuredSlider'>
    <div class='container'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script>
    </div> 
    </div>
    </b:if>
    

    ملاحظة جد مهمة
    الكود الخاص بالعلامة الشرطية و المحدد بهذا اللون يجعل السلايدر شو يظهر فقط في الصفحة الرئيسية في حالة أردت أن يظهر في جميع الصفحات قم بحذف الجزء المحدد.