4 0 4
نعتذر , لا نستطيع ايجاد الصفحة المطلوبة الصفحة الرئيسية

الأحد، 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- احفظ القالب ثم سوف تنتقل لى التخطيط سوف تجد قد تم أضافة اداة جديده سوف تقوم بالضغط على تحرير الأداة ووضع بها التسمية التى تخصك ومبروك عليك السلايد شو الأحتراف .

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

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

هناك 16 تعليقًا :

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

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

      حذف
  2. الردود
    1. انتظر من المزيد من الإضافات الأحترافية

      حذف
  3. رائع عالم المدون

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

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

    ردحذف
    الردود
    1. اوك اخى سوف اقوم بتركيبه لك

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

      حذف

شارك بتعليق على

مواقع صديقة سوف تفيدك
brief useful MAX SEO TOOLS ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا
ALL RIGHTS RESERVED, 2016 WDBLOOG , POWERED BY BLOGGER , DESIGN BY WDBLOOG