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>
    

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

add_commentإرسال تعليق

  1. السلام عليكم أخى اريد منك الاكواد الخاصه بشكل التعليقات الخاصه بدونتك بلوجر كود وشكرا :)
    اتمنى الاجابه فى اسرع وقت مممممممممممممكن.

    ردحذف
    الردود
    1. تستطيع أخذها من مصدر الصفحة

      حذف
    2. ماهي الاكواد؟؟

      حذف
    3. الاكواد التي ترسلها لا تظهر / حاول ان تستعمل صندوق اضافة كود / مثلا انظر الكود التالي كيف يظهر
      ===css===
      h1 br, h2 br, h3 br, h4 br, h5 br, h6 br, h7 br{ }

      ===html===
      <div class='clear'/>

      ===js===
      var $ = jQuery.noConflict();
      $(document).ready(function(){}); // End $(document).ready(function(){

      حذف
    4. رابط جوجل درايف الذي ارسلته لي ليس رابط قابل للمشاركة وانما هو خاص لايمكن مشاهدته سوى أنت يجب عليك ان تضغط على الملف باليمين ثم تختار الخيار (الحصول على الرابط القابل للمشاركة)

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

      حذف
    6. لقد اطلعت على الرابط الجديد المرسل ولاحظت انه يحتوي على أكواد التضمين includable ليكن في العلم يااخي انني حتى لورغبت في ارسالها لك صدقني لن تفهم شيئا ولن تستطيع تركيبها بدون شرح مفصل لأنها مدمجة مع تعليقات الفيسبوك وديسكس أضف الى ذلك ثلاث ادوات html لكل صندوق تعليقات والاصعب من ذلك اكواد جافاسكريبت المدمجة فلك ان تتخيل ذلك ...مع العلم ان نظام التعليقات المدمج في مدونة بلوجر كود يعتبر اخر وافضل اداة لا تجدها سوى عند اقوى المصممين ولايعطونه لك بسهولة .. لكني منذ مدة احاول ان أشرح طريقة تركيبه لكن بعد الانتهاء من برنامجي الحالي ..فسامحونا على هذه السياسة المتبعة

      حذف
    7. حسنا اخى طلب اخير اريدك ان ترى هذا الكود وان كان به اخطائ فرجائاً اصلحه لى
      function zerClose(){
      document.getElementById("zer-cog").style.display = "block";
      document.getElementById("zer-close-switcher").style.display = "none";
      document.getElementById("options-template").style.right = "-226px";
      }
      function zerOpen(){
      document.getElementById("zer-close-switcher").style.display = "block";
      document.getElementById("zer-cog").style.display = "none";
      document.getElementById("options-template").style.right = "0";
      }

      حذف
    8. الكود يعمل لكنه خاطأ في التسيق ...على حسب ما ارى من خلال مضمونه أظن انه نافذة جانبية تغلق وتفتح بإستعمال زر لكن الزر مكرر مرتين
      نستطيع استعمال ذلك بالطريقة التالية..
      1- كود js يكون
      ركز جيدا..ستلاحظ اننا استغينا عن الزر الثاني zer-close-switcher واستعملنا فقط الزر zer-cog كما انك تستطيع تغيير ايقونات الزر عند الفتح والاغلاق

      $("#zer-cog").click(function() {
      var pos = $('#options-template').offset().left;
      var ico = $('#zer-cog i');
      if (pos == -200) {
      $("#options-template").animate( {"left": "0px"}, "slow"),
      $(this).animate( {"left": "195px"}, "slow");
      ico.removeClass("icon-chevron-right");
      ico.addClass("icon-chevron-left");
      } else {
      $("#options-template").animate( {"left": "-200px"}, "slow"),
      $(this).animate( {"left": "0px"}, "slow");
      ico.removeClass("icon-chevron-left");
      ico.addClass("icon-chevron-right");
      }
      });


      2- كود html يكون
      <!-- صندوق الاداة -->
      <div id="options-template">
      هنا محتوى الصندوق
      </div>
      <!-- زر الفتح والإغلاق -->
      <div id="zer-cog"><i class="icon-chevron-right"></i></div>


      3- كود css يكون
      #options-template {
      position: fixed;
      top: 0%;
      left: -200px;
      width: 200px;
      line-height: 2rem;
      background: #3a3a4f;
      -webkit-border-bottom-right-radius: 10px;
      -moz-border-radius-bottomright: 10px;
      border-bottom-right-radius: 10px;
      box-shadow: 1px 1px 3px #3a3a4f;
      z-index: 2;
      }
      #zer-cog {
      width: 40px;
      height: 3rem;
      -webkit-border-bottom-right-radius: 8px;
      -moz-border-radius-bottomright: 8px;
      border-bottom-right-radius: 8px;
      -webkit-border-top-right-radius: 8px;
      -moz-border-radius-topright: 8px;
      border-top-right-radius: 8px;
      position: absolute;
      left: 0;
      top: 30px;
      background: #4f4f6d;
      color: white;
      font-size: 1rem;
      line-height: 1rem;
      text-align: right;
      z-index: 1;
      }
      #zer-cog i {
      position: relative;
      top: 1rem;
      right: 10px;
      }




      حذف
    9. اخى السلايد فى هذا الموضوع عند وضع الاكواد لا يظهر
      انظر لقد وضعت اكواد الدرس الاول كذلك ولكن عندما احذف كود ال css الخاص بل owl-carousel فى الدرس الاول السلايد يظهر ولكن افقى وليس عمودى وغير متحرك
      https://selsalv-1.blogspot.com/

      حذف
    10. يوجد عندك خطأ في المعرف الخاص بإستدعاء المكون الإضافي لاحظ في كود الجافاس سكريبت ستجد الوسم التالي
      a('.owl-carousel1.owl-carousel').owlCarousel({
      قم بإستبداله بهذا المعرف فقط
      a('.owl-carousel').owlCarousel({
      لاحظ الفرق

      حذف
    11. شكرا لك ي بطل بالتوفيق

      حذف
    12. اخى من فضلك اذا قمت بالدخول للقالب سوف تجد الموضوع الاول فى السلايدر بدون صورة ولكن الستايل الخاص به مختلف عن البقيه الصورة نزلة لتحت عايز اسويها زى التنين لو تقدر تعملهالى T_T

      حذف
    13. قم بالبحث في قالبك عن هذا المعرف ستجده بهذا الشكل .featured-slider .post-sl .post-media img
      .featured-slider .post-sl .post-media img {
      width: 100%;
      height: 320px;
      object-fit: cover;
      display: block;
      }

      قم الان بإستبداله بالكود التالي...

      .featured-slider .post-sl .post-media img {
      width: 100%;
      height: 320px !important;
      object-fit: cover;
      display: block;
      }

      الفرق في عرض محتوى السلايد height: 320px; سنضيف له علامة الاولوية !important لان صور في قالب يمنع ذلك لذلك عليك دائما استخدام علامة الاولوية !important الى الاكواد css التي هي موجودة بنفس الوسم او المعرف

      حذف
    14. شكرا لك , يعنى كان الفرق هو كلمة واحده :rolled:
      مارائيك فى بنية القالب ؟

      حذف
  2. تم التركيب بنجاح السلايد رائع جدا

    سلمت يداك

    عندي سؤال هل يمكن تركيب السلايد بدون الرجوع للدرس الاول / بدون اكواد الدرس الاول /
    لانه في الدرس الاول لم افهم بعض الامور

    ردحذف
    الردود
    1. تركيب هذا السلايدر لا يحتاج لأكواد الدرس الاول لكن نحن نطالب بمراجعته من باب المرونة وفهم المكون الإضافي بعيدا عن عادة النسخ واللصق
      وطبعا أخي هذا راجع لك في حال اردت توسعة المدارك

      حذف
    2. كما انه يجب ان تعلم ان السلايدر صحيح انه سيظهر لكن بدون انزلاق اقصد انه لن يكون متحرك الا اذا راجعت الدرس الاول
      قم بالمعاينة من جديد لتفهم قصدي

      حذف