5/19/2018

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

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





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

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

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

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

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

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

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

  • 
    /*=====================================
    = related post
    =====================================*/
    #related-article{width:100%;font-size:16px;display:block;margin:auto;text-align:center;overflow:hidden;position:relative;margin-bottom:8px;}
    #related-article h4{font-size:15px;margin:0;padding:10px 20px;font-weight:700;text-align:center;position:static;display:inline-block;z-index:2;color:#d8d8d8;float:right;background-color:#4a4a4a;}
    #related-article h4:before{margin:0 5px;content:"";position:relative;width:10px;height:10px;background:#f79029;display:inline-block;}
    #related-article h5{font-size:14px;font-weight:700;margin:10px 0;padding:10px;color:#f79029;border-bottom:4px double #f79029;}
    #related-article h5:before{content:"";position:relative;width:10px;height:10px;background:#f79029;display:block;margin:10px auto;}
    #related-article ul{padding:0;margin:0;}
    #related-article ul li{list-style:none;display:block;float:right;margin:0;padding:0;text-align:center;position:relative;overflow:hidden;}
    #related-article .re-post-Collection-de-mo{text-align:center;padding:40px 20px;margin:0;display:block;position:absolute;top:0;bottom:0;right:0;left:0;width:100%;z-index:4;}
    #related-article a.related-title{text-align:center;padding:5px;margin:0;color:#FFFFFF;font-size:12px;display:block;position:relative;}
    #related-article ul li:hover a.related-title{color:#ffffff;}
    #related-article img{width:100%;height:200px;float:right;}
    #related-article ul li .all-over-rel-cont{overflow:hidden;position:relative;margin:0 0 0 5px;}
    #related-article ul li:last-child .all-over-rel-cont{margin-left:0;}
    #related-article .comments-Num{position:absolute;top:0;left:0;z-index:5;margin:10px;color:#FFFFFE;}
    #related-article .ptn-popposts-more {background: #f79029;color: #fff;font-size: 14px;padding: 2px 10px;line-height: normal;font-weight: 400;}
    #related-article .ptn-popposts-more:hover {background: #757575;}
    #related-article ul li .all-over-rel-cont .overlay-icon {content: "";display: block;position: absolute;width: 100%;height: 100%;top: 0;left: 0;background-color: rgba(0,0,0,0.7);z-index: 1;pointer-events: none;}
    /*======related-article owl-carousel======*/
    #related-article .owl-carousel .owl-controls .owl-buttons div{position:relative;}
    #related-article .owl-carousel .owl-controls .owl-buttons{position:absolute;top:0;right:0;z-index:9;width:auto;}
    #related-article .owl-carousel .owl-controls .owl-pagination{right:0;left:0;width:auto;bottom:0;background:none;border-radius:0;position:absolute;}
    /*========================================
    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;}
    /*-----translateY(300px)---------*/
    #related-article .re-post-Collection-de-mo {-webkit-transform: translateY(300px);-moz-transform: translateY(300px);-o-transform: translateY(300px);-ms-transform: translateY(300px);transform: translateY(300px);}
    /*-----translateY(0)---------*/
    #related-article li:hover .re-post-Collection-de-mo{-webkit-transform: translateY(0);-moz-transform: translateY(0);-ms-transform: translateY(0);-o-transform: translateY(0);transform: translateY(0);}
    /*-----img--scale(1.2)-------*/
    .all-over-rel-cont:hover .beex img {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-ms-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);}
    /*-----transition: all 0.5s---------*/
    #related-article img, #related-article .re-post-Collection-de-mo, .overlay-icon{-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 ]
    ========================================*/
    /*----0----*/
    #related-article .re-post-Collection-de-mo, #related-article ul li .all-over-rel-cont .overlay-icon {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0;}
    /*----1----*/
    #related-article li:hover .re-post-Collection-de-mo, #related-article ul li .all-over-rel-cont:hover .overlay-icon {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;}
    

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

  • 
    <!--  related article -->
    <script type='text/javascript'>
    //<![CDATA[
    //Related post
          var ry = "<h4>قد يهمك أيضاً</h4>";
          var rn = "<h5>ليست هناك أية مشاركة ذات صلة</h5>";
          rcomment = "<i class='fa fa-comment-o'></i>";
          rdisable = "<i class='fa fa-comment-o'></i>";
          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://3.bp.blogspot.com/-Jc__Qnmo0Ls/WrE56gnKytI/AAAAAAAACqI/dERZwqQ3vBQgH7WULIuSwOPgi5ZfHVUcACLcBGAs/s1600/alt.png";
                  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 += "<ul class='owl-carousel'>";
              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 += '<li class="related_gallery in-lefter"><div class="all-over-rel-cont"><span class="comments-Num">' + commentsNum[c] + '</span><div class="re-post-media"><div class="beex"><span class="overlay-icon"></span><img alt="' + titles[c] + '" src="' + thumb[c].replace(/\/s72\-c/, "/s" + size + "") + '"/></div></div><div class="re-post-Collection-de-mo"><div class="re-post-titel"><a class="related-title" href="' + urls[c] + '">' + titles[c] + '</a></div><div class="re-post-more-btn"><a class="waves-effect ptn-popposts-more" href="' + urls[c] + '">إقرأ المزيد</a></div></div></div></li>';
                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-article").innerHTML = dw
          };
          //]]>  
        </script>
          //]]>  
        </script>
    

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


  • قم بالبحث عن هذا الوسم <data:post.body/> أسفله أي بعده قم بوضع كود.html
  • ملاحظة مهمة
    ستجد الوسم <data:post.body/> الذي نبحث عنه مكرر أكثر من مرة المطلوب هو غالبا الثاني تجده داخل حقل البوست <b:includable id='post' var='post'> أو قم بالتجربة على الجميع حتى تظهر الأداة المطلوبة.. بالعلم ان وضع الكود فوق الوسم يعني ظهور الأداة فوق صفحة التدوينة ووضعه أسفل الوسم يعني العكس.

    
                      <!-- related article start -->
           <b:if cond='data:view.isPost'>
          <div id='related-article'>
               <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= 10;
                     var size = 350;
                     removeRelatedDuplicates();
                     printRelatedLabels(&#39;<data:post.url/>&#39;);
                  </script>
             </div>
           </b:if><!-- related article END -->
    

    شرح الكود
    الكود maxresults= 10المحدد بهذا اللون خاص بعدد المواضيع المراد عرضها 10 تعني عدد التدوينات
    الكود size = 350 المحدد بهذا اللون خاص بحجم دقة الصور أتركه كما هو .


add_commentإرسال تعليق

  1. اخى كود ال HTML الخاص بالسلايدر شو الذى عطيته لى عندما اضعه فى القالب يوقف عمل ال static sidebar والمشكلة تكمن فى هذا الكود
    <script type='text/javascript'>
    //<![CDATA[
    (function($) { $(document).ready(function(){
    $("#carousel .content").jCarouselLite({
    btnPrev: "#previous_button",
    btnNext: "#next_button"
    });
    })})(jQuery)
    //]]>
    </script>

    ولكن عندما احذفه من القالب تعمل اضافى ال static sidebar ولكن السلايد لا يعمل ؟
    ممكن حل وشكرا

    ردحذف
    الردود
    1. هذا الأمر معروف عند المصممين ويعرف بتعارض مكتابات jQuery ولابد ان تعرف كيف تعالج ذلك طبعا بالنظر لبنية القالب والكود المستعمل ..لذلك لايوجد شيء إسمه لايعمل *bang* جرب ان تضع هذا الكود وبإذن الله لن يقع التعارض
      <script type='text/javascript'>
      //<![CDATA[
      var $jCarouselLite = jQuery.noConflict();
      $jCarouselLite(document).ready(function(){
      $jCarouselLite("#carousel .content").jCarouselLite({
      btnPrev: "#previous_button",
      btnNext: "#next_button"
      });

      })
      //]]>
      </script>

      حذف
    2. انا الان اصمم قالب جديد هل اذا وضعت المكتابات التى فى الملحقات لن يقع اى تعارض ؟

      حذف
    3. المكتبات التي في تبويب الملحقات ستغنيك عن البقية لان اغلب الإضافات تعمل مع تلك التوليفة حتى شركة جوجل توصي بها كما انها لاتتعارض مع بعض ولاتسبب ثقل على القالب وانا استعملها شخصيا هذا من جهة ..ومن جهة اخرى لابد ان تفهم معنى تعارض المكتبات يا اخي الكريم يحدث ذلك عند استدعاء المكتبات من خلال إضافة او أداة لذلك يجب عنصر الحاوية يختلف أو نقوم بدمج الاكواد وهذا مانفعله في تصميم القوالب أي اننا مثلا ندمج سكريبت قائمة مع سكريبت ازرار او سلايدر ..الخ وكل ذلك في عنصر حاوية واحد مع الأخذ في عين الاعتبار المكان المناسب هناك من تعمل فقط داخل الوسم ... واخرى تعمل داخل .. ولايمكن خلطهما ..نصيحتي لك قبل ان تشرع في تصميم قالب يجب ان تبدء مع الاضافات والمشاريع الصغيرة ثم تنتقل الى المستوى الاكبر وهكذا حتى تكون ملم وفاهم ما تفعل ...اعذرني على الاطالة وبالتوفيييييييييق ^_^

      حذف