5/22/2018

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

ماهي الإضافة التي سنقوم بتركيبها؟

بالنسبة للإضافة سلايدر ديناميكي هي نفس فكرة مستعرض مواضيع رئيسي إلا أنها أكثر تخصيص من حيث محتوى العرض إذ يتيح لك السكريبت :
  1. مزايا مستعرض Dynamic Slider
  2. عرض آخر المشاركات Recent post
  3. عرض مواضيع عشوائية Random post
  4. عرض مشاركة العلامة [مواضيع حسب قسم معين] Label post
  5. التحكم في عدد المواضيع المراد عرضها 
  6. تحكم كامل من صفحة التخطيط
  7. عرض كماليات محتوى التدوينة [الكاتب],[التاريخ],[التسمية],[].
  8. متوفر بشكلين رائعين
أضف أن السكريبت مطور وبدون تشفير كعادتنا في الغالب وذلك حتى نسمح للأخوة المطورين التعديل والتحسين فيه ومراجعة ما غفلنا عنه ..وفي المقابل لانريد شيء سوى عدم إحتكار الفائدة و تدفق تبادل المعلومات بين المدونين وبغض النظر عن مميزاته سنزيد في روعته حين نطبق عليه خاصية  الإنزلاق أو التمرير الدائري بإستخدام مكتبة OwlCarousel-js لتبدو الإضافة أكثر إحترافية  ... فتابع معي الدرس.





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

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

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

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

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

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

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

  • 
    /*=====================================
    = Dynamic Slider css
    =====================================*/
    /* ============= DynamicSlider ============= */
    .recent-slider{position:relative;overflow:hidden;margin:5px;background:#fff;border:3px solid #fff;}
    .recent-slider .slidep-img{vertical-align:middle;object-fit:cover;display:block;background-size:cover;width:100%;height:350px;}
    .recent-slider .slider-bottom{position:absolute;top:0;right:0;width:100%;height:100%;padding:15px;z-index:2;}
    .recent-slider:hover .slider-bottom{pointer-events:none;}
    .recent-slider .slider-bottom .slider-title a{color:#fff;line-height:normal;font-size:14px;font-weight:700;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;display:block;}
    .recent-slider:hover .slider-title a.slider-titlea{overflow:visible;text-overflow:inherit;white-space:normal;color:#f79029;}
    .recent-slider .date,.recent-slider a.postAuthor{margin:0 3px;padding:0 5px;font-size:11px;color:#FFFFFE;border-left:1px solid #f79029;display:inline-block;float:right;}
    .recent-slider .slider-title,.recent-slider .slider-tag{pointer-events:auto!important;display:block;position:relative;overflow:hidden;margin-bottom:5px;clear:both;}
    .recent-slider .slider-bottom .ssummary{font-size:13px;color:#ffffff;background:rgba(0,0,0,0.17);padding:5px;margin:10px 0;}
    .recent-slider .slider-bottom .tagslider{width:auto;background:#FFFFFF;padding:1px 15px;text-decoration:none;font-size:13px;color:#757575;display:inline-block;float:left;}
    .recent-slider .slider-bottom .tagslider:hover{background:#f79029;color:#FFFFFF;}
    .DySliderstyle-material .webponto-post .slider-thumb a:before{content:'';width:100%;height:100%;position:absolute;right:0;top:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.77)";filter:alpha(opacity=0.77);opacity:.77;}
    .webponto-post .slider-thumb a:before{z-index:1;}
    .slider-faq{position:relative;display:block;overflow:hidden;}
    .DySliderstyle-material .webponto-post .owl-item:nth-child(5n+1) .slider-thumb a:before{background:rgba(19,106,138,0.67);background:-webkit-linear-gradient( right,#267871,#136a8a);background:linear-gradient(to right,#267871,#136a8a);}
    .DySliderstyle-material .webponto-post .owl-item:nth-child(5n+2) .slider-thumb a:before{background:#4776E6;background:-webkit-linear-gradient(right,#8E54E9,#4776E6);background:linear-gradient(to right,#8E54E9,#4776E6);}
    .DySliderstyle-material .webponto-post .owl-item:nth-child(5n+3) .slider-thumb a:before{background:#FF8008;background:-webkit-linear-gradient(right,#FFC837,#FF8008);background:linear-gradient(to right,#FFC837,#FF8008);}
    .DySliderstyle-material .webponto-post .owl-item:nth-child(5n+4) .slider-thumb a:before{background:#1D976C;background:-webkit-linear-gradient(right,#93F9B9,#1D976C);background:linear-gradient(to right,#93F9B9,#1D976C);}
    .DySliderstyle-material .webponto-post .owl-item:nth-child(5n+5) .slider-thumb a:before{background:#ee0979;background:-webkit-linear-gradient(right,#ff6a00,#ee0979);background:linear-gradient(to right,#ff6a00,#ee0979);}
    #DynamicSlider{position:relative;overflow:hidden;margin:1em;padding:.1em;box-shadow:0 0 5px 0 rgba(0,0,0,0.294);background-color:#f3f3f3;}
    #DynamicSlider .pigment{height:50px;position:relative;background:#fff;margin:0;padding:0;}
    #DynamicSlider .pigment h2{position:relative;height:50px;line-height:50px;display:inline-block;padding:0 15px;color:#a0a0a0;font-size:15px;font-weight:700;margin:0;z-index:1;}
    .DySliderstyle-material .pigment h2:after{content:'';top:0;right:0;width:100%;height:100%;position:absolute;background-color:#f3f3f3;z-index:-1;transform:rotate(0deg) scale(-1.3) skew(-16deg) translate(0px);-webkit-transform:rotate(0deg) scale(-1.3) skew(-16deg) translate(0px);-moz-transform:rotate(0deg) scale(-1.3) skew(-16deg) translate(0px);-o-transform:rotate(0deg) scale(-1.3) skew(-16deg) translate(0px);-ms-transform:rotate(0deg) scale(-1.3) skew(-16deg) translate(0px);}
    #DynamicSlider .morree{float:left;display:inline-block;text-align:center;}
    #DynamicSlider .morree a{background-color:#f2f2f2;padding:10px 16px;margin:5px;font-size:11px;font-weight:700;color:#a9a9a9;display:inline-block;text-decoration:none;}
    #DynamicSlider .morree i{color:#f79029;padding-right:5px;font-size:12px;}
    /* ============= DynamicSlider style-flat============= */
    .DySliderstyle-flat .webponto-post li .slider-thumb a:before{content:no-close-quote;position:absolute;right:0;bottom:0;width:100%;height:230px;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE5MjMyZCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxOTIzMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+) repeat-x;}
    .DySliderstyle-flat .recent-slider .slider-bottom .tagslider{background:#f79029;color:#ffffff;}
    .DySliderstyle-flat .pigment{text-align:center;}
    .DySliderstyle-flat .pigment h2::before{margin-right:.5em;right:100%;}
    .DySliderstyle-flat .pigment h2::after{margin-left:.5em;left:100%;}
    .DySliderstyle-flat .pigment h2::after,.DySliderstyle-flat .pigment h2::before{content:"";position:absolute;display:block;top:50%;width:100px;border-top-color:#f79029;border-top-width:3px;border-top-style:solid;}
    .DySliderstyle-flat .pigment h2{margin-right:120px!important;}
    .DySliderstyle-flat .morree a:hover{background-color:#f79029!important;color:#FFFFFF!important;}
    .DySliderstyle-flat .morree a:hover i{color:#FFFFFF!important;}
    .DySliderstyle-flat .recent-slider .slider-bottom .tagslider:hover{background:#FFFFFF;color:#757575;}
    /*-----Page Responsive-----*/
    @media screen and (max-width:640px){.recent-slider .slidep-img{height:300px;}#DynamicSlider .pigment h2{padding:0 5px;font-size:14px;margin:0!important;}.DySliderstyle-flat .pigment h2::after,.DySliderstyle-flat .pigment h2::before{width:20px;}}
    /*Microsoft lumia550*/
    /*-----box-shadow---------*/
    .DySliderstyle-material,.DySliderstyle-material .recent-slider,.DySliderstyle-material  .morree a:hover{-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,0.294);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,0.294);-ms-box-shadow:0 0 5px 0 rgba(0,0,0,0.294);-o-box-shadow:0 0 5px 0 rgba(0,0,0,0.294);box-shadow:0 0 5px 0 rgba(0,0,0,0.294);}
    /*-----border-radius---------*/
    .DySliderstyle-material .tagslider,.DySliderstyle-material .morree a{border-radius:30px;-o-border-radius:30px;-ms-border-radius:30px;-moz-border-radius:30px;-webkit-border-radius:30px;}
    /*-----translateY(300px)---------*/
    .recent-slider:hover .slider-faq{-webkit-transform:translateY(300px);-moz-transform:translateY(300px);-o-transform:translateY(300px);-ms-transform:translateY(300px);transform:translateY(300px);}
    /*-----translateY(0)---------*/
    #DynamicSlider:hover .owl-buttons div .fa{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);}
    /*-----translateY(-50%)-------*/
    #DynamicSlider .owl-buttons div{-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);}
    /*-----transform-X--(-300px)---------*/
    #DynamicSlider i.fa.fa-angle-left{-webkit-transform:translateX(-300px);-moz-transform:translateX(-300px);-o-transform:translateX(-300px);-ms-transform:translateX(-300px);transform:translateX(-300px);}
    /*-----transform-X--(300px)---------*/
    #DynamicSlider i.fa.fa-angle-right{-webkit-transform:translateX(300px);-moz-transform:translateX(300px);-o-transform:translateX(300px);-ms-transform:translateX(300px);transform:translateX(300px);}
    /*-----img--scale(1.2)-------*/
    .recent-slider:hover .slidep-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---------*/
    .traslider,#DynamicSlider .owl-buttons div .fa,.webponto-post .slider-thumb a:before{-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-ms-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;}
    /*-----opacity:0---------*/
    .recent-slider:hover .slider-thumb a:before{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;}
    
    

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

  • 
    <script type='text/javascript'>
    //<![CDATA[
    $("#DynamicSlider .widget").each(function(){
    var e=$(this),t=e.find(".widget-content").text(),l=t.split("/"),i=l[0],r=l[1],n=Math.floor(Math.random()*i+1);
    if(t.match("recentpost"))
    var o="/feeds/posts/default?alt=json-in-script&max-results="+i;
    else if(t.match("randompost"))
    var o="/feeds/posts/default?alt=json-in-script&orderby=updated&start-index="+n+"&max-results="+i;
    else var o="/feeds/posts/default/-/"+r+"?alt=json-in-script&max-results="+i;
    $.ajax({
    type:"GET",url:o,dataType:"jsonp",
    success:function(e){
    for(var t="<ul class='owl-DySlider owl-carousel webponto-post'>",l="",i=0;i<e.feed.entry.length;i++){
    for(var r=e.feed.entry[i],
    postAuthor=r.author[0].name.$t,
    uriauthor=r.author[0].uri.$t,
    date=r.published.$t.substring(0,10),
    n=r.title.$t,
    o=0;o<r.link.length;o++){
    if("replies"==r.link[o].rel&&"text/html"==r.link[o].type){r.link[o].title,r.link[o].href}if("alternate"==r.link[o].rel){
    var f=r.link[o].href;break}}
    var p,h=r.content.$t,u=$("<p>").html(h).text(),m=u.substring(0,180)+"...",
    v=r.category[0].term;
    try{p=0==i?r.media$thumbnail.url.replace("s72-c","w550-h420-c").replace("default","hqdefault"):r.media$thumbnail.url.replace("s72-c","w550-h420-c").replace("default","hqdefault")}catch(g){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),p=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"http://3.bp.blogspot.com/-qnLm52EsvBE/VDkrZ46TWXI/AAAAAAAAAsM/tiJ36WiboU4/s1600/90.jpg"}
    l+='<li class="recent-slider"><div class="slideto">',
    l+='<div class="slider-content">',
    l+='<div class="slider-thumb"><a href='+f+'><img class="slidep-img traslider" src="'+p+'" title="'+n+'" alt="'+n+'"/></a></div>',
    l+='<div class="slider-bottom">',
    l+='<div class="slider-tag"><a class="tagslider" href="/search/label/'+v+'">'+v+"</a></div>",
    l+='<div class="slider-title"><a class="slider-titlea" href='+f+">"+n+"</a></div>",
    l+='<div class="slider-faq traslider">',
    
    l+='<p class="ssummary">'+m+"</p>",           //| 
    //0==i&&(l+='<p class="ssummary">'+m+"</p>"), //| 
                                                  //|
    l+='<div class="date">'+date+"</div>", 
    l+='<a class="postAuthor" href='+uriauthor+' target="_blank" rel="nofollow">'+postAuthor+"</a>", 
    l+="</div>",
    l+="</div>",
    l+="</div></div></li>"}
    l+="</ul>",
    t+=l,
    $("#DynamicSlider .widget-content").html(t);
    /*==============*/
    //OwlCarousel-js
    /*==============*/
    $('.owl-DySlider.owl-carousel').owlCarousel({
                      autoPlay: true,
                      stopOnHover:true, //mouse hover Stop
                      slideSpeed: 800,
                      autoplayTimeout: 5000,
                      navigation: true,
                      pagination: false,
                      items: 4,
                      loop:true,
                      touchDrag : false,
                      mouseDrag : false,
                      itemsCustom: [
                          [0, 1],
                          [640, 2],
                          [992, 2],
                          [1200, 2],
                          [1400, 2]
                      ],
                      navigationText: ['<i class="catch fa fa-angle-right"></i>','<i class="catch fa fa-angle-left"></i>'],
    });
    }})
    });
    //]]>
    </script>
    <script src='https://rawgit.com/Blogg-code/OwlCarousel/master/v1.3.3.js' type='text/javascript'/>
    
    

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

    شرح الكود
    المحدد بهذا اللون هو السكريبت المسؤول عن إخراج مواضيع السلايدر و محتوياته
    المحدد بهذا اللون كود ترتيب المعلمات لاتقم بحذفه لأنه يعمل فقط مع السلايدر وذلك بالنظر لــ owl-DySlider معرف المكون الإضافي .
    الرابط المحدد بهذا اللون في أخر الأكواد هو رابط المكتبة OwlCarousel-js   إذا سبق وأضفته في الدرس الأول لاداعي لتكرار وضعه في القالب

    warning
    تنويه!!..إذا أشكل عليك فهم هذه الجزئية من الموضوع عليك مراجعة الدرس الأول والتركيز في مرحلة تشغيل كود ترتيب المعلمات للمكتبة OwlCarousel أكثر من مرة . من هنا

  • قم الآن بإختيار المكان المناسب لوضع أداة السلايدر ثم ضع كود.html الشكل المناسب لك.
  • أداة الشكل الأول:

    
     <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <div class='DySliderstyle-material' id='DynamicSlider'>
    <b:section class='DynamicSlider-widget01' id='DynamicSlider-widget01' maxwidgets='1'>
      <b:widget id='HTML748' locked='true' title='الشكل الأول' type='HTML' version='1'>
        <b:widget-settings>
          <b:widget-setting name='content'>10/randompost</b:widget-setting>
        </b:widget-settings>
        <b:includable id='main'>
      <!-- script title btn more -->
                          <script>
    document.write(&#39;&lt;div class=&quot;pigment&quot;&gt;&lt;h2&gt;<data:title/>&lt;/h2&gt; &lt;div class=&quot;morree&quot;&gt;&lt;a href=&quot;/search/label/?max-results=4&quot;&gt;عرض الكل&lt;i class=&quot;fa fa-plus&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&#39;);
                          </script>
    <div class='widget-content'>
    <data:content/>
    </div>
    <b:include name='quickedit'/>
    </b:includable>
      </b:widget>
    </b:section>
    </div>
    </b:if> 
    

    أداة الشكل الثاني:

    
     <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <div class='DySliderstyle-flat' id='DynamicSlider'>
    <b:section class='DynamicSlider-widget02' id='DynamicSlider-widget02' maxwidgets='1'>
      <b:widget id='HTML749' locked='true' title='الشكل الثاني' type='HTML' version='1'>
        <b:widget-settings>
          <b:widget-setting name='content'>10/randompost</b:widget-setting>
        </b:widget-settings>
        <b:includable id='main'>
      <!-- script title btn more -->
                          <script>
    document.write(&#39;&lt;div class=&quot;pigment&quot;&gt;&lt;h2&gt;<data:title/>&lt;/h2&gt; &lt;div class=&quot;morree&quot;&gt;&lt;a href=&quot;/search/label/?max-results=4&quot;&gt;عرض الكل&lt;i class=&quot;fa fa-plus&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&#39;);
                          </script>
    <div class='widget-content'>
    <data:content/>
    </div>
    <b:include name='quickedit'/>
    </b:includable>
      </b:widget>
    </b:section>
    </div>
    </b:if> 
    

    شرح الكود
    المحدد بهذا اللون كود العلامة الشرطية يجعل الإضافة تظهر فقط في الصفحة الرئيسية إذا حذفته ستجعلها في كل الصفحات ظاهرة
    المحدد بهذا اللون سكريبت مسؤول عن إظهار العنوان الرئيسي للأداة وكذلك زر إظهار الكل + تستطيع حذفه بدون مشاكل
    ملاحظة مهمة
    الأكواد هي عبارة عن أداة HTMLjavascript ستقوم بإختيار كود واحد فقط للشكل الذي يناسبك ثم إختر المكان المناسب لوضعه مثلا أسفل القائمة الرئيسية أوفوق رسائل المدونة الإلكترونية في الغالب يكون الوسم الفاصل بين الجزئين أي حقل الهيدر وحقل البوست هو الوسم content-wrapper أو outer-wrapper بالعلم ان وضع الكود فوق الوسم يعني ظهور الأداة فوق صفحة التدوينة ووضعه أسفل الوسم يعني العكس..إذا واجهت صعوبة في تحديد المكان المناسب فباب التعليقات مفتوح للجميع.

  • قم الآن بالتوجه إلى >> صفحة التخطيط >> ستجد أداة جديدة قم بتحريرها كالتالي..



  1. تخصيص الإضافة 
  2. لعرض آخر المشاركات Recent post ضع العلامة 10/recentpost
  3. لعرض مواضيع عشوائية Random postضع العلامة 10/randompost
  4. لعرض مواضيع حسب قسم معينLabel postضع العلامة 10/التسمية وغير التسمية بالخاصة بك
  5. الرقم الموجود بعد العلامة 10/----- خاص بعدد المواضيع المراد عرضها غير الرقم10 بمايناسبك






add_commentإرسال تعليق

  1. جميل جدا ..
    بس عندي ما بصير افقي !!
    دايما عامودي

    ردحذف
    الردود
    1. مرحبا..بما أن الإضافة ظهرت بالشكل العمودي فأضن أن رابط مكتبة owlcarousel لايشتغل وذلك إحتمال وقوع تعارض في قالب مدونتك حاول أن تغير مكان رابط المكتبة الذي هو بهذا الشكل

      <script src='https://rawgit.com/Blogg-code/OwlCarousel/master/v1.3.3.js' type='text/javascript'/>

      او يمكنك وضع رابط مدونتك أو الصفحة التي يظهر بها المشكل ذلك حتى نستطيع مساعدتك .

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

      حذف
  2. السلام عليكم اخى رمضان كريم عليك انا جديد هنا وأعجبنى محتوى مدونتك جدا ولكنى أريد مساعده من فضلك
    1- أريد كود رسائل المدونة الجديد ولكنى اريد تكويدها او تلخيص المواضيع بعد وضعها بدون سكريبت.
    2- أريد مكتبة ال jQuery و ال fontAwesome و owlcarousel بدون تعارض وشكرا ارجو الاجابة فى أسرع وقت ممكن.

    ردحذف
    الردود
    1. مرحبا بك أخي عبدالله ورمضانك عزة وبركة
      1- السؤال الأول صدقني لم افهم قصدك *=p
      2- بالنسبة للمكتبات انظر تبويب الملحقات في الأداة الموجودة اسفل الموضوع مباشرة ستجد مكتبات jQuery المهمة و اصدارات fontAwesome اما بالنسبة لمكتبة owlcarousel فالتي قدمتها لكم في الموضوع تعتبر مجربة عند الكثرين ولايوجد بها مشاكل او انتقل للإصدار الاخير من خلال الصفحة الرسمية من هنا OwlCarousel2 v2.3.4

      حذف
    2. اولا اسمى ابو هلال وليس عبدالله :rolled:
      بالنسبة للسؤال الاول اريد الكود المسؤل عن اظهار المواضيع واريد تلخيص تلك المواضيع بدون اى سكريبتات

      حذف
    3. المهم كلنا عباد الله ^_^
      إذا كنت تقصد توليد الرسائل مختصرة في الصفحة الرئيسية بدون سكريبت فهذا يعني اكواد html خالصة ومعها اكواد العلامة الشرطية
      يمكنك مراجعة موضوع العلامة الشرطية - من هنا

      الكود المسؤول عن إظهار المواضيع في الصفحة الرئيسية هو كالتالي
      <div class='overlay-post-body'>
      <div class='overlay-titel'>
      <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
      </div>
      <div class='post-img'>
      <a class='recent-work-link' expr:href='data:post.url' target='_blank'>
      <b:if cond='data:post.thumbnailUrl'>
      <img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
      <b:else/>
      <b:if cond='data:post.firstImageUrl'>
      <img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
      <b:else/>
      <img expr:alt='data:post.title' expr:title='data:post.title' src='https://4.bp.blogspot.com/-BTRrD3oU3Ws/WXzxrMe9x9I/AAAAAAAAA3o/HISt73WdStEmqLjWhOew-Xw1IrQs1t9EQCLcBGAs/s1600/no-image-thumb.png'/>
      </b:if>
      </b:if>
      </a>
      </div>
      </div>


      حذف
    4. يا اخي الكريم الكود المسؤول عن توليد الرسائل تجده في القالب بهذا الإسم <data:post.body/> بالعلم انه مكرر
      ولكي تقوم بإختصار التدوينة بدون سكريبت تستطيع فعل ذلك من داخل تحرير الرسالة عبر الضغط على أيقونة ادراج رابط انتقال.. وإذا اردت إضافة خاصية "إقرأ المزيد"وتلخيص التدوينات بدون سكريبت استعمل الكود السابق

      حذف
    5. انا اريد الصندوق نفسه

      حذف