حصريا سلايد شو احترافي النسخة الثانية لبلوجر

  <b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='container' id='slider'>
<ul></ul>
<script>
            /*<![CDATA[*/
            function jsonToSlider(json) {
              var ul = Z.query("#slider ul");
              Z.forEach(json.feed.entry, function (post) {
                var title = post.title.$t,
                    href = (function (link) {
                      var i;
                      for (i = link.length - 1; i >= 0; i -= 1) {
                        if (link[i] && link[i].rel === "alternate") {
                          return link[i].href || "#";
                        }
                      }
                      return "#";
                    }(post.link));
                var src = ((post.media$thumbnail || {}).url || Z.defaultFirstImgSrcPost).replace(
                  /\/s\d+(\-c)?\//, "/s760/"
                ).replace(
                  "/default.", "/mqdefault."
                ),
                    summary = post.summary.$t,
                    date = (function ($t) {
                      if (/^\d+-\d+-\d+/.test($t)) {
                        $t = $t.match(/\d+/g).slice(0,3).join("-");
                      }
                      $t = new Date($t);
                      return {day: $t.getDate(), month: Z.mounthArabicName($t.getMonth())};
                    }(post.published ? post.published.$t : ""));
                var li = Z.create("li"),
                    div = Z.create("div"),
                    spanDate = Z.create("span"),
                    spanDate_b = Z.create("b"),
                    spanDate_span = Z.create("span"),
                    h2 = Z.create("h2"),
                    h2_a = Z.create("a"),
                    p = Z.create("p"),
                    aMore = Z.create("a");
                Z.attr(spanDate, "class", "date");
                Z.attr(h2, "class", "title");
                Z.attr(p, "class", "summary");
                Z.attr(aMore, "class", "read-more");
                Z.css(
                  li,
                  "background-image",
                  'url("' + src.replace(/"/g, "%22").replace("http://", "//") + '")'
                );
                Z.text(spanDate_b, date.day);
                Z.text(spanDate_span, date.month);
                Z.text(h2_a, title);
                Z.attr(h2_a, "href", href);
                Z.text(p, summary);
                Z.html(
                  aMore,
                  "اقرأ المزيد" +
                  '<i class="fa fa-arrow-circle-o-left" aria-hidden="true"></i>'
                );
                Z.attr(aMore, "href", href);
                li.appendChild(div);
                spanDate.appendChild(spanDate_b);
                spanDate.appendChild(spanDate_span);
                div.appendChild(spanDate);
                div.appendChild(h2);
                h2.appendChild(h2_a);
                div.appendChild(p);
                div.appendChild(aMore);
                ul.appendChild(li);
              });
            }
            /*]]>*/
          </script>
<script src='/feeds/posts/summary?alt=json&amp;callback=jsonToSlider&amp;max-results=6'></script>
<script>
            /*<![CDATA[*/
            (function () {
              function Sliders(o) {
                var time = o.time || 500,
                    autoTime = o.autoTime || 5000,
                    selector = o.selector,
                    sliders = document.querySelectorAll(selector),
                    i;
                function css(elm, prop, val) {
                  elm.style[prop] = val;
                  prop = prop[0].toUpperCase() + prop.slice(1);
                  elm.style["webkit" + prop] = elm.style["moz" + prop] =
                    elm.style["ms" + prop] = elm.style["o" + prop] = val;
                }
                function anonimFunc(slider) {
                  var ul = slider.children[0],
                      li = ul.children,
                      activeIndex = 0,
                      isAnimate = false,
                      i,
                      s;
                  for (i = 0; i < li.length; i += 1) {
                    css(li[i], "animationDuration", time + "ms");
                  }
                  if (li.length === 0) {return; }
                  li[activeIndex].classList.add("active");
                  if (li.length === 1) {return; }
                  function left() {
                    if (isAnimate) {return; }
                    clearTimeout(s);
                    isAnimate = true;
                    var nextIndex = (activeIndex < li.length - 1) ? (activeIndex + 1) : (0);
                    li[nextIndex].classList.add("next");
                    li[activeIndex].classList.add("left");
                    li[nextIndex].classList.add("active");
                    setTimeout(function () {
                      li[activeIndex].classList.remove("active");
                      li[activeIndex].classList.remove("left");
                      li[nextIndex].classList.remove("next");
                      li[nextIndex].classList.add("active");
                      activeIndex = nextIndex;
                      isAnimate = false;
                      s = setTimeout(left, autoTime);
                    }, time);
                  }
                  function right() {
                    if (isAnimate) {return; }
                    clearTimeout(s);
                    isAnimate = true;
                    var nextIndex = (activeIndex > 0) ? (activeIndex - 1) : (li.length - 1);
                    li[nextIndex].classList.add("previous");
                    li[activeIndex].classList.add("right");
                    li[nextIndex].classList.add("active");
                    setTimeout(function () {
                      li[activeIndex].classList.remove("active");
                      li[activeIndex].classList.remove("right");
                      li[nextIndex].classList.remove("previous");
                      li[nextIndex].classList.add("active");
                      activeIndex = nextIndex;
                      isAnimate = false;
                      s = setTimeout(right, autoTime);
                    }, time);
                  }
                  s = setTimeout(left, autoTime);
                }
                for (i = 0; i < sliders.length; i += 1) {
                  anonimFunc(sliders[i]);
                }
              }
              /* -- how to use it ? -- */
              var sliders = new Sliders({
                selector: "#slider",
                time: 500,
                autoTime: 10000
              });
            }());
            /*]]>*/
          </script>
</div>
<!--/- #slider -->
<style>
 /*-- #slider --*/
      @-webkit-keyframes slider-key-next {
        0% {left: 100%; }
        100% {left: 0; }
      }
      @keyframes slider-key-next {
        0% {left: 100%; }
        100% {left: 0; }
      }
      @-webkit-keyframes slider-key-left {
        0% {left: 0; }
        100% {left: -100%; }
      }
      @keyframes slider-key-left {
        0% {left: 0; }
        100% {left: -100%; }
      }
      @-webkit-keyframes slider-key-previous {
        0% {left: -100%; }
        100% {left: 0; }
      }
      @keyframes slider-key-previous {
        0% {left: -100%; }
        100% {left: 0; }
      }
      @-webkit-keyframes slider-key-right {
        0% {left: 0; }
        100% {left: 100%; }
      }
      @keyframes slider-key-right {
        0% {left: 0; }
        100% {left: 100%; }
      }
      #slider {
               overflow: hidden;
    position: relative;
      }
      #slider ul {
        margin: 0;
        padding: 0;
        list-style: none;
        position: relative;
        float: left;
        width: 100%;
        overflow: hidden;
      }
      #slider ul li {
        position: absolute;
        left: 100%;
        top: 0;
        width: 100%;
        height: 100%;
        visibility: hidden;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
      }
      #slider ul li.active {visibility: visible; left: 0; }
      #slider ul li.left {-webkit-animation-name: slider-key-left;animation-name: slider-key-left; }
      #slider ul li.next {-webkit-animation-name: slider-key-next;animation-name: slider-key-next; }
      #slider ul li.right {-webkit-animation-name: slider-key-right;animation-name: slider-key-right; }
      #slider ul li.previous {-webkit-animation-name: slider-key-previous;animation-name: slider-key-previous; }
      #slider {
        border-radius: 3px;
    margin-top: 7%;
      }
      #slider ul {
        height: 300px;
      }
      #slider ul li {
        background-size: cover;
        background-position: center;
      }
      #slider ul li div {
        display: block;
        height: 185px;
        position: relative;
        margin: 100px 15px 15px;
      }
      #slider ul li:before {
        content: "";
        display: block;
        background: #E55D87;
        background: -webkit-linear-gradient(left, #E55D87, #5FC3E4);
        background: -webkit-linear-gradient(right, #E55D87, #5FC3E4);
        background: linear-gradient(to left, #E55D87, #5FC3E4);
        opacity: 0.75;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
      #slider ul li:nth-child(4n+2):before {
        background: #FF5F6D;
        background: -webkit-linear-gradient(left, #FF5F6D, #FFC371);
        background: -webkit-linear-gradient(right, #FF5F6D, #FFC371);
        background: linear-gradient(to left, #FF5F6D, #FFC371);
      }
      #slider ul li:nth-child(4n+3):before {
        background: #DAD299;
        background: -webkit-linear-gradient(left, #DAD299, #B0DAB9);
        background: -webkit-linear-gradient(right, #DAD299, #B0DAB9);
        background: linear-gradient(to left, #DAD299, #B0DAB9);
      }
      #slider ul li:nth-child(4n+4):before {
        background: #134E5E;
        background: -webkit-linear-gradient(left, #134E5E, #71B280);
        background: -webkit-linear-gradient(right, #134E5E, #71B280);
        background: linear-gradient(to left, #134E5E, #71B280);
      }
      #slider ul li span.date {
        display: inline-block;
        color: #fff;
        font-size: 14px;
        line-height: 1.4;
        text-align: center;
        text-transform: uppercase;
        padding-bottom: 8px;
        font-family: ;
      }
      #slider ul li span.date b {
        display: block;
        font-size: 1.125em;
      }
      #slider ul li h2 {
        color: #fff;
        margin: 0;
        height: 50px;
        overflow: hidden;
      }
      #slider ul li h2.title a {
        color: white;
        font-size: 22px;
        font-weight: bold;
        text-decoration: none;
        line-height: 50px;
        float: right;
        font-family: ;
      }
      #slider ul li p.summary {
        color: #fff;
        font-size: 14px;
        max-width: 550px;
        height: 50px;
        overflow: hidden;
        line-height: 25px;
        margin: 20px 0;
        font-family: "Droid Arabic Naskh";
      }
      #slider ul li a.read-more {
        position: absolute;
        bottom: 0;
        left: 0;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        z-index: 3;
        text-decoration: none;
        outline: none;
        line-height: 30px;
        margin-left: 0;
        -webkit-transition: margin-left 0.3s ease-in-out;
        transition: margin-left 0.3s ease-in-out;
        font-family: ;
      }
      #slider ul li a.read-more i.fa {
        position: absolute;
        top: 0;
        right: initial;
        left: -20px;
        width: 15px;
        text-align: center;
        line-height: 30px;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
      }
      #slider ul li a.read-more:hover {
        margin-left: 20px;
      }
      #slider ul li a.read-more:hover i.fa {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      }
      /*-/- #slider --*/
</style>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.2.0/snap.svg-min.js'/>
      </b:if>

والسلام عليكم ورحمة الله وبركاتة اتمني ان التدوينة قد تنال اعجابكم ☺☺ 

مع تحيات فريق