إضافة سلايدر شو بطريقة جديدة ورائعة

السلايدر شو

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

معاينة السلايدر شو

لقد إستخدمنا نفس السلايدر في قالب فيرا الذي نشرناه سابقا: 

معاينة القالب الحصول على القالب بالكامل

مميزات السلايدر شو

<b:section cond='not data:view.isError' id='slider-home-technomee' maxwidgets='1' showaddelement='no'>
    <b:widget id='HTML235' locked='true' title='سلايدر شو من تطوير technomee' type='HTML' version='2' visible='true'>
      <b:widget-settings>
        <b:widget-setting name='content'/>
      </b:widget-settings>
      <b:includable id='main'>
        <b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style='width:100%;display:flex;justify-content:center;'>
<div style='width:100%;max-width:1100px;'>
<div id='technomee--slider'/>
</div>
</div><script type='text/javascript'>
var imurl, modeposts = "<data:content/>",
    technomee-ounths = ["technomee", "يناير", "فبراير", "مارس", "ابريل", "ماي", "يونيو", "يوليوز", "غشت", "شتنبر", "اكتوبر", "نونبر", "دجنبر"];
   //<![CDATA[     
imurl = "recent" == modeposts ? "/feeds/posts/summary/?start-index=1&max-results=5&orderby=published&alt=json-in-script" : "/feeds/posts/summary/-/" + modeposts + "?start-index=1&max-results=5&orderby=published&alt=json-in-script", $.ajax({
    type: "get",
    url: imurl,
    dataType: "jsonp",
    success: function(s) {
        var a = s.feed.entry,
            e = s.feed.entry[0].author[0].name.$t,
            t = s.feed.entry[0].published.$t.substring(0, 10).split("-"),
            r = t[2] + " " + technomee-ounths[parseInt(t[1])] + " " + t[0];
        for (let s = 0; s < a.length; s++) {
            var n, p, l = a[s].link.length - 1,
                i = a[s].link[l].title,
                m = a[s].link[l].href;
            n = 1 == a[s].hasOwnProperty("media$thumbnail") ? a[s].media$thumbnail.url : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrzmRlGwWZHJojLNsfHcFwi60Z9MjImLElijTT9xw2RtD2pyBtpgTPUODRzRUkfi1knN2qo_t7RLF3Jsgq6O3JduHmY1vLI4GTnKoMGaWFzThfpNvSHoLZkJMlqnZdg1eHTh9a3-VNp8CF/s500/default.png", 0 == s ? (p = '<div class="auti"><span class="technomee- technomee--user-circle"></span><span>' + e + '</span><span class="technomee- technomee--clock"></span><span>' + r + "</span></div>", n = n.replace("s72-c", "s600")) : (p = "", n = n.replace("s72-c", "s300"));
            var h = '<div class="technomee-ps technomee-p' + (s + 1) + '"><a class="htumb" href="' + m + '"><img src="' + n + '" alt="' + i + '"></a><div class="technomee-info"><h3><a href="' + m + '">' + i + "</a></h3>" + p + "</div></div>";
            $("#technomee--slider").append(h)
}}});
//]]>
</script>
</b:if>
    </b:includable>
    </b:widget>
  </b:section>

/*-slider by btechnomee-blogspot-com-*/
#technomee--slider *{box-sizing:border-box;}
#technomee--slider{width:100%;height:auto;overflow:hidden;padding:10px;background-color:#fff;border-radius:5px;margin:5px 0;direction:rtl;transition:all 300ms;}
.htumb img{display:block;width:100%;height:100%;object-fit:cover;}
#technomee--slider .technomee-ps.technomee-p1{position:relative;width:55%;height:400px;left:auto;right:22.5%;float:right;padding:0 10px;}
#technomee--slider .technomee-ps.technomee-p2,#technomee--slider .technomee-ps.technomee-p4{right:-55%;padding-left:20px;left:auto;float:right;width:22.5%;}
#technomee--slider .technomee-ps.technomee-p3,#technomee--slider .technomee-ps.technomee-p5{padding-right:20px;width:22.5%;float:left;}
#technomee--slider .technomee-ps.technomee-p2,#technomee--slider .technomee-ps.technomee-p3{margin-bottom:10px;}
#technomee--slider .technomee-ps:not(.technomee-p1){height:200px;}
#technomee--slider .technomee-ps{overflow:hidden;position:relative;}
#technomee--slider .technomee-ps:not(.technomee-p1) .htumb{display:block;width:100%;height:140px;overflow:hidden;border-radius:5px;position:relative;border:solid 1px #ddd;}
#technomee--slider .technomee-ps:not(.technomee-p1) .htumb:before{position:absolute;display:inline-block;background:linear-gradient(0deg,#000000aa,transparent);content:"";top:0;left:0;width:100%;height:100%;opacity:0;transition:300ms;}
#technomee--slider .technomee-ps:not(.technomee-p1) .htumb:hover::before{opacity:1;}
#technomee--slider .technomee-ps.technomee-p1 .htumb{display:block;border-radius:5px;overflow:hidden;height:100%;width:100%;}
#technomee--slider .technomee-ps:not(.technomee-p1) .technomee-info h3{font-size:14px;margin:5px 0;font-weight:lighter;line-height:1.6;}
#technomee--slider .technomee-ps:not(.technomee-p1) .technomee-info h3 a{text-decoration:none;color:#000;transition:250ms;}
#technomee--slider .technomee-ps.technomee-p1 .technomee-info{position:relative;background:#ffffffee;min-height:100px;top:-110px;margin:0 35px;padding:15px 10px;text-align:center;box-shadow:0 0 8px #fff;border-radius:2px;}
#technomee--slider .technomee-ps.technomee-p1 .technomee-info h3{font-size:16px;font-weight:bold;line-height:1.7;margin:0;}
#technomee--slider .technomee-ps.technomee-p1 .technomee-info h3 a{color:#000;text-decoration:none;}
#technomee--slider .technomee-ps:not(.technomee-p1) .technomee-info h3 a:hover{color:#3f51b5;}
#technomee--slider .technomee-ps.technomee-p1 .auti .technomee--user-circle{display:inline-block;background:no-repeat center url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='far' data-icon='user-circle' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512' class='svg-inline--fa fa-user-circle fa-w-16 fa-2x'%3E%3Cpath fill='rgb(0,128,128)' d='M248 104c-53 0-96 43-96 96s43 96 96 96 96-43 96-96-43-96-96-96zm0 144c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm0-240C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-49.7 0-95.1-18.3-130.1-48.4 14.9-23 40.4-38.6 69.6-39.5 20.8 6.4 40.6 9.6 60.5 9.6s39.7-3.1 60.5-9.6c29.2 1 54.7 16.5 69.6 39.5-35 30.1-80.4 48.4-130.1 48.4zm162.7-84.1c-24.4-31.4-62.1-51.9-105.1-51.9-10.2 0-26 9.6-57.6 9.6-31.5 0-47.4-9.6-57.6-9.6-42.9 0-80.6 20.5-105.1 51.9C61.9 339.2 48 299.2 48 256c0-110.3 89.7-200 200-200s200 89.7 200 200c0 43.2-13.9 83.2-37.3 115.9z' class=''%3E%3C/path%3E%3C/svg%3E");width:14px;height:14px;margin:0 0 0 5px;vertical-align:middle;}
#technomee--slider .technomee-ps.technomee-p1 .auti .technomee--clock{display:inline-block;background:no-repeat center url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='far' data-icon='clock' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='svg-inline--fa fa-clock fa-w-16 fa-2x'%3E%3Cpath fill='rgb(0,128,128)' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z' class=''%3E%3C/path%3E%3C/svg%3E");width:14px;height:14px;margin:0 5px;vertical-align:middle;}
@media screen and (max-width:800px){#technomee--slider .technomee-ps.technomee-p1{width:100%;right:unset;left:unset;float:none;padding:0;height:300px}#technomee--slider .technomee-ps.technomee-p2,#technomee--slider .technomee-ps.technomee-p4{width:calc(50% - 5px);float:right;right:unset;left:unset;margin:10px 0;padding:0;height:auto;}#technomee--slider .technomee-ps.technomee-p3,#technomee--slider .technomee-ps.technomee-p5{width:calc(50% - 5px);float:left;right:unset;left:unset;margin:10px 0;padding:0;height:auto;}}

التعديلات: