POST SLIDER FOR BLOGGER No 4

POST SLIDER FOR BLOGGER No 4

Αυτό είναι ένα post slider για blogger που εμφανίζει 1 ανάρτηση σε κάθε πέρασμα του slider και δίπλα ακριβώς από την εικόνα της ανάρτησης εμφανίζει την περιγραφή της. Είναι διαστάσεων 360pxΧ760px. Αν θέλετε να εμφανίζονται λιγότερες από 100 αναρτήσεις πρέπει να αλλάξετε το var numposts_gal = 100; που βρίσκεται 8 γραμμές από το τέλος του παρακάτω κώδικα. Αν θέλετε να αλλάξετε τα χρώματα μπορείτε να το κάνετε αντικαθιστώντας τους κωδικούς που προηγήται το σύμβολο της δίεσης #.

<style>

#slide-container {width:720px;height:360px;position:relative;}

#slider {width:720px;height:360px;left:30px;background:#173374;overflow-x:hidden;overflow-y:hidden;position:relative;}

.slide-desc {

background:#173374;

color:#FFF;

font-family:Arial;

font-size:13 px;

padding:10px;

position:absolute;

top:0;right:0px;

text-align:left;

width:220px;

z-index:99999;}

.slide-desc h2{display:block;}

.crosscol .widget-content {position:relative;}

#slider ul, #slider li,

#slider2 ul, #slider2 li{margin:0;padding:0;list-style:none;}

#slider2{margin-top:4px;}

#slider li, #slider2 li{width:720px;height:360px;overflow:hidden;}

#prevBtn, #nextBtn,

#slider1next, #slider1prev{display:block;width:30px;height:360px;position:absolute;left:-30px;text-indent:-9999px;

top:0px;z-index:1000;}

#prevBtn, #slider1prev{left:0px !important;}

#nextBtn, #slider1next{left:750px !important;}

#prevBtn, #nextBtn, #slider1next, #slider1prev {

display:block;height:360px;left:0;position:absolute;top:0px;width:30px;z-index:1000;}

#prevBtn a, #nextBtn a, #slider1next a, #slider1prev a{

display:block;

position:relative;

width:30px;

height:360px;

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

#nextBtn a, #slider1next a{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:#51E286;} 

</style>

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

<script src='https://dl.dropboxusercontent.com/s/sm8bcsh2kx2gkru/slider-4a.js' type='text/javascript'></script>

<script type='text/javascript'>

$(document).ready(function(){

 $("#slider").easySlider({

 auto: true,

 continuous: true });});

</script>

<div id="slider">

<script src='https://dl.dropboxusercontent.com/s/2u4fotgkwlgtj55/slider-4b.js' type='text/javascript'></script>

<script style="text/javascript">

 var numposts_gal = 100;

 var numchars_gal = 400;

 var random_posts = false;

</script>

<script src="https://the-best-widgets.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>

</div>