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 المحدد بهذا اللون خاص بحجم دقة الصور أتركه كما هو .