اضافة افضل سلايد شو تلقائي إحترافي لمدونات بلوجر

اضافة افضل سلايد شو تلقائي إحترافي لمدونات بلوجر

اضافة افضل سلايد شو تلقائي بلوجر

السلام عليكم ورحمة الله وبركاته ومغفرته ، احبتي ومتابعي مدونة هشام هاشم للمعلوميات والتقنيات ، اليوم في قسم دروس بلوجر سوف نقدم لكم احد افضل سلايد شو تلقائي للمواضيع على مدونة بلوجر ، كما اننا سوف نوفر لكم اضافة تشتغل على معظم القوالب بلوجر ، ايضا الطريقة التي سوف نشرح تتوفر على ثلاث خطوات بسيطة وغير معقدة وكما تعتمد على نسخ لصق بدون تغيير اي كود .

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

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

كيفية تركيب سلايد شو على مدونتك الاصدار الاول :

1 - دخول الى القالب >> تحرير html >> افتح محرك البحث عن الاكواد CTRL+F >> ونبحث عن امر ]]></b:skin> ونضع الكود فوقها مباشرة .

/*wdbloog*/
#wdbloog .widget {position: relative;min-height: 385px;margin-bottom: 10px;font-size: 0;}
#wdbloog .post-category,
.wdbloog-post-title {color: #fff !important;}
#wdbloog .title {display: none;}
.center-box {float: left;}
.right-box-wrapper,
.left-box-wrapper {float: left;width: 23.73%;}
.left-box, .right-box {height: 244.5px;}
.left-box:first-child {margin-bottom: 1px;}
.right-box:first-child {margin-bottom: 1px;}
.center-box {position: relative;width: 52.37288%;height: 490px;margin: 0 0.0847457%;}
.wdbloog2 .center-box {margin-right: 0.0847457%;margin-left: 0;}
.wdbloog2 .left-box-wrapper {margin-right: 0.0847457%;}
.left1, .left2, .right1, .right2 {position: relative;}
.left1:after,
.left2:after,
.right1:after,
.right2:after {content: '';position: absolute;top: 0;bottom: 0;right: 0;left: 0;background: rgba(0,0,0,0.5);background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.6) 0, transparent 100%); /* Chrome10+,Safari5.1+ */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1301FE', endColorstr='#F4F60C', GradientType='1'); /* for IE */background: linear-gradient(0deg, rgba(0,0,0,0.6) 0, transparent 100%);/* W3C */}
.post-category {position: absolute;top: 12px;left: 12px;padding: 5px 10px;
font-family: 'Droid Arabic Kufi' , serif;text-transform: uppercase;font-size: 0.75rem;font-weight: 700;z-index: 3;}
.post-category:hover {background: $maincolor !important;}
.left1 .post-category {background: #FF5E5E;}
.left2 .post-category {background: #519CA7;}
.center-box .post-category {background: #1AC381;}
.right1 .post-category {background: #F38840;}
.right2 .post-category {background: #933CA0;}
.wdbloog-post-title {position: absolute;top: 0;bottom: 0;left: 0;right: 0;padding: 12px;
font-family: 'Droid Arabic Kufi' , serif; text-transform: capitalize;font-size: 0.875rem;font-weight: 700;line-height: 1.7;z-index: 2;}
.left-box-wrapper .heading,
.right-box-wrapper .heading,
.top-box-wrapper .heading,
.bottom-box-wrapper .heading {position: absolute;bottom: 10px;left: 12px;right: 12px;font-size: 15px;}
.center-box .wdbloog-post-title {background-color: rgba(0, 0, 0, 0.5);font-size: 1.5rem;text-transform: capitalize;padding: 10px 20px;top: auto;text-shadow: 0 1px 0 #000;}
.center-box .wdbloog-post-title .heading {position: relative;bottom: auto;}
.wdbloog-post-title:hover .heading {color: $maincolor;}
.top-box-wrapper {margin-bottom: 1px !important;}
.top-box-item {position: relative;float: left;width: 24.937%;margin-right: 0.084% !important;height: 190px;}
.top-box-item:last-child {margin-right: 0 !important;}
.bottom-box-item {float: left;position: relative;width: 33.277%;height: 250px;margin-right: 0.084% !important;}
.bottom-box-item:last-child {margin-right: 0 !important;}
.top-box-item:after,
.bottom-box-item:after {content: '';position: absolute;top: 0;bottom: 0;right: 0;left: 0;background: rgba(0,0,0,0.5);background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.6) 0, transparent 100%); /* Chrome10+,Safari5.1+ */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1301FE', endColorstr='#F4F60C', GradientType='1'); /* for IE */background: linear-gradient(0deg, rgba(0,0,0,0.6) 0, transparent 100%);/* W3C */}
.top-box-item:nth-child(1) .post-category {background: #FF5E5E;}
.top-box-item:nth-child(2) .post-category {background: #519CA7;}
.top-box-item:nth-child(3) .post-category {background: #1AC381;}
.top-box-item:nth-child(4) .post-category {background: #F38840;}
.bottom-box-item:nth-child(1) .post-category {background: #933CA0;}
.bottom-box-item:nth-child(2) .post-category {background: #D41E46;}
.bottom-box-item:nth-child(3) .post-category {background: #607D8B;}
.bottom-box-wrapper .wdbloog-post-title {font-size: 1rem;}
.wdbloog4 .bottom-box-wrapper {margin-bottom: 1px !important;}
h3.heading {font-size: 26px;font-family: Droid Arabic Naskh!important;}
/*wdbloog*/

2 - ابحث عن أمر </body> وضع الكود فوقه مباشرة

<script>
//<![CDATA[

/* wdbloog Widget
--------------------------------------*/

  var numOfwdbloogPosts = 5;
  var wdbloog = $('#wdbloog .widget-content');
  var wdbloogContent = wdbloog.text().trim();
  var wdbloogTitle = $('#wdbloog .title').text();

  wdbloog.removeClass('widget-content').addClass(''+ wdbloogTitle +' clearfix');

  if(wdbloogTitle === "wdbloog1" || wdbloogTitle === "wdbloog2") {

  if((wdbloogContent !== "random") && (wdbloogContent.charAt(0) !== "[")) {
      $.ajax({
        url: "/feeds/posts/default/-/" + wdbloogContent + "?alt=json-in-script&max-results="+ numOfwdbloogPosts +"",
        type: "get",
        dataType: "jsonp",
        success: function (e) {

          var img  = new Array();

          for (var i = 0; i < 5; i++) {
            var entry = e.feed.entry[i];
            var posttitle = entry.title.$t;
            var posturl;

            var category = '<a class="post-category" href="/search/label/'+entry.category[0].term+'?max-results=7">'+entry.category[0].term+'</a>';  
            
            for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
            }

            if ("content" in entry) {
              var postcontent = entry.content.$t;
            }

            s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

            if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

            var tmb = img[i].replace('s1600/','s500-c/');

            if(i===0) {
              var trtd1 = '<div class="left-box-wrapper clearfix"><div class="left-box left1" style="background: url('+ tmb +') no-repeat center;background-size: cover">
'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></div>
';
            }

            if(i===1) {
              var trtd2 = '<div class="left-box left2" style="background: url('+ tmb +') no-repeat center;background-size: cover">
'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></div>
</div>
';
            }

            if(i===2) {
              var trtd3 = '<div class="center-box clearfix" style="background: url('+ tmb +') no-repeat center;background-size: cover">
'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></div>
';
            }

            if(i===3) {
              var trtd4 = '<div class="right-box-wrapper clearfix">
<div class="right-box right1" style="background: url('+ tmb +') no-repeat center;background-size: cover">
'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></div>
';
            }

            if(i===4) {
              var trtd5 = '<div class="right-box right2" style="background: url('+ tmb +') no-repeat center;background-size: cover">
'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></div>
</div>
';
            }

            if(wdbloogTitle === "wdbloog1") {
              wdbloog.html(trtd1 + trtd2 + trtd3 + trtd4 + trtd5); 
            }
            if(wdbloogTitle === "wdbloog2") {
              wdbloog.html(trtd3 + trtd1 + trtd2 + trtd4 + trtd5); 
            }
          }

        }

      });
    } else if(wdbloogContent.charAt(0) === "[") {

      $.ajax({
      url: "/feeds/posts/default?alt=json-in-script",
      type: "get",
      dataType: "jsonp",
      success: function (e) {

        var r = wdbloogContent.match(/[^[\]]+(?=])/g);
        var postsLength = e.feed.entry.length;

        for (var i = 0; i < postsLength; i++) {
          var entry = e.feed.entry[i];
          var posttitle = entry.title.$t.toLowerCase();

          if(r[0].toLowerCase() === posttitle) {
          var img  = new Array();

            var posturl;
            var category = '<a class="post-category" href="/search/label/'+e.feed.entry[i].category[0].term+'?max-results=7">'+e.feed.entry[i].category[0].term+'</a>';  

            for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
            }

            if ("content" in entry) {
              var postcontent = entry.content.$t;
            }

            s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

            if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

            var tmb = img[i].replace('s1600/','s500-c/');

            var trtd1 = '<div class="left-box-wrapper clearfix"><div class="left-box left1" style="background: url('+ tmb +') no-repeat center;background-size: cover">
'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></div>
';
          }

          if(r[1].toLowerCase() === posttitle) {
          var img  = new Array();

            var posturl;
            var category = '<a class="post-category" href="/search/label/'+e.feed.entry[i].category[0].term+'?max-results=7">'+e.feed.entry[i].category[0].term+'</a>';  

            for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
            }

            if ("content" in entry) {
              var postcontent = entry.content.$t;
            }

            s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

            if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

            var tmb = img[i].replace('s1600/','s500-c/');

            var trtd2 = '<div class="left-box left2" style="background: url('+ tmb +') no-repeat center;background-size: cover">'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></div>
</div>
';
          }


          if(r[2].toLowerCase() === posttitle) {
          var img  = new Array();

            var posturl;
            var category = '<a class="post-category" href="/search/label/'+e.feed.entry[i].category[0].term+'?max-results=7">'+e.feed.entry[i].category[0].term+'</a>';  

            for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
            }

            if ("content" in entry) {
              var postcontent = entry.content.$t;
            }

            s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

            if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

            var tmb = img[i].replace('s1600/','s500-c/');

            var trtd3 = '<div class="center-box clearfix" style="background: url('+ tmb +') no-repeat center;background-size: cover">'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></div>
';
          }

          if(r[3].toLowerCase() === posttitle) {
          var img  = new Array();

            var posturl;
            var category = '<a class="post-category" href="/search/label/'+e.feed.entry[i].category[0].term+'?max-results=7">'+e.feed.entry[i].category[0].term+'</a>';  

            for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
            }

            if ("content" in entry) {
              var postcontent = entry.content.$t;
            }

            s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

            if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

            var tmb = img[i].replace('s1600/','s500-c/');

            var trtd4 = '<div class="right-box-wrapper clearfix"><div class="right-box right1" style="background: url('+ tmb +') no-repeat center;background-size: cover">
'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></div>
';
          }

          if(r[4].toLowerCase() === posttitle) {
          var img  = new Array();

            var posturl;
            var category = '<a class="post-category" href="/search/label/'+e.feed.entry[i].category[0].term+'?max-results=7">'+e.feed.entry[i].category[0].term+'</a>';  

            for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
            }

            if ("content" in entry) {
              var postcontent = entry.content.$t;
            }

            s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

            if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

            var tmb = img[i].replace('s1600/','s500-c/');

            var trtd5 = '<div class="right-box right2" style="background: url('+ tmb +') no-repeat center;background-size: cover">'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></div>
</div>
';
          }

        }

        if(wdbloogTitle === "wdbloog1") {
          wdbloog.html(trtd1 + trtd2 + trtd3 + trtd4 + trtd5); 
        }
        if(wdbloogTitle === "wdbloog2") {
          wdbloog.html(trtd3 + trtd1 + trtd2 + trtd4 + trtd5); 
        }
      }

      });
  } else if(wdbloogContent.match("random")) {

      $.ajax({
      url: "/feeds/posts/default?alt=json-in-script",
      type: "get",
      dataType: "jsonp",
      success: function (e) {

        var entryLength = e.feed.entry.length,
            a = entryLength - 5,
            n = Math.floor(Math.random() * (a + 1));

        $.ajax({
          url: "/feeds/posts/default?alt=json-in-script&end-index=" + n + "",
          type: "get",
          dataType: "jsonp",
          success: function (e) {

            var img  = new Array();

            for (var i = 0; i < 5; i++) {
              var entry = e.feed.entry[n+i];
              var posttitle = entry.title.$t;
              var posturl;
              
              var category = '<a class="post-category" href="/search/label/'+entry.category[0].term+'?max-results=7">'+entry.category[0].term+'</a>';  

              for (var k = 0; k < entry.link.length; k++) {
                if (entry.link[k].rel == 'alternate') {
                  posturl = entry.link[k].href;
                  break;
                }
              }

              if ("content" in entry) {
                var postcontent = entry.content.$t;
              }

              s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

              if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[n] = d;

              var tmb = img[n].replace('s1600/','s500-c/');

              if(i===0) {
                var trtd1 = '<div class="left-box-wrapper clearfix"><div class="left-box left1" style="background: url('+ tmb +') no-repeat center;background-size: cover">
'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></div>
';
              }

              if(i===1) {
                var trtd2 = '<div class="left-box left2" style="background: url('+ tmb +') no-repeat center;background-size: cover">
'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></div>
</div>
';
              }

              if(i===2) {
                var trtd3 = '<div class="center-box clearfix" style="background: url('+ tmb +') no-repeat center;background-size: cover">
'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></div>
';
              }

              if(i===3) {
                var trtd4 = '<div class="right-box-wrapper clearfix">
<div class="right-box right1" style="background: url('+ tmb +') no-repeat center;background-size: cover">
'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></div>
';
              }

              if(i===4) {
                var trtd5 = '<div class="right-box right2" style="background: url('+ tmb +') no-repeat center;background-size: cover">
'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></div>
</div>
';
              }

            }

            if(wdbloogTitle === "wdbloog1") {
              wdbloog.html(trtd1 + trtd2 + trtd3 + trtd4 + trtd5); 
            }
            if(wdbloogTitle === "wdbloog2") {
              wdbloog.html(trtd3 + trtd1 + trtd2 + trtd4 + trtd5); 
            }
          }

        });

      }
    });

}

  } else if(wdbloogTitle === "wdbloog3" || wdbloogTitle === "wdbloog4") {

  if((wdbloogContent !== "random") && (wdbloogContent.charAt(0) !== "[")) {
      $.ajax({
        url: "/feeds/posts/default/-/" + wdbloogContent + "?alt=json-in-script&max-results=7",
        type: "get",
        dataType: "jsonp",
        success: function (e) {

          var img  = new Array();

          for (var i = 0; i < 7; i++) {
            var entry = e.feed.entry[i];
            var posttitle = entry.title.$t;
            var posturl;
          
            var category = '<a class="post-category" href="/search/label/'+e.feed.entry[i].category[0].term+'?max-results=7">'+e.feed.entry[i].category[0].term+'</a>';  
         
            for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
            }

            if ("content" in entry) {
              var postcontent = entry.content.$t;
            }

            s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

            if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

            var tmb = img[i].replace('s1600/','s500-c/');

            if(i===0) {
              var trtd1 = '<li class="top-box-item" style="background: url('+ tmb +') no-repeat center;background-size: cover">'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></li>
';
            }

            if(i===1) {
              var trtd2 = '
<li class="top-box-item" style="background: url('+ tmb +') no-repeat center;background-size: cover">'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></li>
';
            }

            if(i===2) {
              var trtd3 = '
<li class="top-box-item" style="background: url('+ tmb +') no-repeat center;background-size: cover">'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></li>
';
            }

            if(i===3) {
              var trtd4 = '
<li class="top-box-item" style="background: url('+ tmb +') no-repeat center;background-size: cover">'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></li>
';
            }

            if(i===4) {
              var trtd5 = '
<li class="bottom-box-item" style="background: url('+ tmb +') no-repeat center;background-size: cover">'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></li>
';
            }

            if(i===5) {
              var trtd6 = '
<li class="bottom-box-item" style="background: url('+ tmb +') no-repeat center;background-size: cover">'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></li>
';
            }

            if(i===6) {
              var trtd7 = '
<li class="bottom-box-item" style="background: url('+ tmb +') no-repeat center;background-size: cover">'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></li>
';
            }

          }
          if(wdbloogTitle === "wdbloog3") {
            wdbloog.html('<ul class="top-box-wrapper clearfix">' + trtd1 + trtd2 + trtd3 + trtd4 + '</ul>
<ul class="bottom-box-wrapper clearfix">' + trtd5 + trtd6 + trtd7 + '</ul>
');
          } else if (wdbloogTitle === "wdbloog4") {
            wdbloog.html('<ul class="bottom-box-wrapper clearfix">' + trtd5 + trtd6 + trtd7 + '</ul>
' + '<ul class="top-box-wrapper clearfix">' + trtd1 + trtd2 + trtd3 + trtd4 + '</ul>
');
          } 

        }

      });

    } else if(wdbloogContent.charAt(0) === "[") {

      $.ajax({
      url: "/feeds/posts/default?alt=json-in-script",
      type: "get",
      dataType: "jsonp",
      success: function (e) {

        var r = wdbloogContent.match(/[^[\]]+(?=])/g);
        var postsLength = e.feed.entry.length;

        for (var i = 0; i < postsLength; i++) {
          var entry = e.feed.entry[i];
          var posttitle = entry.title.$t.toLowerCase();

          if(r[0].toLowerCase() === posttitle) {
          var img  = new Array();

            var posturl;
            var category = '<a class="post-category" href="/search/label/'+entry.category[0].term+'?max-results=7">'+entry.category[0].term+'</a>';  

            for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
            }

            if ("content" in entry) {
              var postcontent = entry.content.$t;
            }

            s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

            if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

            var tmb = img[i].replace('s1600/','s500-c/');

var trtd1 = '<li class="top-box-item" style="background: url('+ tmb +') no-repeat center;background-size: cover">'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></li>
';
          }

          if(r[1].toLowerCase() === posttitle) {
          var img  = new Array();

            var posturl;
            var category = '<a class="post-category" href="/search/label/'+entry.category[0].term+'?max-results=7">'+entry.category[0].term+'</a>';  

            for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
            }

            if ("content" in entry) {
              var postcontent = entry.content.$t;
            }

            s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

            if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

            var tmb = img[i].replace('s1600/','s500-c/');

var trtd2 = '<li class="top-box-item" style="background: url('+ tmb +') no-repeat center;background-size: cover">'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></li>
';
          }


          if(r[2].toLowerCase() === posttitle) {
          var img  = new Array();

            var posturl;
            var category = '<a class="post-category" href="/search/label/'+e.feed.entry[i].category[0].term+'?max-results=7">'+e.feed.entry[i].category[0].term+'</a>';  

            for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
            }

            if ("content" in entry) {
              var postcontent = entry.content.$t;
            }

            s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

            if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

            var tmb = img[i].replace('s1600/','s500-c/');

var trtd3 = '<li class="top-box-item" style="background: url('+ tmb +') no-repeat center;background-size: cover">'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></li>
';
          }

          if(r[3].toLowerCase() === posttitle) {
          var img  = new Array();

            var posturl;
            var category = '<a class="post-category" href="/search/label/'+e.feed.entry[i].category[0].term+'?max-results=7">'+e.feed.entry[i].category[0].term+'</a>';  

            for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
            }

            if ("content" in entry) {
              var postcontent = entry.content.$t;
            }

            s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

            if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

            var tmb = img[i].replace('s1600/','s500-c/');

         var trtd4 = '<li class="top-box-item" style="background: url('+ tmb +') no-repeat center;background-size: cover">'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></li>
';

          }

          if(r[4].toLowerCase() === posttitle) {
            var img  = new Array();

            var posturl;
            var category = '<a class="post-category" href="/search/label/'+e.feed.entry[i].category[0].term+'?max-results=7">'+e.feed.entry[i].category[0].term+'</a>';  

            for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
            }

            if ("content" in entry) {
              var postcontent = entry.content.$t;
            }

            s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

            if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

            var tmb = img[i].replace('s1600/','s500-c/');

            var trtd5 = '<li class="bottom-box-item" style="background: url('+ tmb +') no-repeat center;background-size: cover">'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></li>
';
          }

          if(r[5].toLowerCase() === posttitle) {
            var img  = new Array();

            var posturl;
            var category = '<a class="post-category" href="/search/label/'+e.feed.entry[i].category[0].term+'?max-results=7">'+e.feed.entry[i].category[0].term+'</a>';  

            for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
            }

            if ("content" in entry) {
              var postcontent = entry.content.$t;
            }

            s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

            if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

            var tmb = img[i].replace('s1600/','s500-c/');

            var trtd6 = '<li class="bottom-box-item" style="background: url('+ tmb +') no-repeat center;background-size: cover">'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></li>
';
          }

          if(r[6].toLowerCase() === posttitle) {
            var img  = new Array();

            var posturl;
            var category = '<a class="post-category" href="/search/label/'+e.feed.entry[i].category[0].term+'?max-results=7">'+e.feed.entry[i].category[0].term+'</a>';  

            for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
            }

            if ("content" in entry) {
              var postcontent = entry.content.$t;
            }

            s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

            if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

            var tmb = img[i].replace('s1600/','s500-c/');

            var trtd7 = '<li class="bottom-box-item" style="background: url('+ tmb +') no-repeat center;background-size: cover">'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></li>
';
          }


        }

        if(wdbloogTitle === "wdbloog3") {
          wdbloog.html('<ul class="top-box-wrapper clearfix">' + trtd1 + trtd2 + trtd3 + trtd4 + '</ul>
<ul class="bottom-box-wrapper clearfix">' + trtd5 + trtd6 + trtd7 + '</ul>
');
        } else if (wdbloogTitle === "wdbloog4") {
          wdbloog.html('<ul class="bottom-box-wrapper clearfix">' + trtd5 + trtd6 + trtd7 + '</ul>
' + '<ul class="top-box-wrapper clearfix">' + trtd1 + trtd2 + trtd3 + trtd4 + '</ul>
');
        } 
      }

      });
  } else if(wdbloogContent.match("random")) {

      $.ajax({
      url: "/feeds/posts/default?alt=json-in-script",
      type: "get",
      dataType: "jsonp",
      success: function (e) {

        var entryLength = e.feed.entry.length,
            a = entryLength - 5,
            n = Math.floor(Math.random() * (a + 1));

        $.ajax({
          url: "/feeds/posts/default?alt=json-in-script&end-index=" + n + "",
          type: "get",
          dataType: "jsonp",
          success: function (e) {

            var img  = new Array();

          for (var i = 0; i < 7; i++) {
            var entry = e.feed.entry[n+i];
            var posttitle = entry.title.$t;
            var posturl;
          
            var category = '<a class="post-category" href="/search/label/'+e.feed.entry[i].category[0].term+'?max-results=7">'+e.feed.entry[i].category[0].term+'</a>';  
         
            for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
            }

            if ("content" in entry) {
              var postcontent = entry.content.$t;
            }

            s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

            if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[n] = d;

            var tmb = img[n].replace('s1600/','s500-c/');

            if(i===0) {
              var trtd1 = '<li class="top-box-item" style="background: url('+ tmb +') no-repeat center;background-size: cover">'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></li>
';
            }

            if(i===1) {
              var trtd2 = '
<li class="top-box-item" style="background: url('+ tmb +') no-repeat center;background-size: cover">'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></li>
';
            }

            if(i===2) {
              var trtd3 = '
<li class="top-box-item" style="background: url('+ tmb +') no-repeat center;background-size: cover">'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></li>
';
            }

            if(i===3) {
              var trtd4 = '
<li class="top-box-item" style="background: url('+ tmb +') no-repeat center;background-size: cover">'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></li>
';
            }

            if(i===4) {
              var trtd5 = '
<li class="bottom-box-item" style="background: url('+ tmb +') no-repeat center;background-size: cover">'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></li>
';
            }

            if(i===5) {
              var trtd6 = '
<li class="bottom-box-item" style="background: url('+ tmb +') no-repeat center;background-size: cover">'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></li>
';
            }

            if(i===6) {
              var trtd7 = '
<li class="bottom-box-item" style="background: url('+ tmb +') no-repeat center;background-size: cover">'+ category +'<a href="'+ posturl +'" class="wdbloog-post-title"><h3 class="heading">
'+ posttitle +'</h3>
</a></li>
';
            }

          }
          if(wdbloogTitle === "wdbloog3") {
            wdbloog.html('<ul class="top-box-wrapper clearfix">' + trtd1 + trtd2 + trtd3 + trtd4 + '</ul>
<ul class="bottom-box-wrapper clearfix">' + trtd5 + trtd6 + trtd7 + '</ul>
');
          } else if (wdbloogTitle === "wdbloog4") {
            wdbloog.html('<ul class="bottom-box-wrapper clearfix">' + trtd5 + trtd6 + trtd7 + '</ul>
' + '<ul class="top-box-wrapper clearfix">' + trtd1 + trtd2 + trtd3 + trtd4 + '</ul>
');
          } 

        }

        });

      }
    });

}

  } /* if(wdbloogTitle === "wdbloog3") */

// ]]>
</script>

3 - ندخول الى التخطيط >> ثم اضافة اداة >> ونضع هذا الكود واحسن مكان يكون فوق " رسائل المدونة الإلكترونية " .
تحميل الكود من هنا : DOWNLOAD

كيفية تركيب سلايد شو على مدونتك الاصدار الثاني :

1 - دخول الى القالب >> تحرير html >> افتح محرك البحث عن الاكواد CTRL+F >> ونبحث عن امر ]]></b:skin> ونضع الكود فوقها مباشرة .

/*Slider*/
.slider-wrapper {padding-top: 0px;padding-bottom: 0px;}
.slider-small-container * {transition: all 0.2s ease-in-out;}
.slider-small-container {position: relative;float: left;width: 24.491525424%;}
.slider-small-wrapper {overflow: hidden;max-height: 400px;}
.slider-big-box {float: right;width: 75.508474576%;height: 400px;position: relative}
.slider-big-box:after {content: '';position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0,0,0,0.7);background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.7) 0, transparent 100%); /* Chrome10+,Safari5.1+ */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1301FE', endColorstr='#F4F60C', 
GradientType='1'); /* for IE */background: linear-gradient(0deg, rgba(0,0,0,0.7) 0, transparent 100%);/* W3C */}
.slider-image-wrapper {height: 400px;}
ul.slider-post-info {padding: 15px;position: relative;z-index: 3;}
li.slider-post-info-item {float: right;margin-left: 5px;text-align: center;font-size: 0.875rem;}
a.slider-post-info-a {display: block;width: 69px;padding: 10px;box-sizing: content-box;color: #fff;}
.slider-post-comments {background-color: #04A06B;}
.slider-post-category  {background-color: #3a3a3a;}
.slider-post-date {background-color: #E4860D;}
li.slider-post-info-item i {font-size: 1.2rem;margin-bottom: 6px;}
.title-and-summary {position: absolute;bottom: 15px;right: 25px;left: 50px;color: #fff;z-index: 3;}
.slider-big-box h2.heading {margin-bottom: 20px;font-family: 'Droid Arabic Kufi' , serif; 'Roboto Slab', sans-serif;font-size: 2.2rem;font-weight: 700;text-transform: capitalize;font-size: 25px;}
.slider-small-box .slider-post-title {position: absolute;top: 0;bottom: 0;right: 0;left: 0;color: #fff;font-family: 'Droid Arabic Kufi' , serif; 'Roboto Slab', serif;text-transform: capitalize;font-weight: 700;line-height: 1.7;z-index: 3;}
.slider-small-box h2.heading {position: absolute;bottom: 19px;right: 12px;left: 12px;}
li.slider-small-items {height: 200px;position: relative;font-weight: 700;text-transform: capitalize;line-height: 1.6;}
.slider-small-items:after {content: '';position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0,0,0,0.7);background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.7) 0, transparent 100%); /* Chrome10+,Safari5.1+ */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1301FE', endColorstr='#F4F60C', 
GradientType='1'); /* for IE */background: linear-gradient(0deg, rgba(0,0,0,0.7) 0, transparent 100%);/* W3C */}
button#up, button#down {position: absolute;z-index: 10;left: 50%;margin-left: -15px;width: 30px;height: 30px;background: #E4860D;border: 0;color: #fff;font-size: 1.2rem;cursor: pointeroutline: 0;}
button#up {top: 0px;}
button#down {bottom: 0px;}
button#up:hover, button#down:hover {background: #555;}

2 - ابحث عن أمر </body> وضع الكود فوقه مباشرة :

<script>
//<![CDATA[

/* Slider Widget
--------------------------------------*/

  var numOfSliderPosts = 8;
  var slider = $('#slider .widget-content');
  var sliderContent = slider.text().trim();
  slider.addClass('clearfix');

  if((sliderContent.toLowerCase() !== 'no') && (sliderContent !== '"no"')) {
    $.ajax({
      url: "/feeds/posts/default/-/"+ sliderContent +"?alt=json-in-script&max-results="+ numOfSliderPosts +"",
      type: "get",
      dataType: "jsonp",
      success: function (e) {

        var img  = new Array();
        var trtd2 = '';  
        var numOfEntries = e.feed.entry.length;
        
        for (var i = 0; i < numOfEntries; i++) {
          var entry = e.feed.entry[i];
          var posttitle = entry.title.$t;
          var posturl;

          for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'alternate') {
              posturl = entry.link[k].href;
              break;
            }
          }

          if ("content" in entry) {
            var postcontent = entry.content.$t;
          }

          s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

          if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

          var tmb = img[i].replace('s1600/','w891-h555-c/');

          if(i===0) {

            var category = '<a class="slider-post-category slider-post-info-a" href="/search/label/'+ entry.category[0].term +'?max-results=7"><i class="fa fa-tags"></i><br/>'+entry.category[0].term+'</a>';

            var post_comments;
            var comment_url;

            for (var k = 0; k < entry.link.length; k++) {
              if ((entry.link[k].rel === 'replies') && (entry.link[k].type === 'text/html')) {
                post_comments = entry.link[k].title;
                comment_url = entry.link[k].href;
                break;
              }
            } 

            post_comments = parseInt(post_comments, 10);

            var postdate = entry.published.$t;
            var day = postdate.split("-")[2].substring(0,2);
            var m = postdate.split("-")[1];
            var y = postdate.split("-")[0];
            var daystr = day+ '.' + m + '.' + y;

            var summary = postcontent.replace(/<.+?>/g, '').substring(0, 200) + "...";

            var postInfo= '<ul class="slider-post-info">
<li class="slider-post-info-item"><a class="slider-post-date slider-post-info-a"><i class="fa fa-calendar"></i><br/>'+ daystr +'</a></li>
<li class="slider-post-info-item"><a class="slider-post-comments slider-post-info-a" href="'+ comment_url +'"><i class="fa fa-comments"></i><br/>'+ post_comments +'</a></li>
<li class="slider-post-info-item">'+ category +'</li>
</ul>
'

            var trtd1 = '<div class="slider-big-box">
<div class="slider-image-wrapper" href="'+ posturl +'" style="background: url('+ tmb +') no-repeat center;background-size: cover">
'+ postInfo +'<div class="title-and-summary">
<a href="'+ posturl +'" class="slider-post-title"><h2 class="heading">
'+ posttitle +'</h2>
</a><p class="slider-post-summary">
'+ summary +'</p>
</div>
</div>
</div>
';
          }
          else
          {
            var trtd2 = trtd2 + '
<li class="slider-small-items" style="background: url('+ tmb +') no-repeat center;background-size: cover"><a href="'+ posturl +'" class="slider-post-title"><h2 class="heading">
'+ posttitle +'</h2>
</a></li>
';
          }

        }

        if(numOfSliderPosts > 4) {
          slider.html(trtd1 + '<div class="slider-small-container clearfix">
<button id="up"><i class="fa fa-chevron-up"></i></button><button id="down"><i class="fa fa-chevron-down"></i></button><div class="slider-small-wrapper">
<ul class="slider-small-box">' + trtd2 + '</ul>
</div>
</div>
');
        } else {
          slider.html(trtd1 + '<div class="slider-small-container clearfix">
<div class="slider-small-wrapper">
<ul class="slider-small-box">' + trtd2 + '</ul>
</div>
</div>
');
        } 
      }
    });
  } else {
    $(".slider-wrapper").remove()
  }

/* Must Read Widget
--------------------------------------*/

  var mustReadSection = $('#must-read .widget-content');
  var mustReadContent = mustReadSection.text().trim();

  if((mustReadContent.toLowerCase() !== 'no') && (mustReadContent !== '"no"')) {
    $.ajax({
      url: "/feeds/posts/default/-/"+ mustReadContent +"?alt=json-in-script&max-results=4",
      type: "get",
      dataType: "jsonp",
      success: function (e) {

        var img  = new Array();
        var trtd = '';  
        var numOfEntries = e.feed.entry.length;

        for (var i = 0; i < numOfEntries; i++) {
          var entry = e.feed.entry[i];
          var posttitle = entry.title.$t;
          var posturl;

          for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'alternate') {
              posturl = entry.link[k].href;
              break;
            }
          }

          if ("content" in entry) {
            var postcontent = entry.content.$t;
          }

          s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

          if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

          var tmb = img[i].replace('s1600/','w500-h500-c/');

          var post_comments;
          var comment_url;

          for (var k = 0; k < entry.link.length; k++) {
            if ((entry.link[k].rel === 'replies') && (entry.link[k].type === 'text/html')) {
              post_comments = entry.link[k].title;
              comment_url = entry.link[k].href;
              break;
            }
          } 

          post_comments = parseInt(post_comments, 10);

          var postdate = entry.published.$t;
          var day = postdate.split("-")[2].substring(0,2);
          var m = postdate.split("-")[1];
          var y = postdate.split("-")[0];
          var daystr = day+ '.' + m + '.' + y;

          var summary = postcontent.replace(/<.+?>/g, '').substring(0, 90) + "...";

          var trtd = trtd + '
<li class="must-read-item"><a href="'+ posturl +'" class="must-read-image" style="background: url('+ tmb +') no-repeat center; background-size: cover;"></a><a href="'+ posturl +'" class="must-read-title"><h2 class="heading">
'+ posttitle +'</h2>
</a><p class="must-read-summary">
'+ summary +'</p>
<div class="must-read-info">
<span class="publish-date"><i class="fa fa-clock-o icon"></i>'+ daystr +'</span><a class="comments" href="'+comment_url +'"><i class="fa fa-comment icon"></i>'+ post_comments +'</a></div>
</li>
';

        }
        mustReadSection.html("<ul class='must-read-posts clearfix'>" + trtd + "</ul>
");
      }

    });
  } else {
    $(".must-read-wrapper").remove();
    $(".slider-wrapper").css({
      "background": "#fff",
      "border-bottom": "2px solid #ccc"
    });
  }

//]]>  
</script>

3 - ندخول الى التخطيط >> ثم اضافة اداة >> ونضع هذا الكود واحسن مكان يكون فوق " رسائل المدونة الإلكترونية " .

تحميل الكود من هنا : DOWNLOAD

وهكذا ننتهي من شرح كيفية تركيب السلايد في المدونة و نسال الله ان ينفعني واياكم بما علمنا وعلمنا .