سلايد شو بأخر المشاركات تلقائي لمدونات بلوجر والمواقع أحترافي جميل

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

أقدم لكم اليوم سلايدر جميل جدا هذا السلايدر يقوم بإظهار اخر الموضيع لمدونات بلوجر والمواقع المستضافة على بلوجر او ورد برس سلايدر خفيف وسهل التركيب 
تم التحديث بتاريخ 29/03/2015

صورة السلايدر شو 





كيفية اضافة السلايدر الى مدونتك


  • اولا سجل دخول الى مدونتك لوحة التحكم 
  • ثم اضغط على تخطيط وبعدها اضافة أداة 
  • حدد أدوات html/javascript ثم اضف الكود التالي في المكان الذي ترغب بظهور السلايدر فيه


<style scoped="" type="text/css">
.ei-slider{position:relative;width:100%;max-width:1000px;height:250px;margin:0 auto 35px;padding:0;background-color:white}
.ei-slider-loading{width:100%;height:100%;z-index:997;position:absolute;top:0;left:0;background-color:white;text-indent:-9999px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxOwR8xZ9gzBpjcQBI6EXK0nj-o7OEMroYdgstQ9D2IiW56z9w3TIbZTUY_eb_MucY4H7UKtOK1dtP0MxCHsWbzi18xUX6Fjb-6DBdzdihBi7WQVIeQcBVm90K15G31MugZZmP0lwI_V8/s1600/loading.gif);background-position:50% 50%;background-repeat:no-repeat}
.ei-slider-large{height:100%;position:relative;overflow:hidden;margin:0 0 10px;padding:0;border:5px solid #9E0505;border-radius:2px}
.ei-slider-large li{position:absolute;top:0;left:0;overflow:hidden;height:100%;width:100%;list-style:none}
.ei-slider-large li img{width:100%;border:0;padding:0}
.ei-title{position:absolute;right:8%;left:8%;bottom:20%;color:#fff;opacity:0.8}
.ei-title p{text-align:left}
.ei-title h2{font-family:Georgia,Times,"Times New Roman";text-align:right;margin-left:auto;font-size:18px;line-height:20px;color:#b5b5b5;max-width:80%;text-transform:capitalize;background:#000;padding:5px}
.ei-title h2 a{color:white}
.ei-title h2 a:hover{text-decoration:none;color:#9E0505}
.ei-title p{font-family:Verdana,Geneva,sans-serif;margin-left:auto;font-size:11px;line-height:15px;width:85%;clear:both;background:#000;padding:5px 10px;position:relative;left:-5%}
.ei-slider-thumbs{padding:0 0;height:13px;margin:0 auto;width:100%;position:relative}
.ei-slider-thumbs li{position:relative;float:left;height:100%;width:20%;list-style:none}
.ei-slider-thumbs li.ei-slider-element{top:0;left:0;position:absolute;height:100%;z-index:10;text-indent:-9000px;background:#9E0505}
.ei-slider-thumbs li a{display:block;text-indent:-9000px;background:#666;width:100%;height:100%;cursor:pointer;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);-webkit-transition:background 0.2s ease;-moz-transition:background 0.2s ease;-o-transition:background 0.2s ease;-ms-transition:background 0.2s ease;transition:background 0.2s ease}
.ei-slider-thumbs li a:hover{background-color:#f0f0f0}
.ei-slider-thumbs li img{position:absolute;bottom:50px;opacity:0;z-index:999;width:100%;padding:0;background-color:white;border-radius:2px 2px 0 0;border:0;max-width:100%;height:60px;max-height:70px;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;-ms-transition:all 0.4s ease;transition:all 0.4s ease;-webkit-box-reflect:below 0 -webkit-gradient( linear,left top,left bottom,from(transparent),color-stop(50%,transparent),to(rgba(255,255,255,0.3)) );-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}
.ei-slider-thumbs li:hover img{opacity:1;bottom:13px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"}
@media only screen and (max-width:479px){
  .ei-slider{height:200px}
  .ei-title{bottom:5%}
  .ei-title h2{font-size:14px;line-height:17px}
}
</style>
<br />
<div id="autoelastic">
</div>
<script type="text/javascript">//<![CDATA[
(function(d,e,f){var a=e.event,c;a.special.smartresize={setup:function(){e(this).bind("resize",a.special.smartresize.handler)},teardown:function(){e(this).unbind("resize",a.special.smartresize.handler)},handler:function(j,g){var i=this,h=arguments;j.type="smartresize";if(c){clearTimeout(c)}c=setTimeout(function(){jQuery.event.handle.apply(i,h)},g==="execAsap"?0:100)}};e.fn.smartresize=function(g){return g?this.bind("smartresize",g):this.trigger("smartresize",["execAsap"])};e.Slideshow=function(g,h){this.$el=e(h);this.$list=this.$el.find("ul.ei-slider-large");this.$imgItems=this.$list.children("li");this.itemsCount=this.$imgItems.length;this.$images=this.$imgItems.find("img:first");this.$sliderthumbs=this.$el.find("ul.ei-slider-thumbs").hide();this.$sliderElems=this.$sliderthumbs.children("li");this.$sliderElem=this.$sliderthumbs.children("li.ei-slider-element");this.$thumbs=this.$sliderElems.not(".ei-slider-element");this._init(g)};e.Slideshow.defaults={animation:"sides",autoplay:false,slideshow_interval:3000,speed:800,easing:"",titlesFactor:0.6,titlespeed:800,titleeasing:"",thumbMaxWidth:150};e.Slideshow.prototype={_init:function(h){this.options=e.extend(true,{},e.Slideshow.defaults,h);this.$imgItems.css("opacity",0);this.$imgItems.find("div.ei-title > *").css("opacity",0);this.current=0;var g=this;this.$loading=e('<div class="ei-slider-loading">Loading</div>').prependTo(g.$el);e.when(this._preloadImages()).done(function(){g.$loading.hide();g._setImagesSize();g._initThumbs();g.$imgItems.eq(g.current).css({opacity:1,"z-index":10}).show().find("div.ei-title > *").css("opacity",1);if(g.options.autoplay){g._startSlideshow()}g._initEvents()})},_preloadImages:function(){var g=this,h=0;return e.Deferred(function(i){g.$images.each(function(j){e("<img/>").load(function(){if(++h===g.itemsCount){i.resolve()}}).attr("src",e(this).attr("src"))})}).promise()},_setImagesSize:function(){this.elWidth=this.$el.width();var g=this;this.$images.each(function(j){var h=e(this);h.css({width:"100%",height:"100%"})})},_initThumbs:function(){this.$sliderElems.css({"max-width":this.options.thumbMaxWidth+"px",width:100/this.itemsCount+"%"});this.$sliderthumbs.css("max-width",this.options.thumbMaxWidth*this.itemsCount+"px").show()},_startSlideshow:function(){var g=this;this.slideshow=setTimeout(function(){var h;(g.current===g.itemsCount-1)?h=0:h=g.current+1;g._slideTo(h);if(g.options.autoplay){g._startSlideshow()}},this.options.slideshow_interval)},_slideTo:function(l){if(l===this.current||this.isAnimating){return false}this.isAnimating=true;var k=this.$imgItems.eq(this.current),h=this.$imgItems.eq(l),g=this,j={zIndex:10},i={opacity:1};if(this.options.animation==="sides"){j.left=(l>this.current)?-1*this.elWidth:this.elWidth;i.left=0}h.find("div.ei-title > h2").css("margin-right",50+"px").stop().delay(this.options.speed*this.options.titlesFactor).animate({marginRight:0+"px",opacity:1},this.options.titlespeed,this.options.titleeasing).end().find("div.ei-title > p").css("margin-right",-50+"px").stop().delay(this.options.speed*this.options.titlesFactor).animate({marginRight:0+"px",opacity:1},this.options.titlespeed,this.options.titleeasing);e.when(k.css("z-index",1).find("div.ei-title > *").stop().fadeOut(this.options.speed/2,function(){e(this).show().css("opacity",0)}),h.css(j).stop().animate(i,this.options.speed,this.options.easing),this.$sliderElem.stop().animate({left:this.$thumbs.eq(l).position().left},this.options.speed)).done(function(){k.css("opacity",0).find("div.ei-title > *").css("opacity",0);g.current=l;g.isAnimating=false})},_initEvents:function(){var g=this;e(d).on("smartresize.eislideshow",function(h){g._setImagesSize();g.$sliderElem.css("left",g.$thumbs.eq(g.current).position().left)});this.$thumbs.on("click.eislideshow",function(i){if(g.options.autoplay){clearTimeout(g.slideshow);g.options.autoplay=false}var j=e(this),h=j.index()-1;g._slideTo(h);return false})}};var b=function(g){if(this.console){console.error(g)}};e.fn.eislideshow=function(h){if(typeof h==="string"){var g=Array.prototype.slice.call(arguments,1);this.each(function(){var i=e.data(this,"eislideshow");if(!i){b("cannot call methods on eislideshow prior to initialization; attempted to call method '"+h+"'");return}if(!e.isFunction(i[h])||h.charAt(0)==="_"){b("no such method '"+h+"' for eislideshow instance");return}i[h].apply(i,g)})}else{this.each(function(){var i=e.data(this,"eislideshow");if(!i){e.data(this,"eislideshow",new e.Slideshow(h,this))}})}return this}})(window,jQuery);function AutoElasticSlideshow(a){(function(d){var g={blogURL:"",MaxPost:4,idcontaint:"#autoelastic",ImageSize:400,loadingClass:"loadingxx",Summary:100,animation:"sides",speed:800,easing:"",titlesFactor:0.6,titlespeed:800,titleeasing:"",thumbMaxWidth:150,Interval:3000,autoplay:true,pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",tagName:false};g=d.extend({},g,a);var f=d(g.idcontaint);var c=g.blogURL;if(g.blogURL===""){c=window.location.protocol+"//"+window.location.host}f.html('<div id="ei-slider" class="ei-slider"><ul class="ei-slider-large"></ul><ul class="ei-slider-thumbs"><li class="ei-slider-element">Current</li></ul></div>').addClass(g.loadingClass);var e=function(t){var p,h,q,s,m,l="",k="",r=t.feed.entry;for(var o=0;o<r.length;o++){for(var n=0;n<r[o].link.length;n++){if(r[o].link[n].rel=="alternate"){p=r[o].link[n].href;break}}if("media$thumbnail"in r[o]){s=r[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+g.ImageSize)}else{s=g.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+g.ImageSize+"$1")}if("content"in r[o]){q=r[o].content.$t}else{if("summary"in r[o]){q=r[o].summary.$t}else{q=""}}q=q.replace(/<\S[^>]*>/g,"");if(q.length>g.Summary){q=q.substring(0,g.Summary)+"..."}h=r[o].title.$t;m=o+1;l+='<li><img src="'+s+'" alt="image0'+m+'" /><div class="ei-title"><h2><a href="'+p+'">'+h+"</a></h2><p>"+q+".</p></div></li>";k+='<li><a href="#">Slide '+m+'</a><img src="'+s+'" alt="thumb0'+m+'" /></li>'}d("ul.ei-slider-large",f).append(l);d("ul.ei-slider-thumbs",f).append(k)};var b=function(){var h="/-/"+g.tagName;if(g.tagName===false){h="";d.ajax({url:c+"/feeds/posts/default"+h+"?max-results="+g.MaxPost+"&orderby=published&alt=json-in-script",success:e,dataType:"jsonp",cache:true})}else{d.ajax({url:c+"/feeds/posts/default"+h+"?max-results="+g.MaxPost+"&orderby=published&alt=json-in-script",success:e,dataType:"jsonp",cache:true})}d(window).bind("load",function(){d("#ei-slider").eislideshow({animation:g.animation,autoplay:g.autoplay,slideshow_interval:g.Interval,titlesFactor:g.titlesFactor,speed:g.speed,easing:g.easing,titlespeed:g.titlespeed,titleeasing:g.titleeasing,thumbMaxWidth:g.thumbMaxWidth})});f.removeClass(g.loadingClass)};d(document).ready(b)})(jQuery)};//]]>
</script>
<script type="text/javascript">//<![CDATA[
$(document).ready(function () {
AutoElasticSlideshow({
blogURL:"http://www.madad2.com",
MaxPost:5,
idcontaint:"#autoelastic",
ImageSize:400,
Summary:100,
animation:'center',
speed:800,
easing:'',
titlesFactor:0.60,
titlespeed:800,
titleeasing:'',
thumbMaxWidth:150,
Interval:3000,
autoplay:true,
pBlank:'http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif',
tagName:false
});
});//]]>
</script>


غير رابط موقعك بموقعي الرابط المشار اليه باللون الاحمر ثم اختر حفظ وشاهد النتائج


مشاركات أقدم المقال التالي
13 تعليق
  • Hirak_DZ
    Hirak_DZ 17‏/02‏/2014، 12:46:00 م

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

    • مداد الجليد
      مداد الجليد 17‏/02‏/2014، 5:42:00 م

      اهلاً بك,
      لقد شاهدة المعاينة عزيزي السلايد يعمل بشكل جيد رجاءً تحقق من اضافة الكود بالكامل بدون التعديل عليه اذا واجهتك اية مشاكل يمكننا مساعدتك

  • Unknown
    Unknown 04‏/05‏/2014، 3:02:00 ص

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

    • مداد الجليد
      مداد الجليد 04‏/05‏/2014، 7:52:00 م

      عزيزي اقرا الموضوع جيداً يجب أن تستبدل رابط مدونتي برابط مدونتك
      اهلا وسهلا بك

  • Unknown
    Unknown 01‏/10‏/2014، 11:03:00 م

    أزال أحد مشرفي المدونة هذا التعليق.

  • Unknown
    Unknown 29‏/03‏/2015، 2:50:00 م

    (o) tank is very nice

    • مداد الجليد
      مداد الجليد 29‏/03‏/2015، 9:48:00 م

      شرفت اخي اهلا بك

  • غير معرف
    غير معرف 13‏/02‏/2016، 10:50:00 م

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

    • مداد الجليد
      مداد الجليد 13‏/02‏/2016، 11:40:00 م

      أهلاً بك
      لا حاجة لمراجعة الكود صديقي كما ترى بالمعاينة فهو يعمل بشكل جيد
      قد يكون لديك بعض الإضافات أو الأكواد التي تتعارض مع هذا الكود
      جرب في مدونة أخرى او أضف الكود التالي فوق الرمز </head>
      <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
      إذا كان غير موجود في مدونتك سابقاً أو قد يكون مكرر فيجب حذفه

  • غير معرف
    غير معرف 04‏/05‏/2016، 4:02:00 م

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

    • مداد الجليد
      مداد الجليد 04‏/05‏/2016، 6:18:00 م

      العفو أخي مرحبا بك
      لا يمكن ذلك لان السلايد تلقائي وتغذيته من المواضيع فقط

أضف تعليق
عنوان التعليق