سلايد شو حسب التسميات الإصدار الثانى - عالم المدون

الأحد، 20 مارس، 2016

سلايد شو حسب التسميات الإصدار الثانى


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




شرح التركيب 


قم بأخذ نسخة احتياطية من قالب مدونتك قبل التعديل على اى شئ

1- قم بالبحث عن هذا الكود فى القالب ]]></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- وهى الخطوه الأخير فى تركيب السلايد شو وهى عن طريق وضع الكود الخاص بأظهار السلايدر فى أداة HTML/JavaScript سوف تضاف فى القالب بكود ايضا لفعل ذلك نحتاج لإضافة مكان الأداة فوق رسائل المدونة الإلكترونية لكي يظهر السلايدر فوق المواضيع ويكون متناسق .

<div class='slider-wrapper'>
      <b:section class='container' id='slider' maxwidgets='1' showaddelement='yes'>
        <b:widget id='HTML222' locked='false' title='' type='HTML'>
          <b:includable id='main'>
            <!-- only display title if it's non-empty -->
            <b:if cond='data:title != &quot;&quot;'>
              <h2 class='title'><data:title/></h2>
            </b:if>
            <div class='widget-content'>
              <data:content/>
            </div>

            <b:include name='quickedit'/>
          </b:includable>
        </b:widget>
      </b:section>
    </div>


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

السلايد من الممكن ان يختفلف حجمه على حسب قالب المدونة الذى سوف يتم التركيب عليه .

والى هنا ينتهى الشرح اذا واجهتك اى مشكلة فى تركيب السلايد او تريد التعديل على اى شئ فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع :)

شارك الموضوع ليستفيد الجميع

مواضيع مهمه ايضا سوف تعجبك

19 تعليق على موضوع : سلايد شو حسب التسميات الإصدار الثانى

اضافو جميل يا اخي ممكن ترسلها لي

شكرا لك اخى على دعمك

اخى الأضاف هى عبارة عن اكواد تضاف فى القالب ولا تحتاج ان اقم بارسالها لك
فقط تابع الشرح

انتظر من المزيد من الإضافات الأحترافية

اضافة جميل اخي تابع تابع الله يوفقك

ممكن تركيب القالب على مدونتي جزاك الله خيراا

اوك اخى سوف اقوم بتركيبه لك

اخى كما فى المعاينة فأنه يعمل جيد
قم بحذفها واعد تركيب مع متابعة الشرح جيدا

المشكل هوى ID slider و ID html222 اخي كيف اغير الايدي الى ايدي اخر لئنو يوجد اضافة اخرى بنفس الايدي

مشاكلك في الاضافات هي iD اعطيكل اضافة اي دي مختلف حتى لا تقع مشاكل

يوجد أكواد مشفره واذا تم تغيير id لن تعمل الأضافه

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع
الأبتساماتأخفاء الأبتسامات

جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر