الثلاثاء، 20 أغسطس 2019

احصل على هذة الاداة من هنا

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



السلام عليكم
ورحمة الله
وبركاته

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




طريقة التركيب
  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 باللون الأصفر 

هناك 5 تعليقات

  1. السلام عليكم :
    أخي عصام من فضلك أريد أكواد تحميل صور التدوينات وليس التدوينة html بشكل مباشر
    مثل قالب فضاء إن أمكنك ذلك .. بحثت كثيراً في المدونات العربية والأجنبية ولم أجدها سوى في مدونتك
    في إنتظار ردك ولك مني جزيل الشكر .

    ردحذف
    الردود
    1. وعليكم السلام صديقي
      أرسلي نسخة من القالب

      حذف
  2. أشكرك أخي عصام معروف لن أنساه لك تم ارسال القالب لك على الجيميل ... (:

    ردحذف
  3. يااخي من فضلك راسلني على الفيس او على ايميلك اعطيني ايميلك

    ردحذف
  4. راسلني هنا roussafi.omaar@gmail.com

    ردحذف


EmoticonEmoticon