≡

ركب سلايدر slider لعرض التدوينات للبلوجر .


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

طريقة حفظ نسخة من قالب مدونتك .



الآن طريقة تركيب السلايدر لمدونة بلوجر .


1- سجل الدخول لموقع البلوجر : www.blogger.com
  • أدخل لوحة تحكم البلوجر ثم اضغط على تعديل القالب كما في الصور أدناه .

 
  • ستظهر لك صفحة قم بما ورد في الصورة أدناه
  •  بعدها ستظهر لك صفحة تحمل كود HTML ، اضغط على CTRL+F لتوليد اضافة البحث يمكن استعملها للبحث عن الأكواد أنظر الصورة أدناه .

    2- تركيب أكواد HTML السلايدر لقالب البلوجر :
    • ابحث عن الكود ]]></b:skin> وضع فوقه مباشرة الكود التالي : 
      /* Slide Content
----------------------------------------------- */
.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
word-wrap: break-word; overflow: hidden;} 
.slide {color: #666666;line-height: 1.3em;}
.slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.slide li {margin:0;padding-top:0;
padding-right:0;padding-bottom:.25em;
padding-left:0px;text-indent:0px;line-height:1.3em;}
.slide .widget {margin:0px 0px 6px 0px;}
  • الآن عليك بالبحث عن هذا الكود <div id='main-wrapper'> و ضع تحته الكود التالي :
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div id='slide-wrapper'>
<b:section class='slide' id='slide' preferred='yes'/>
      </div>
</b:if>
  • نبحث عن كود ]]></b:skin> نلصق الكود التالي فوقه :

    /* Lofslidernews */
    #slider{background-color:#e2e2e2;background-image: -moz-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -ms-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -o-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#f6f6f6),color-stop(100%,#e2e2e2)); background-image: -webkit-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: linear-gradient(to bottom,#f6f6f6 0,#e2e2e2 100%);
    border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border:1px solid #999;box-shadow:0 0 4px #888;-moz-box-shadow:0 0 4px #888;-webkit-box-shadow:0 0 4px #888;padding:10px;margin:4px;position:relative;overflow:hidden;width:600px;height:298px;}
    .slider-main-outer{position:relative;height:100%;width:400px;z-index:3;overflow:hidden}
    ul.slider-main-wapper li h3{z-index:10;position:absolute;bottom:-14px;width:385px;background:url(http://4.bp.blogspot.com/-bp2HK6MdDXg/T5aB6vI5GPI/AAAAAAAAF98/gwCsmb8Fcks/s1600/transparant.png);padding:10px}
    ul.slider-main-wapper li h3 p{color:#FFF;font-size:12px;padding-top:5px;display:block;margin:0}
    ul.slider-main-wapper li h3 a{color:#FFF;font-size:16px;line-height:25px;margin:0}
    ul.slider-main-wapper li .imgauto{width:405px;height:298px;overflow:hidden;margin:0;padding:0}
    ul.slider-main-wapper{height:298px;width:405px;position:absolute;overflow:hidden;margin:0;padding:0}
    ul.slider-main-wapper li{overflow:hidden;list-style:none;height:100%;width:405px;float:left;margin:0;padding:0}
    .slider-opacity li{position:absolute;top:0;left:0;float:inherit}
    ul.slider-main-wapper li img{list-style:none;width:405px;height:auto;padding:0}
    ul.slider-navigator{top:0;position:absolute;width:100%;margin:0;padding:0}
    ul.slider-navigator li{cursor:pointer;list-style:none;width:100%;overflow:hidden;margin:0;padding:0}
    .slider-navigator-outer{position:absolute;right:10px;top:10px;z-index:10;height:300px;width:200px;overflow:hidden;color:#333}
    .slider-navigator li h5{color:#333;font:11px Arial;margin:0;padding:5px 10px 0 0}
    .slider-navigator li div{background-color:#e2e2e2;background-image: -moz-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -ms-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -o-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e2e2e2)); background-image: -webkit-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: linear-gradient(to bottom,#fff 0,#e2e2e2 100%)color:#444;text-shadow:1px 1px 1px #fff;height:56px;position:relative;margin:0px 0px 3px 10px;padding:0 5px;border:1px solid #c0c0c0;}
    .slider-navigator li.active div,.slider-navigator li:hover div{color:#0178d3;border:1px solid #999}
    .slider-navigator li img{border:#ddd solid 1px;height:44px;width:60px;float:left;margin:5px 5px 5px 0}
    .slider-navigator li.active img{border:#eee solid 1px}
    .slider-navigator li.active h5{color:#0178d3}
    - الكود باللون الأحمر في الأعلى في بداية الكود لتغيير أحجام السلايدر . 

    •   مرة أخرى نبحث عن كود </head> و نلصق فوقه الكود التالي :
      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
      <script src='http://yourjavascript.com/24211643151/jquery.easing.js' type='text/javascript'/>
      <script type='text/javascript'>
      //<![CDATA[

      (function($) {

      var types = ['DOMMouseScroll', 'mousewheel'];

      $.event.special.mousewheel = {
          setup: function() {
              if ( this.addEventListener )
                  for ( var i=types.length; i; )
                      this.addEventListener( types[--i], handler, false );
              else
                  this.onmousewheel = handler;
          },
         
          teardown: function() {
              if ( this.removeEventListener )
                  for ( var i=types.length; i; )
                      this.removeEventListener( types[--i], handler, false );
              else
                  this.onmousewheel = null;
          }
      };

      $.fn.extend({
          mousewheel: function(fn) {
              return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
          },
         
          unmousewheel: function(fn) {
              return this.unbind("mousewheel", fn);
          }
      });


      function handler(event) {
          var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
         
          event = $.event.fix(event || window.event);
          event.type = "mousewheel";
         
          if ( event.wheelDelta ) delta = event.wheelDelta/120;
          if ( event.detail     ) delta = -event.detail/3;
         
          // Add events and delta to the front of the arguments
          args.unshift(event, delta);

          return $.event.handle.apply(this, args);
      }

      })(jQuery);

      /**
       * @version        $Id:  $Revision
       * @package        jquery
       * @subpackage    lofslidernews
       * @copyright    Copyright (C) JAN 2010 LandOfCoder.com <@emai:landofcoder@gmail.com>. All rights reserved.
       * @website     http://landofcoder.com
       * @license        This plugin is dual-licensed under the GNU General Public License and the MIT License
       */
      // JavaScript Document
      (function($) {
           $.fn.lofJSidernews = function( settings ) {
               return this.each(function() {
                  // get instance of the lofSiderNew.
                  new  $.lofSidernews( this, settings );
              });
            }
           $.lofSidernews = function( obj, settings ){
              this.settings = {
                  direction            : '',
                  mainItemSelector    : 'li',
                  navInnerSelector    : 'ul',
                  navSelector          : 'li' ,
                  navigatorEvent        : 'click',
                  wapperSelector:     '.slider-main-wapper',
                  interval               : 4000,
                  auto                : true, // whether to automatic play the slideshow
                  maxItemDisplay         : 5,
                  startItem            : 0,
                  navPosition            : 'vertical',
                  navigatorHeight        : 60,
                  navigatorWidth        : 210,
                  duration            : 600,
                  navItemsSelector    : '.slider-navigator li',
                  navOuterSelector    : '.slider-navigator-outer' ,
                  isPreloaded            : true,
                  easing                : 'easeInOutQuad'
              }   
              $.extend( this.settings, settings ||{} );   
              this.nextNo         = null;
              this.previousNo     = null;
              this.maxWidth  = this.settings.mainWidth || 600;
              this.wrapper = $( obj ).find( this.settings.wapperSelector );   
              this.slides = this.wrapper.find( this.settings.mainItemSelector );
              if( !this.wrapper.length || !this.slides.length ) return ;
              // set width of wapper
              if( this.settings.maxItemDisplay > this.slides.length ){
                  this.settings.maxItemDisplay = this.slides.length;   
              }
              this.currentNo      = isNaN(this.settings.startItem)||this.settings.startItem > this.slides.length?0:this.settings.startItem;
              this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );   
              this.navigatorItems = $( obj ).find( this.settings.navItemsSelector ) ;
              this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );
             
              if( this.settings.navPosition == 'horizontal' ){
                  this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth );
                  this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth );
                  this.navigatorOuter.height(    this.settings.navigatorHeight );
                 
              } else {
                  this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight );   
                 
                  this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );
                  this.navigatorOuter.width(    this.settings.navigatorWidth );
              }       
              this.navigratorStep = this.__getPositionMode( this.settings.navPosition );       
              this.directionMode = this.__getDirectionMode(); 
             
             
              if( this.settings.direction == 'opacity') {
                  this.wrapper.addClass( 'slider-opacity' );
                  $(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);
              } else {
                  this.wrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );
              }

             
              if( this.settings.isPreloaded ) {
                  this.preLoadImage( this.onComplete );
              } else {
                  this.onComplete();
              }
             
           }
           $.lofSidernews.fn =  $.lofSidernews.prototype;
           $.lofSidernews.fn.extend =  $.lofSidernews.extend = $.extend;
         
           $.lofSidernews.fn.extend({
                                   
              startUp:function( obj, wrapper ) {
                  seft = this;

                  this.navigatorItems.each( function(index, item ){
                      $(item).click( function(){
                          seft.jumping( index, true );
                          seft.setNavActive( index, item );                   
                      } );
                      $(item).css( {'height': seft.settings.navigatorHeight, 'width':  seft.settings.navigatorWidth} );
                  })
                  this.registerWheelHandler( this.navigatorOuter, this );
                  this.setNavActive(this.currentNo );
                 
                  if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){
                      this.registerButtonsControl( 'click', this.settings.buttons, this );

                  }
                  if( this.settings.auto )
                  this.play( this.settings.interval,'next', true );
                 
                  return this;
              },
              onComplete:function(){
                  setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 );    this.startUp( );
              },
              preLoadImage:function(  callback ){
                  var self = this;
                  var images = this.wrapper.find( 'img' );
         
                  var count = 0;
                  images.each( function(index,image){
                      if( !image.complete ){                 
                          image.onload =function(){
                              count++;
                              if( count >= images.length ){
                                  self.onComplete();
                              }
                          }
                          image.onerror =function(){
                              count++;
                              if( count >= images.length ){
                                  self.onComplete();
                              }   
                          }
                      }else {
                          count++;
                          if( count >= images.length ){
                              self.onComplete();
                          }   
                      }
                  } );
              },
              navivationAnimate:function( currentIndex ) {
                  if (currentIndex <= this.settings.startItem
                      || currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1) {
                          this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;
                          if (this.settings.startItem < 0) this.settings.startItem = 0;
                          if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) {
                              this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;
                          }
                  }       
                  this.navigatorInner.stop().animate( eval('({'+this.navigratorStep[0]+':-'+this.settings.startItem*this.navigratorStep[1]+'})'),
                                                      {duration:500, easing:'easeInOutQuad'} );   
              },
              setNavActive:function( index, item ){
                  if( (this.navigatorItems) ){
                      this.navigatorItems.removeClass( 'active' );
                      $(this.navigatorItems.get(index)).addClass( 'active' );   
                      this.navivationAnimate( this.currentNo );   
                  }
              },
              __getPositionMode:function( position ){
                  if(    position  == 'horizontal' ){
                      return ['left', this.settings.navigatorWidth];
                  }
                  return ['top', this.settings.navigatorHeight];
              },
              __getDirectionMode:function(){
                  switch( this.settings.direction ){
                      case 'opacity': this.maxSize=0; return ['opacity','opacity'];
                      default: this.maxSize=this.maxWidth; return ['left','width'];
                  }
              },
              registerWheelHandler:function( element, obj ){
                   element.bind('mousewheel', function(event, delta ) {
                      var dir = delta > 0 ? 'Up' : 'Down',
                          vel = Math.abs(delta);
                      if( delta > 0 ){
                          obj.previous( true );
                      } else {
                          obj.next( true );
                      }
                      return false;
                  });
              },
              registerButtonsControl:function( eventHandler, objects, self ){
                  for( var action in objects ){
                      switch (action.toString() ){
                          case 'next':
                              objects[action].click( function() { self.next( true) } );
                              break;
                          case 'previous':
                              objects[action].click( function() { self.previous( true) } );
                              break;
                      }
                  }
                  return this;   
              },
              onProcessing:function( manual, start, end ){            
                  this.previousNo = this.currentNo + (this.currentNo>0 ? -1 : this.slides.length-1);
                  this.nextNo     = this.currentNo + (this.currentNo < this.slides.length-1 ? 1 : 1- this.slides.length);               
                  return this;
              },
              finishFx:function( manual ){
                  if( manual ) this.stop();
                  if( manual && this.settings.auto ){
                      this.play( this.settings.interval,'next', true );
                  }       
                  this.setNavActive( this.currentNo );   
              },
              getObjectDirection:function( start, end ){
                  return eval("({'"+this.directionMode[0]+"':-"+(this.currentNo*start)+"})");   
              },
              fxStart:function( index, obj, currentObj ){
                      if( this.settings.direction == 'opacity' ) {
                          $(this.slides).stop().animate({opacity:0}, {duration: this.settings.duration, easing:this.settings.easing} );
                          $(this.slides).eq(index).stop().animate( {opacity:1}, {duration: this.settings.duration, easing:this.settings.easing} );
                      }else {
                          this.wrapper.stop().animate( obj, {duration: this.settings.duration, easing:this.settings.easing} );
                      }
                  return this;
              },
              jumping:function( no, manual ){
                  this.stop();
                  if( this.currentNo == no ) return;       
                   var obj = eval("({'"+this.directionMode[0]+"':-"+(this.maxSize*no)+"})");
                  this.onProcessing( null, manual, 0, this.maxSize )
                      .fxStart( no, obj, this )
                      .finishFx( manual );   
                      this.currentNo  = no;
              },
              next:function( manual , item){

                  this.currentNo += (this.currentNo < this.slides.length-1) ? 1 : (1 - this.slides.length);   
                  this.onProcessing( item, manual, 0, this.maxSize )
                      .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
                      .finishFx( manual );
              },
              previous:function( manual, item ){
                  this.currentNo += this.currentNo > 0 ? -1 : this.slides.length - 1;
                  this.onProcessing( item, manual )
                      .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
                      .finishFx( manual    );           
              },
              play:function( delay, direction, wait ){   
                  this.stop();
                  if(!wait){ this[direction](false); }
                  var self  = this;
                  this.isRun = setTimeout(function() { self[direction](true); }, delay);
              },
              stop:function(){
                  if (this.isRun == null) return;
                  clearTimeout(this.isRun);
                  this.isRun = null;
              }
          })
      })(jQuery)

       //]]>
      </script>
      <script type='text/javascript'>
      //<![CDATA[
      imgr = new Array();
      imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
      showRandomImg = true;
      aBold = true;
      summaryPost = 70;
      summaryTitle = 20;

      numposts = 10;

      function removeHtmlTag(strx,chop){
          var s = strx.split("<");
          for(var i=0;i<s.length;i++){
              if(s[i].indexOf(">")!=-1){
                  s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
              }
          }
          s =  s.join("");
          s = s.substring(0,chop-1);
          return s;
      }

      function showrecentposts(json) {
          j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
          img  = new Array();

            for (var i = 0; i < numposts; i++) {
              var entry = json.feed.entry[i];
              var posttitle = entry.title.$t;
              var pcm;
              var posturl;
              if (i == json.feed.entry.length) break;
              for (var k = 0; k < entry.link.length; k++) {
                    if (entry.link[k].rel == 'alternate') {
                      posturl = entry.link[k].href;
                      break;
                    }
              }
             
              for (var k = 0; k < entry.link.length; k++) {
                    if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                      pcm = entry.link[k].title.split(" ")[0];
                      break;
                    }
              }
             
              if ("content" in entry) {
                    var postcontent = entry.content.$t;}
              else
              if ("summary" in entry) {
                    var postcontent = entry.summary.$t;}
              else var postcontent = "";
             
              postdate = entry.published.$t;
         
          if(j>imgr.length-1) j=0;
          img[i] = imgr[j];
         
          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;

          //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


          var month = [1,2,3,4,5,6,7,8,9,10,11,12];
          var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

          var day = postdate.split("-")[2].substring(0,2);
          var m = postdate.split("-")[1];
          var y = postdate.split("-")[0];

          for(var u2=0;u2<month.length;u2++){
              if(parseInt(m)==month[u2]) {
                  m = month2[u2] ; break;
              }
          }

          var daystr = day+ ' ' + m + ' ' + y ;
         
          var trtd = '<li style="position:relative;"><div class="imgauto"><a href="'+posturl+'"><img width="405" height="298" class=" " src="'+img[i]+'"/></a></div><h3><a href="'+posturl+'">'+posttitle+'</a><p>'+daystr+' / '+pcm+' comments</p></h3></li>';                   
              document.write(trtd);      
                     
                    j++;
          }
         
      }


      function showrecentposts1(json) {
          j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
          img  = new Array();
         
            for (var i = 0; i < numposts; i++) {
              var entry = json.feed.entry[i];
              var posttitle = entry.title.$t;
              var pcm;
              var posturl;
              if (i == json.feed.entry.length) break;
              for (var k = 0; k < entry.link.length; k++) {
                    if (entry.link[k].rel == 'alternate') {
                      posturl = entry.link[k].href;
                      break;
                    }
              }
             
              for (var k = 0; k < entry.link.length; k++) {
                    if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                      pcm = entry.link[k].title.split(" ")[0];
                      break;
                    }
              }
             
              if ("content" in entry) {
                    var postcontent = entry.content.$t;}
              else
              if ("summary" in entry) {
                    var postcontent = entry.summary.$t;}
              else var postcontent = "";
             
              postdate = entry.published.$t;
         
          if(j>imgr.length-1) j=0;
          img[i] = imgr[j];
         
          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;

          //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


          var month = [1,2,3,4,5,6,7,8,9,10,11,12];
          var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

          var day = postdate.split("-")[2].substring(0,2);
          var m = postdate.split("-")[1];
          var y = postdate.split("-")[0];

          for(var u2=0;u2<month.length;u2++){
              if(parseInt(m)==month[u2]) {
                  m = month2[u2] ; break;
              }
          }

          var daystr = day+ ' ' + m + ' ' + y ;
         
          var trtd = '<li><div><img width="60" height="44" class="alignnone" src="'+img[i]+'"/><h5>'+posttitle+'</h5></div></li>';                   
              document.write(trtd);      
                     
                    j++;
          }
         
      }

       //]]>
      </script>


        • نضغط حفظ القالب .


        3- اضافة صندوق HTML للقالب :
        •  أدخل لوحة التحكم واضغط على تعديل الصفحة كما في الصورة أدناه ،


      •  اضافة صندوق HTML جديد كما في الصور أدناه ،



        • ألصق الكود التالي كما في الصورة أدناه .

          <div class='lof-main-wapper' id='slider'>
          <div class='slider-main-outer'>
          <ul class='slider-main-wapper'>
          <script>                   
          document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
          </script>
          </ul>
          </div>
          <div class='slider-navigator-outer'>
          <ul class='slider-navigator'>
          <script>                   
          document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
          </script>
          </ul>
          </div>
          </div>
          <script type='text/javascript'>
          jQuery(document).ready(function($){   
              $('#slider').lofJSidernews({
                  interval:6000,
                  duration:800,
                  mainWidth: 405,
                  navigatorWidth: 200,
                  maxItemDisplay:5,
                  easing:'easeInOutQuad',
                  auto:true,
                  isPreloaded: false
              });
          });   
          </script>


           

















          أنظر للكود باللون الأحمر غيره بنوع التصنيف التدوينات التي تريد تظهر بالسلايدر .

          4- شارك التدوينة مع أصدقائك ان أعجبتك .





جديد قسم : دعم بلوجر

تعليقات: 0

إرسال تعليق