سلايدر تلقائي بالترقيم

السلام عليكم

ورحمة الله

وبركاته

تدوينتنا اليوم عبارة عن سلايد
تلقائي بالترقيم لعرض التدوينات الأخيرة
او المصنفة حسب تسمية معينة
أترككم مع المعاينة والشرح

معاينة

طريقة التركيب

1. من التخطيط قم بانشاء أداة html/javascript
2. ثم قم بلصق الأكواد التالية داخل الأداة

• <script type="text/javascript">
• //<![CDATA[
• function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
• function loadJS(e, t, n) { "use strict"; var i = window.document.createElement("script"); var o = t || window.document.getElementsByTagName("script")[0]; i.type = "text/javascript"; i.src = e; o.parentNode.insertBefore(i, o); setTimeout(function () { i.type = n || "text/javascript" }) }
• loadCSS("https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
• //]]>
• </script>
• <div id="slider-rotator" class="slider-rotator loading">
• </div>
• <script>
• //<![CDATA[
• (function (a) {
•     a.fn.customRotator = function (c) {
•         c = a.extend({
•             interval: 6000,
•             speed: 1000,
•             hoverPause: true,
•             autoHeight: false,
•             crossFade: false,
•             autoSlide: true,
•             hide: function (d) {},
•             show: function (d) {}
•         }, c);
•         var b = true;
•         return this.each(function () {
•             var k = a(this),
•                 e = k.children().hide(),
•                 d = k.next(),
•                 g = null,
•                 j = 0,
•                 f = 0;
•             function h() {
•                 c.hide(f);
•                 d.find(".current").removeClass("current");
•                 b = false;
•                 if (e.eq(f).next().length) {
•                     if (!c.crossFade) {
•                         e.eq(f).fadeOut(c.speed, function () {
•                             a(this).next().fadeIn(c.speed, function () {
•                                 c.show(f);
•                                 b = true
•                             });
•                             if (c.autoHeight) {
•                                 k.stop().animate({
•                                     height: e.eq(f + 1).height()
•                                 }, c.speed / 2)
•                             }
•                             f++
•                         })
•                     } else {
•                         e.eq(f).fadeOut(c.speed);
•                         e.eq(f).next().fadeIn(c.speed, function () {
•                             c.show(f);
•                             b = true;
•                             f++
•                         });
•                         if (c.autoHeight) {
•                             k.stop().animate({
•                                 height: e.eq(f + 1).height()
•                             }, c.speed / 2)
•                         }
•                     }
•                     d.find(".rotator-num a").eq(f + 1).addClass("current")
•                 } else {
•                     if (!c.crossFade) {
•                         e.eq(f).fadeOut(c.speed, function () {
•                             f = 0;
•                             e.first().fadeIn(c.speed, function () {
•                                 c.show(f);
•                                 b = true
•                             });
•                             if (c.autoHeight) {
•                                 k.stop().animate({
•                                     height: e.eq(f).height()
•                                 }, c.speed / 2)
•                             }
•                         })
•                     } else {
•                         e.eq(f).fadeOut(c.speed);
•                         e.first().fadeIn(c.speed, function () {
•                             c.show(0);
•                             b = true;
•                             f = 0
•                         });
•                         if (c.autoHeight) {
•                             k.stop().animate({
•                                 height: e.eq(0).height()
•                             }, c.speed / 2)
•                         }
•                     }
•                     d.find(".rotator-num a").first().addClass("current")
•                 }
•                 if (j == 0 && c.autoSlide) {
•                     g = setTimeout(h, c.interval)
•                 }
•             }
•             if (e.length > 1) {
•                 c.hide(f);
•                 e.first().fadeIn(c.speed, function () {
•                     c.show(f);
•                     b = true
•                 });
•                 if (c.autoHeight) {
•                     k.stop().animate({
•                         height: e.eq(0).height()
•                     }, c.speed / 2)
•                 }
•                 if (c.hoverPause && c.autoSlide) {
•                     k.mouseenter(function () {
•                         clearTimeout(g);
•                         j = 1
•                     }).mouseleave(function () {
•                         g = setTimeout(h, c.interval);
•                         j = 0
•                     }).trigger("mouseleave")
•                 } else {
•                     g = (c.autoSlide) ? setTimeout(h, c.interval) : null
•                 }
•                 d.find(".rotator-num a").click(function () {
•                     if (b) {
•                         b = false;
•                         if (c.autoSlide) {
•                             clearTimeout(g);
•                             g = setTimeout(h, c.interval)
•                         }
•                         f = a(this).index();
•                         a(this).parent().find(".current").removeClass("current");
•                         a(this).addClass("current");
•                         c.hide(f);
•                         e.fadeOut(c.speed).eq(f).fadeIn(c.speed, function () {
•                             c.show(f);
•                             b = true
•                         });
•                         if (c.autoHeight) {
•                             k.stop().animate({
•                                 height: e.eq(f).height()
•                             }, c.speed / 2)
•                         }
•                     }
•                     return false
•                 });
•                 d.find(".rotator-advancer a").click(function () {
•                     if (b) {
•                         b = false;
•                         var l = this.hash.replace("#", ""),
•                             i = e.length;
•                         if (c.autoSlide) {
•                             clearTimeout(g);
•                             g = setTimeout(h, c.interval)
•                         }
•                         if (l == "next") {
•                             f = (f < i - 1) ? f + 1 : 0
•                         } else {
•                             f = (f > 0) ? f - 1 : i - 1
•                         }
•                         d.find(".current").removeClass("current");
•                         d.find(".rotator-num a").eq(f).addClass("current");
•                         c.hide(f);
•                         e.fadeOut(c.speed).eq(f).fadeIn(c.speed, function () {
•                             c.show(f);
•                             b = true
•                         });
•                         if (c.autoHeight) {
•                             k.stop().animate({
•                                 height: e.eq(f).height()
•                             }, c.speed / 2)
•                         }
•                     }
•                     return false
•                 })
•             }
•         })
•     }
• })(jQuery);
• function makeSlider(a) {
•     var c = {
•         url: "https://p-rosport.blogspot.com",
•         numPost: 5,
•         newTabLink: false,
•         labelName: null,
•         showDetail: true,
•         summaryLength: 60,
•         titleLength: "auto",
•         showThumb: true,
•         thumbWidth: 320,
•         squareThumb: false,
•         noThumb: "https://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png",
•         showNav: true,
•         navText: {
•             prev: "<i class='fa fa-arrow-left'></i>",
•             next: "<i class='fa fa-arrow-right'></i>"
•         },
•         containerId: "slider-rotator",
•         interval: 6000,
•         speed: 1000,
•         hoverPause: true,
•         crossFade: true,
•         autoHeight: false,
•         autoSlide: true,
•         onInit: function () {},
•         onHide: function (d) {},
•         onShow: function (d) {}
•     };
•     for (var b in c) {
•         c[b] = (typeof (a[b]) !== "undefined") ? a[b] : c[b]
•     }
•     $.get(c.url + "/feeds/posts/summary/" + (c.labelName === null ? "" : "-/" + c.labelName.replace(/\,(\s+)?/g, "/")) + "?alt=json-in-script&max-results=" + c.numPost, {}, function (s) {
•         if (s.feed.entry !== undefined) {
•             var r = s.feed.entry,
•                 q, p, e, o, h = "",
•                 d = "";
•             for (var m = 0, n = r.length; m < n; m++) {
•                 if (m == r.length) {
•                     break
•                 }
•                 q = r[m].title.$t;
•                 e = ("media$thumbnail" in r[m]) ? '<img alt="' + q + '" src="' + r[m].media$thumbnail.url.replace(/\/s72\-c/, "/s" + c.thumbWidth + (c.squareThumb ? "-c" : "")) + '" style="width:' + c.thumbWidth + "px;height:" + (c.squareThumb ? c.thumbWidth + "px" : "auto") + '">' : '<img src="' + c.noThumb + '" style="width:' + c.thumbWidth + "px;height:" + (c.squareThumb ? c.thumbWidth + "px" : "auto") + '">';
•                 o = ("summary" in r[m] && c.summaryLength > 0) ? r[m].summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<(.*?)>/g, "").replace(/[<>]/g, "") : "";
•                 o = (c.summaryLength < o.length) ? o.substring(0, c.summaryLength) + "…" : o;
•                 for (var l = 0, f = r[m].link.length; l < f; l++) {
•                     p = (r[m].link[l].rel == "alternate") ? r[m].link[l].href : "#"
•                 }
•                 h += '<div class="slider-item">';
•                 h += (c.showThumb && c.showDetail) ? '<div class="image-wrapper">' + e + "</div>" : (c.showThumb && !c.showDetail) ? '<div class="image-wrapper"><a href="' + p + '" title="' + q + '"' + (c.newTabLink ? ' target="_blank"' : "") + ">" + e + "</a></div>" : "";
•                 h += (c.showDetail) ? '<div class="detail-wrapper"><h4><a title="' + q + '" href="' + p + '"' + (c.newTabLink ? ' target="_blank"' : "") + ">" + ((c.titleLength == "auto") ? q : q.substring(0, c.titleLength) + (q.length > c.titleLength ? "…" : "")) + "</a></h4><p>" + o + "</p></div>" : "";
•                 h += "</div>";
•                 $("#" + c.containerId).css({
•                     width: (c.showThumb) ? c.thumbWidth + "px" : $("#" + c.containerId).css("width"),
•                     height: (!c.showDetail && c.squareThumb) ? c.thumbWidth + "px" : $("#" + c.containerId).css("height")
•                 })
•             }
•             d = '<div class="slider-rotator-nav"' + (c.showNav === false ? ' style="display:none;"' : "") + ">";
•             d += (c.showNav === true || c.showNav == "next/prev") ? '<span class="rotator-advancer"><a href="#prev">' + c.navText.prev + "</a></span>" : "";
•             if (c.showNav === true || c.showNav == "number") {
•                 d += '<span class="rotator-num">';
•                 for (var g = 0; g < c.numPost; g++) {
•                     d += '<a href="#slide-' + g + '" class="' + (g === 0 ? "current" : "") + '">' + (g + 1) + "</a>"
•                 }
•                 d += "</span>"
•             }
•             d += (c.showNav === true || c.showNav == "next/prev") ? '<span class="rotator-advancer"><a href="#next">' + c.navText.next + "</a></span>" : "";
•             d += "</div>";
•             $("#" + c.containerId).html(h).after(d);
•             c.onInit();
•             $("#" + c.containerId).removeClass("loading").customRotator({
•                 interval: c.interval,
•                 speed: c.speed,
•                 autoHeight: c.autoHeight,
•                 hoverPause: c.hoverPause,
•                 crossFade: c.crossFade,
•                 autoSlide: c.autoSlide,
•                 hide: function (i) {
•                     c.onHide(i)
•                 },
•                 show: function (i) {
•                     c.onShow(i)
•                 }
•             })
•         } else {
•             $("#" + c.containerId).removeClass("loading").css({
•                 width: "auto",
•                 height: "auto"
•             }).html("Error or not found!")
•         }
•     }, "jsonp")
• };
• //]]>
• </script>
• <script type="text/javascript">
• //<![CDATA[
• makeSlider({
•     url: "https://p-rosport.blogspot.com" // Change to your blog URL
• });
• //]]>
• </script>
• <style>
• .slider-rotator{background:#fff;font-family:roboto;width:300px!important;min-height:200px;height:auto !important;padding:10px;color:#fff;margin:0 auto;position:relative;overflow:hidden;text-align:left}.slider-rotator.loading{display:none;background-position:50% 50%;background-repeat:no-repeat}.slider-rotator .slider-item{position:absolute;padding:0;background-color:transparent;top:0;right:0;bottom:auto;left:0;display:none}.slider-rotator img{    height: 180px !important;display:block;border:none;outline:none;padding:0 0;margin:0 auto;box-shadow:none;}.slider-rotator h4{font-size:16px;text-transform:none;margin:0;padding:15px 0;color:#242424;text-align:center}.slider-rotator h4 a{color:#242424!important;line-height:1.5;text-decoration:none}.slider-rotator h4 a:hover{color:#e79c5a;text-decoration:none}.slider-rotator p{margin:10px}.slider-rotator-nav{text-align:center;margin:10px auto}.slider-rotator-nav a{font-size:13px;display:inline;background-color:#fff;color:#222;border:0;padding:5px 10px;line-height:2.6em;border:1px solid rgba(0,0,0,0.08);margin:0 2px;text-decoration:none}.slider-rotator-nav a:hover{background-color:#fff;color:#ec407a;border-color:#ec407a}.slider-rotator-nav a.current{background-color:#ec407a;color:#fff}
• </style>

غير رابط الموقع باللون الأحمر وأن كنت تريد عرض المواضيع حسب تسمية غير null باللون الأصفر