الأحد، 4 مارس 2018

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

سلايدر لعرض التدوينات المميزة



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


 نعود لكم بتدوينة جديدة نقدم لكم سلايدر يركب بالسيد بار تقوم
وظيفته على ابراز مجموعة من التدوينات
المميزة والتي لم تعد تظهر في الصفحة الرئيسية





طريقة التركيب:

    1. توجه الى التخطيط ثم اضف اداة html/javascript (بالسايد بار)
    2. ضع كود التالي داخل الاداة


      <style>
      #sliderisw-wrap{
       width:100%;
       height:320px;
       position:relative;
       overflow:hidden;
      }
      
      #sliderisw-wrap ul#sliderisw{
       width:100%;
       height:100%;
       
       position:absolute;
       top:0;
       left:0;  
      }
      
      #sliderisw-wrap ul#sliderisw li{
       float:left;
       position:relative;
       width:365px;
       height:400px; 
      height: 100%;
      }
      
      #sliderisw-wrap ul#sliderisw li > div{
       position:absolute;
       top:20px;
       right:35px; 
        text-align: right;
      }
      
      #sliderisw-wrap ul#sliderisw li > div h3{
       font-size:25px;
       text-transform:uppercase; 
      background: transparent;
      }
      
      #sliderisw-wrap ul#sliderisw li > div span{
       font-family: "Droid Arabic Kufi", sans serif;
       font-size:16px;
      }
      
      #sliderisw-wrap ul#sliderisw li i{
       text-align:center;
       line-height:400px;
       display:block;
       width:100%;
       font-size:90px; 
      }
      
      
      /*btns*/
      .btns{
       position:absolute;
       width:50px;
       height:60px;
       top:50%;
       margin-top:-25px;
       line-height:57px;
       text-align:center;
       cursor:pointer; 
       background:rgba(0,0,0,0.1);
       z-index:100;
       
       
       -webkit-user-select: none;  
       -moz-user-select: none; 
       -khtml-user-select: none; 
       -ms-user-select: none;
       
       -webkit-transition: all 0.1s ease;
       -moz-transition: all 0.1s ease;
       -o-transition: all 0.1s ease;
       -ms-transition: all 0.1s ease;
       transition: all 0.1s ease;
      }
      
      .btns:hover{
       background:rgba(0,0,0,0.3); 
      }
      
      #next{right:-50px; border-radius:7px 0px 0px 7px;}
      #previous{left:-50px; border-radius:0px 7px 7px 7px;}
      #counter{
       top: 30px; 
       left:35px; 
       width:auto;
       position:absolute;
        font-family: sans-serif;
          font-weight: bold;
      }
      
      #sliderisw-wrap.active #next{right:0px;}
      #sliderisw-wrap.active #previous{left:0px;}
      
      
      /*bar*/
      #pagination-wrap{
       min-width:20px;
       margin-top:280px;
       margin-left: auto; 
       margin-right: auto;
       height:15px;
       position:relative;
       text-align:center;
      }
      
      #pagination-wrap ul {
       width:100%;
      }
      
      #pagination-wrap ul li{
       margin: 0 4px;
          padding: 0;
       display: inline-block;
       width:5px;
       height:5px;
       border-radius:50%;
       background:#fff;
       opacity:0.5;
       position:relative;
        top:0;
        
        
      }
      
      #pagination-wrap ul li.active{
        width:12px;
        height:12px;
        top:3px;
       opacity:1;
       box-shadow:rgba(0,0,0,0.1) 1px 1px 0px; 
      }
      
      
      
      
      
      
      
      
      /*ANIMATION*/
      #sliderisw-wrap ul, #pagination-wrap ul li{
       -webkit-transition: all 0.3s cubic-bezier(1,.01,.32,1);
       -moz-transition: all 0.3s cubic-bezier(1,.01,.32,1);
       -o-transition: all 0.3s cubic-bezier(1,.01,.32,1);
       -ms-transition: all 0.3s cubic-bezier(1,.01,.32,1);
       transition: all 0.3s cubic-bezier(1,.01,.32,1); 
      }
      
      </style>
      <div id="sliderisw-wrap">
          <ul id="sliderisw">
            <li data-color="#1abc9c"><img src="xxxxxxx.png" style="
          width: 100%;
          height: 100%;
          opacity: 0.2;
      ">
              <div>
                <h3>هذا النص مثال #1<h3>
                <span>القسم 1#</span>
      </h3></h3>
              </div>
              <i class="fa fa-image"></i>
            </li>
      
            <li data-color="#3498db"><img src="xxxxxxx.png" style=" width: 100%; height: 100%; opacity: 0.2; ">
              <div>
                <h3>هذا النص مثال #2<h3>
                <span>القسم 2#</span>
      </h3></h3>
              </div>
              <i class="fa fa-gears"></i>
            </li>
      
            <li data-color="#9b59b6"><img src="xxxxxxx.png" style=" width: 100%; height: 100%; opacity: 0.2; ">
              <div>
                <h3>هذا النص مثال #3<h3>
                <span>القسم 3#</span>
              </h3></h3>
              </div>
              <i class="fa fa-sliderisws"></i>
            </li>
      
            <li data-color="#34495e"><img src="xxxxxxx.png" style=" width: 100%; height: 100%; opacity: 0.2; ">
              <div>
                <h3>هذا النص مثال #4<h3>
                <span>القسم 4#</span>
              </h3></h3></div>
              <i class="fa fa-code"></i>
            </li>
      
            <li data-color="#e74c3c"><img src="xxxxxxx.png" style=" width: 100%; height: 100%; opacity: 0.2; ">
              <div>
                <h3>هذا النص مثال #5<h3>
                <span>القسم 5#</span>
      </h3></h3>
              </div>
              <i class="fa fa-microphone-slash"></i>
            </li>
      
          </ul>
      
          <!--controls-->
          <div class="btns" id="next"><i class="fa fa-arrow-right"></i></div>
          <div class="btns" id="previous"><i class="fa fa-arrow-left"></i></div>
          <div id="counter"></div>
      
          <div id="pagination-wrap">
            <ul>
            </ul>
          </div>
          <!--controls-->
      
        </div>
      <script type="text/javascript">
      //current position
      var pos = 0;
      //number of slides
      var totalSlides = $('#sliderisw-wrap ul li').length;
      //get the slide width
      var sliderWidth = $('#sliderisw-wrap').width();
      
      
      $(document).ready(function(){
       
       
       /*****************
        BUILD THE SLIDER
       *****************/
       //set width to be 'x' times the number of slides
       $('#sliderisw-wrap ul#sliderisw').width(sliderWidth*totalSlides);
       
          //next slide  
       $('#next').click(function(){
        slideRight();
       });
       
       //previous slide
       $('#previous').click(function(){
        slideLeft();
       });
       
       
       
       /*************************
        //*> OPTIONAL SETTINGS
       ************************/
       //automatic slider
       var autoSlider = setInterval(slideLeft, 3000);
       
       //for each slide 
       $.each($('#sliderisw-wrap ul li'), function() { 
          //set its color
          var c = $(this).attr("data-color");
          $(this).css("background",c);
          
          //create a pagination
          var li = document.createElement('li');
          $('#pagination-wrap ul').append(li);    
       });
       
       //counter
       countSlides();
       
       //pagination
       pagination();
       
       //hide/show controls/btns when hover
       //pause automatic slide when hover
       $('#sliderisw-wrap').hover(
         function(){ $(this).addClass('active'); clearInterval(autoSlider); }, 
         function(){ $(this).removeClass('active'); autoSlider = setInterval(slideRight, 3000); }
       );
       
       
      
      });//DOCUMENT READY
       
      
      
      /***********
       SLIDE LEFT
      ************/
      function slideRight(){
       pos--;
       if(pos==-1){ pos = totalSlides-1; }
       $('#sliderisw-wrap ul#sliderisw').css('left', -(sliderWidth*pos));  
       
       //*> optional
       countSlides();
       pagination();
      }
      
      
      /************
       SLIDE RIGHT
      *************/
      function slideLeft(){
       pos++;
       if(pos==totalSlides){ pos = 0; }
       $('#sliderisw-wrap ul#sliderisw').css('left', -(sliderWidth*pos)); 
       
       //*> optional 
       countSlides();
       pagination();
      }
      
      
      
       
      /************************
       //*> OPTIONAL SETTINGS
      ************************/
      function countSlides(){
       $('#counter').html(pos+1 + ' / ' + totalSlides);
      }
      
      function pagination(){
       $('#pagination-wrap ul li').removeClass('active');
       $('#pagination-wrap ul li:eq('+pos+')').addClass('active');
      }
        
       
      </script>


        1. ثم قم بتغيير ما يلي                                                 
        2. القسم 1, القسم 2, القسم 3... بتسمية التدوينة
        3. هذا النص مثال بعنوان التدوينة
        4. xxxxxxx.png برابط صورة التدوينة


        1. اذا واجهت اي مشكلة ضعها بتعليق




      EmoticonEmoticon