surfe.pro سلايدشو تلقائي جميل وخفيف للمدونة - إربحــوا

أحدث المشاركات

إعلان أعلى المشاركات

الأربعاء، 31 ديسمبر 2014

سلايدشو تلقائي جميل وخفيف للمدونة

والآن أصبح بإمكانك الإبداع داخل مدونتك عبر الإضافات الجميلة واليوم مع إضافة سلايدشو تلقائي جميل وخفيف للمدونة يعرض 5 تدوينات ويمكنك زيادة أو إنقاص ذلك حسب رغبتك  مع إمكانية تغيير الألوان وحجم الكتابة وسهل من حيث التركيب




أدخل إلى المدونة ثم التخطيط ثم إضافة أداة وإختر Html/Java script ثم ضع الكود داخل الإطار الكبير وإضغط على حفظ   

                                              


الكــود : 


"<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/AVvXsEi4oifMheBlU0CJtsHJ_DMyschocl696hw7YUsdMtyQxy1qFeUKD2l1l4qpux2YuR7Xqf6nBFIuOoqD3M-ypFnreQ-OH-E-z_NzMjrAUaWiJji_zUPhHuGMMh82VoAEbWjSlvPUABFuhXg/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;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:#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>
<div id="autoelastic">
</div><a style='display: none;' href='http://more-egy.blogspot.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://nas29.blogspot.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>"

 ضع رابط مدونتك مكان هذا الرابط   http://nas29.blogspot.com                 
هذا الرقم هو عدد المواضيع المعروضة في السلايدشو   5   يمكنك تغييره                           
إن لم يعمل معك الكود ونادرا مايحدث هذا ماعليك إلاّ الذهاب  إلى قالب ثم تحرير HTML وإبحث عن الكود التالي :

     <b:section class='main' id='main' showaddelement='no'>  
                  وقم بإستبدال no ب yes  أو إستبدله بالكود التالي :                             <b:section class='main' id='main' showaddelement='no'>                                                                                                                                                             
    ثم إضغط حفظ

                                     
سلايدشو ثاني وجميل وتركيبه بنفس الطريقة الأولى من مدونة جلال
الكود :


"<style type="text/css">
/* http://kinas29.blogspot.com/ */
#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
       
#slider {
width:700px;height:306px;/* Make it the same size as your images */
background:#fff urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlX-_6IEuURIOrOVoF2T0w0EgN6IORZw9_wah9CB0k4BEDKOcOCeF2O8lewHx2cuHFRIZwV0J2ZoPAgu94uZjRkh9Ylgm9V25Nt-KW2UOaKa9cOX65oq5tnANVDSmlb2FSsnQk_gje3qjL/s1600/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
    }
#slider img {
position:absolute;
border:none;
display:none;
    }
/* the link style undefinedif an image is wrapped in a link) */
#slider a.imgLink {
z-index:2;
display:none;position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
    }
/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
position:absolute;
width:100%;
height:auto;
padding:0;
left:0px;
bottom:15px;
z-index:3;
overflow:hidden;
font-size: 0;
    }
div.mc-caption-bg {
background-color:black;
    }
div.mc-caption {
font: bold 14px/20px Arial;
color:#EEE;
z-index:4;
padding:10px 0;
text-align:center;
    }
div.mc-caption a {
color:#FB0;
    }
div.mc-caption a:hover {
color:#DA0;
    }
/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
top:320px; left:280px; /* Its position is relative to the #slider */
width:150px;
background:none;
padding-left:20px;
position:relative;
z-index:5;
cursor:pointer;
    }
/* each bullet */
div.navBulletsWrapper div
    {
width:11px; height:11px;
background:transparent urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3bJhwHrwhRzJpVD3m_CksNmcrO40HfHkq7-14gl8tByiovBLIsYHmF9YbWFyUMb3Fw39CuNhSMK-K4fwn8bM4zeZwZIS1dFuvza2Lio6NMduSZJ4B_X6-EtpZrAdsue6bq9FrjyfONgz6/s1600/bullet.png) no-repeat 0 0;
float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
margin-right:11px;/* distance between each bullet*/
_position:relative;/*IE6 hack*/
    }
div.navBulletsWrapper div.active {background-position:0 -11px;}
/* --------- Others ------- */
#slider
    {
transform: translate3dundefined0,0,0);
-ms-transform:translate3dundefined0,0,0);
-moz-transform:translate3dundefined0,0,0);
-o-transform:translate3dundefined0,0,0);
    }
</style>
<script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="رابط الصوره الاولى" alt="عنوان الموضوع الاول" /></a>
<a href="#"><img src="رابط الصوره الثانيه" alt="عنوان الموضوع الثاني" /></a>
<a href="#"><img src="رابط الصوره الثالثه"alt="عنوان الموضوع الثالث" /></a>
<a href="#"><img src="رابط الصوره الرابعه"alt="عنوالن الموضوع الرابع" /></a>
<a href="#"><img src="رابط الصوره الخامسه" alt="عنوان الموضوع الخامس"/></a>
</div>
</div>"



  • عليك إستبدال مايلي :
  • عنوان الموضوع : استبدله بعنوان الموضوع المراد عرضه في السلايد شو.
  • رابط الصورة  : استبدله برابط صورة الموضوع المراد عرضه بالسلايد شو.
    العلامة # : استبدلها برابط الموضوع المراد عرضه بالسلايد شو.
700PX هذا عرض السلايدشو غيّره حسب مدونتك
306PX هذا إرتفاع السلايدشوغيّره حسب مدونتك


          بالتــــوفيـــــــق                                        

Post Top Ad

روابط الصفحات الاخرى

عن الموقع

مــوقــع مختــص في مجــال التقنيــة ويحــاول إيجــاد كــل مــاهــو جــديــد لإفــادة الجميــع
إقرأ المزيد

أخترنا لكم