سلايد شو احترافى وتلقائى لمدونة بلوجر جافا اسكريبت 2015

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

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

الصور

معاينة السلايد

شرح التركيب 

تركيب السلايد شو

• توجه الى لوحة تحكم مدونتك
• ثم اضغط على تخطيط Layout
• قم باضافة اداة جديدة في المكان الذي تود ان تضع فيه السلايد شو
• اختر اداة 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/AVvXsEgdkyX1wfFmsIU4aH9jNMF7fPkkhgbLhFGI1_wY_GaIHFUdA24aCapqDPFRsfH6Cn1eK9DkzayoBkCZXNyG-XNNbLppNV2c2H9sGsH5GGmf3rQByDccJrP4jamBzxcdVDRfrJL-PfRTOl0/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 #FFFFFF;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;text-decoration: none;}

.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:#D73523;}

.ei-slider-thumbs li a{display:block;text-indent:-9000px;background:#060606;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>

<div id="autoelastic">

</div><a style='display: none;' href='http://7lolblogger.com'></a>

<script type="text/javascript">

(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://elahmady1.blogspot.com.eg/",

MaxPost:15,

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>

تعديلات على السلايد شو

• غير  برابط مدونتك http://elahmady1.blogspot.com.eg

إلى هنا يكون الموضوع قد انتهى، أتمنى أن ينال السلايد شو اعجابكم