POST SLIDER FOR BLOGGER No 2

POST SLIDER FOR BLOGGER No 2

Αυτό είναι ένα πολύ πρακτικό post slider για blogger διαστάσεων 640px Χ 400px που εμφανίζει σε κάθε slide μία ανάρτηση με εικόνα, περιγραφή και κουμπιά πλοήγησης. Το πλάτος μπορείτε να το ρυθμίσετε αλλάζοντας το width:580px που βρίστεται στην τελευταία γραμμή πρίν το </style>. Για να ρυθμίσετε τα χρώματα του background και του κειμένου του slider αλλάξτε τους κωδικούς των χρωμάτων που προηγήται το σύμβολο της δίεσης #. Το πόσες αναρτήσεις θα εμφανίζονται μπορείτε να το ρυθμίσετε αλλάζοντας το numposts1 = 100;

Αν θέλετε να εμφανίσετε τις αναρτήσεις μίας μόνο συγκεκριμένης ετικέτας τότε προσθέσετε την ετικέτα αυτή στο παρακάτω script που βρίσκεται σχεδόν 15 γραμμές πρίν το τέλος αυτού του κώδικα. Μετά την προσθήκη της ετικέτας ο κώδικας θα γίνει έτσι.

document.write("<script src=\"http://the-best-widgets.blogspot.gr//feeds/posts/default/-/YOUR-LABEL?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");</script>

Εκεί που γράφει YOUR-LABEL Θα βάλετε την ετικέτα σας. Αν θέλετε να εμφανίζονται όλες αφήστε τον κώδικα όπως ήταν αλλά μην ξεχάσετε να αλλάξετε το link του δικού μου blog που είναι με πορτοκαλί γράμματα με το link του δικού σας blog.

<style>

#carousel{

width:640px;

height:400px;

margin-bottom:0px;

position:relative;

display:block}

#carousel .container{

position:absolute;

left:30px;

width:570px;

height:400px;

overflow:hidden;

background: #333333}

#carousel #previous_button{

position:absolute;

width:30px;

height:400px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkybmNqVMgAuwklRuBOVOWiP8Lp8fL3T97cDoLI3TuuwoYy5_WVpJKfLEeWKk4j3fH6qChewjJwlgVncIcQFLKnXmp1vDwfELM6ndeZ5iyKjAfPnWxi-VEgAn1XjIqcwuuSUg7y6985E9w/s64-no/arrowleft.png) center; background-repeat:no-repeat; z-index:100; cursor:pointer;border-right:1px solid #ccc; background-color:#848990;}

#carousel #previous_button:hover{background-color:#A4D6C9;}

#carousel #next_button{

position:absolute;

right:0;

width:30px;

height:400px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNmGkdxwAbZeKsrfLIW9dtFaAMIj7zlVxBsEZauxIQR2zoPZCAl-axTqBKBgPCQKfhyphenhyphenFuIIeY2fYgcvnu0q9pmOwwJ-A5HG9V21dpNAo_9Oh_RpUtrW2wuo5hidmhzk6zWynrNzgRdrOI4/s64-no/arrowright.png) center;background-repeat:no-repeat; z-index:100;cursor:pointer;border-left:1px solid #ccc; background-color:#848990;}

#carousel #next_button:hover{background-color:#A4D6C9;}

#carousel ul{width:100000px;position:relative;margin-top:2px}

#carousel ul li{

display:inline;

float:left;

text-align:left;

font-size: 16px;

font-family: arial;

line-height: 18px;

border:1px solid #FFFFFF;

width:570px;

height:380px;

margin:2px 2px 2px 2px;

padding:4px 4px 4px 4px;

-webkit-border-radius:5px;

-moz-border-radius:5px;

border-radius:5px;

position:relative;}

#carousel ul li:hover{background-color:#000000;}

#carousel ul li a.slider_title{

color: #FFFFFF;

display:block;

position:absolute;

bottom:0px;

left:0px;

right:0px;

padding-top:4px;

padding-left:14px;

padding-right:4px;

background-color: #333333;

color:#FFFFFF;

width:100%;

height:40px;}

#carousel ul li a.slider_title:hover{color:#FFFFFF;background-color:#000000;}

#carousel img{display:block;background:#333333;margin:0px;padding:0px;}

#carousel a img{display:block;background:#333333;margin:0px;padding:0px;}

.container {width:580px !important;}

</style>

//<![CDATA[

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5m6hlS3AL9j3X6ZCajl-idF1cShY7tP3Ds-ZjjYE9WAhoHJyhKagaDWQUqIWgfKLfPOBsRLuQRFAA8ELUUje9q0dd7iYgDU3BQTuINE5sBm8mOnrTWOl7QlleOTjl1Gjkqi6cs9nY71u2/s300-no/no+image.jpg";

showRandomImg = false;

aBold = false;

summaryPost = 150;

summaryTitle = 75;

numposts1 = 100;

label1 = "YOUR-LABEL";

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();

document.write('<ul>');

for (var i = 0; i < numposts1; 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 class="car"><div class="thumb"><a href="'+posturl+'"><img width="570" height="380" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

document.write(trtd);

j++;}

document.write('</ul>');}

//]]>

</script>

document.write("<script src=\"http://the-best-widgets.blogspot.gr//feeds/posts/default/?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");</script>

// <![CDATA[

(function($) { $(document).ready(function(){ $("#carousel .container").jCarouselLite({

auto: 5000,

scroll: 1,

speed: 800,

visible: 1,

start: 1,

circular: true,

btnPrev: "#previous_button",

btnNext: "#next_button"});

})})(jQuery)

// ]]>

</script>