POST SLIDER FOR BLOGGER No 3

POST SLIDER FOR BLOGGER No 3
Αυτό είναι ένα post slider για blogger που εμφανίζει 1 ανάρτηση σε κάθε πέρασμα του slider και υπάρχει σε παραλλαγή 3 διαστάσεων 450pxΧ300px, 600pxΧ400px και 750pxΧ500px. Στην μικρή διάσταση εμφανίζει τις 15 πρώτες αναρτήσεις, στην μεσαία διάσταση εμφανίζει τις 20 πρώτες αναρτήσεις, και στην μεγάλη διάσταση εμφανίζει τις 25 πρώτες αναρτήσεις. Αν θέλετε να εμφανίζονται περισσότερες αναρτήσεις πρέπει να αλλάξετε το numPost:15, που βρίσκεται μέσα στον κώδικα javascript.

Αν θέλετε μεγαλύτερη γραμματοσειρά αλλάζετε το font-size: 11px; που βρίσκεται στη 8^η γραμμή του css κώδικα. Αν θέλετε να αλλάξετε το χρόνο ενναλαγής των slides πρέπει να αλλάξετε το interval:5000 και το speed:300, που βρίσκονται στον κώδικα javascript σε 2 σημεία. Τέλος τα χρώματα μπορείτε να τα αλλάξετε αντικαθιστώντας τους κωδικούς που προηγήται το σύμβολο της δίεσης #. Μην ξεχάσετε να αλλάξετε το link του δικού μου blog που έχω χρωματίσει με γαλάζια γράμματα με αυτό του δικού σας blog.

ΔΕΙΤΕ ΕΔΩ ΤΟ SLIDER ΣΕ ΛΕΙΤΟΥΡΓΊΑ ΣΕ ΕΝΑ DEMO BLOG ►

1) ΣΥΝΤΟΜΟΣ ΚΩΔΙΚΑΣ ΓΙΑ ΤΟ ΜΙΚΡΟ SLIDER ΔΙΑΣΤΑΣΕΩΝ 450pxX300px

Επικολλήστε τον παρακάτω κώδικα μέσα σε ένα κουτάκι gadget / HTML / Javascript.

<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/s/oxfl28bpfio0275/Slider-3-style-450.css"/>

<div id="slider-rotator" class="slider-rotator loading"></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/i4jpj2cb5i1bbae/Slider-3-450.js"></script>

<script type="text/javascript">makeSlider({url: "http://gadgetsforblogs6.blogspot.gr"});</script>

2) ΣΥΝΤΟΜΟΣ ΚΩΔΙΚΑΣ ΓΙΑ ΤΟ ΜΕΣΑΙΟ SLIDER ΔΙΑΣΤΑΣΕΩΝ 600pxX400px

Επικολλήστε τον παρακάτω κώδικα μέσα σε ένα κουτάκι gadget / HTML / Javascript.

<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/s/jpm5gxegttfdif7/Slider-3-style-600.css"/>

<div id="slider-rotator" class="slider-rotator loading"></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/kitf9rbmq64elub/Slider-3-600.js"></script>

<script type="text/javascript">makeSlider({url: "http://gadgetsforblogs6.blogspot.gr"});</script>

3) ΣΥΝΤΟΜΟΣ ΚΩΔΙΚΑΣ ΓΙΑ ΤΟ ΜΕΓΑΛΟ SLIDER ΔΙΑΣΤΑΣΕΩΝ 750pxX500px

Επικολλήστε τον παρακάτω κώδικα μέσα σε ένα κουτάκι gadget / HTML / Javascript.

<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/s/788y8482jqvf9zg/Slider-3-style-750.css"/>

<div id="slider-rotator" class="slider-rotator loading"></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/kix4xoejsr1hgrx/Slider-3-750.js"></script>

<script type="text/javascript">makeSlider({url: "http://gadgetsforblogs6.blogspot.gr"});</script>

4) ΑΝΑΛΥΤΙΚΟΣ ΚΩΔΙΚΑΣ ΓΙΑ ΤΟ ΜΕΣΑΙΟ SLIDER ΔΙΑΣΤΑΣΕΩΝ 600pxX400px

<style>

.slider-rotator{

width:600px;

height:400px;

border:1px solid #FF1111;

background-color:#333333;

padding:10px;

font-size: 12px;

font-family: Arial;

color:#000000;

margin:0 auto;

position:relative;

overflow:hidden;

text-align:left}

.slider-rotator.loading{background-image:url('data:image/gif;base64,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');

background-position:50% 50%;

background-repeat:no-repeat}

.slider-rotator .slider-item{

position:absolute;

padding:10px;

background-color:#FCFDDD;

top:0;

right:0;

bottom:auto;

left:0;

display:none}

.slider-rotator .image-wrapper{}.slider-rotator .detail-wrapper{}.slider-rotator img{

display:block;

border:none;

outline:none;

padding:0 0;margin:0 0;

max-width:600px;

max-height:320px}

.slider-rotator h4{

font:inherit;

font-weight:bold;

font-size:125%;

text-transform:none;

color:#161EFB;

margin:10px 0 0}

.slider-rotator h4 a{

color:inherit;

text-decoration:none}

.slider-rotator h4 a:hover{color:#FF1111;text-decoration:underline}

.slider-rotator p{margin:10px 0 0}

.slider-rotator-nav{text-align:center}

.slider-rotator-nav a{

display:inline;

background-color:#333333;

color:white;

padding:4px 8px;

line-height:2.6em;

margin:0 2px;

text-decoration:none}

.slider-rotator-nav a:hover{background-color:#FF6600}

.slider-rotator-nav a.current{background-color:#FF1111}

</style>

<div id="slider-rotator" class="slider-rotator loading"></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script> (function(a){a.fn.customRotator=function(c){c=a.extend({

interval:5000,

speed:300,

hoverPause:false,

autoHeight:false,

crossFade:false,

autoSlide:true,

hide:function(d){},show:function(d){}},c);var b=true;return this.each(function(){var k=a(this),e=k.children().hide(),d=k.next(),g=null,j=0,f=0;function h(){c.hide(f);d.find(".current").removeClass("current");b=false;if(e.eq(f).next().length){if(!c.crossFade){e.eq(f).fadeOut(c.speed,function(){a(this).next().fadeIn(c.speed,function(){c.show(f);b=true});if(c.autoHeight){k.stop().animate({height:e.eq(f+1).height()},c.speed/2)}f++})}else{e.eq(f).fadeOut(c.speed);e.eq(f).next().fadeIn(c.speed,function(){c.show(f);b=true;f++});if(c.autoHeight){k.stop().animate({height:e.eq(f+1).height()},c.speed/2)}}d.find(".rotator-num a").eq(f+1).addClass("current")}else{if(!c.crossFade){e.eq(f).fadeOut(c.speed,function(){f=0;e.first().fadeIn(c.speed,function(){c.show(f);b=true});if(c.autoHeight){k.stop().animate({height:e.eq(f).height()},c.speed/2)}})}else{e.eq(f).fadeOut(c.speed);e.first().fadeIn(c.speed,function(){c.show(0);b=true;f=0});if(c.autoHeight){k.stop().animate({height:e.eq(0).height()},c.speed/2)}}d.find(".rotator-num a").first().addClass("current")}if(j==0&&c.autoSlide){g=setTimeout(h,c.interval)}}if(e.length>1){c.hide(f);e.first().fadeIn(c.speed,function(){c.show(f);b=true});if(c.autoHeight){k.stop().animate({height:e.eq(0).height()},c.speed/2)}if(c.hoverPause&&c.autoSlide){k.mouseenter(function(){clearTimeout(g);j=1}).mouseleave(function(){g=setTimeout(h,c.interval);j=0}).trigger("mouseleave")}else{g=(c.autoSlide)?setTimeout(h,c.interval):null}d.find(".rotator-num a").click(function(){if(b){b=false;if(c.autoSlide){clearTimeout(g);g=setTimeout(h,c.interval)}f=a(this).index();a(this).parent().find(".current").removeClass("current");a(this).addClass("current");c.hide(f);e.fadeOut(c.speed).eq(f).fadeIn(c.speed,function(){c.show(f);b=true});if(c.autoHeight){k.stop().animate({height:e.eq(f).height()},c.speed/2)}}return false});d.find(".rotator-advancer a").click(function(){if(b){b=false;var l=this.hash.replace("#",""),i=e.length;if(c.autoSlide){clearTimeout(g);g=setTimeout(h,c.interval)}if(l=="next"){f=(f<i-1)?f+1:0}else{f=(f>0)?f-1:i-1}d.find(".current").removeClass("current");d.find(".rotator-num a").eq(f).addClass("current");c.hide(f);e.fadeOut(c.speed).eq(f).fadeIn(c.speed,function(){c.show(f);b=true});if(c.autoHeight){k.stop().animate({height:e.eq(f).height()},c.speed/2)}}return false})}})}})(jQuery);function makeSlider(a){

var c={url:"http://www.dte.web.id",

numPost:20,

newTabLink:false,

labelName:null,

showDetail:true,

summaryLength:400,

titleLength:"auto",

showThumb:true,

thumbWidth:600,

squareThumb:false,

noThumb:"http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png",

showNav:true,

navText:{prev:"&lt;",next:"&gt;"},

containerId:"slider-rotator",

interval:5000,

speed:300,

hoverPause:true,

crossFade:false,

autoHeight:false,

autoSlide:true,

onInit:function(){},

onHide:function(d){},

onShow:function(d){}};

for(var b in c){c[b]=(typeof(a[b])!=="undefined")?a[b]:c[b]}$.get(c.url+"/feeds/posts/summary/"+(c.labelName===null?"":"-/"+c.labelName.replace(/\,(\s+)?/g,"/"))+"?alt=json-in-script&max-results="+c.numPost,{},function(s){if(s.feed.entry!==undefined){var r=s.feed.entry,q,p,e,o,h="",d="";for(var m=0,n=r.length;m<n;m++){if(m==r.length){break}q=r[m].title.$t;e=("media$thumbnail" in r[m])?'<img alt="'+q+'" src="'+r[m].media$thumbnail.url.replace(/\/s72\-c/,"/s"+c.thumbWidth+(c.squareThumb?"-c":""))+'" style="width:'+c.thumbWidth+"px;height:"+(c.squareThumb?c.thumbWidth+"px":"auto")+'">':'<img src="'+c.noThumb+'" style="width:'+c.thumbWidth+"px;height:"+(c.squareThumb?c.thumbWidth+"px":"auto")+'">';o=("summary" in r[m]&&c.summaryLength>0)?r[m].summary.$t.replace(/<br ?\/?>/ig," ").replace(/<(.*?)>/g,"").replace(/[<>]/g,""):"";o=(c.summaryLength<o.length)?o.substring(0,c.summaryLength)+"&hellip;":o;for(var l=0,f=r[m].link.length;l<f;l++){p=(r[m].link[l].rel=="alternate")?r[m].link[l].href:"#"}h+='<div class="slider-item">';h+=(c.showThumb&&c.showDetail)?'<div class="image-wrapper">'+e+"</div>":(c.showThumb&&!c.showDetail)?'<div class="image-wrapper"><a href="'+p+'" title="'+q+'"'+(c.newTabLink?' target="_blank"':"")+">"+e+"</a></div>":"";h+=(c.showDetail)?'<div class="detail-wrapper"><h4><a title="'+q+'" href="'+p+'"'+(c.newTabLink?' target="_blank"':"")+">"+((c.titleLength=="auto")?q:q.substring(0,c.titleLength)+(q.length>c.titleLength?"&hellip;":""))+"</a></h4><p>"+o+"</p></div>":"";h+="</div>";$("#"+c.containerId).css({width:(c.showThumb)?c.thumbWidth+"px":$("#"+c.containerId).css("width"),height:(!c.showDetail&&c.squareThumb)?c.thumbWidth+"px":$("#"+c.containerId).css("height")})}d='<div class="slider-rotator-nav"'+(c.showNav===false?' style="display:none;"':"")+">";d+=(c.showNav===true||c.showNav=="next/prev")?'<span class="rotator-advancer"><a href="#prev">'+c.navText.prev+"</a></span>":"";if(c.showNav===true||c.showNav=="number"){d+='<span class="rotator-num">';for(var g=0;g<c.numPost;g++){d+='<a href="#slide-'+g+'" class="'+(g===0?"current":"")+'">'+(g+1)+"</a>"}d+="</span>"}d+=(c.showNav===true||c.showNav=="next/prev")?'<span class="rotator-advancer"><a href="#next">'+c.navText.next+"</a></span>":"";d+="</div>";$("#"+c.containerId).html(h).after(d);c.onInit();$("#"+c.containerId).removeClass("loading").customRotator({interval:c.interval,speed:c.speed,autoHeight:c.autoHeight,hoverPause:c.hoverPause,crossFade:c.crossFade,autoSlide:c.autoSlide,hide:function(i){c.onHide(i)},show:function(i){c.onShow(i)}})}else{$("#"+c.containerId).removeClass("loading").css({width:"auto",height:"auto"}).html("Error or not found!")}},"jsonp")};

</script>

<script type="text/javascript">

makeSlider({url: "http://gadgetsforblogs6.blogspot.gr"});

</script>