GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr DIIGO Start.me feedburner

POST SLIDER FOR BLOGGER No 4

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

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

<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://lh5.googleusercontent.com/-j28HsFjcG30/VV3dCV-DpdI/AAAAAAAARdA/TgQMuUyFkpE/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://lh3.googleusercontent.com/-pyCcEr7m8OU/VV3dCYWdUKI/AAAAAAAARdE/nkwTgozDdYg/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="http://gadgetsforblogs6.blogspot.gr/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

2 σχόλια:

  1. Καλησπέρα, κι άλλοτε με βοήθησες έτσι παίρνω το θάρρος να ρωτήσω. Έβαλα το POST SLIDER FOR BLOGGER No 4 σε αυτό το blog http://saginikritiki.blogspot.gr/ και βγαίνει παραμορφωμένο, ενώ σε άλλο που το χρησιμοποιώ δουλεύει καλά τι μπορεί να φταίει;

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Οι αναλογία των εικόνων αυτού του slider είναι 4:3 οι δικές σου εικόνες είναι διαφόρων αναλογιών 16:8, 16:9, 3:2, 5:4, κ.ο.κ. οπότε παραμορφώνονται απο τον slider για να δείξουν αναλογία 4:3. Επίσης βλέπω ότι έχεις βάλει και 2ο slider που σημαίνει ότι υπάρχει περίπτωση να συγκρούονται οι 2 κώδικες και να κυριαρχεί το style του πρώτου κώδικα εις βάρος του 2ου κώδικα, κράτα 1 slider μην τα μπερδεύεις και τα δύο μαζί.

      Διαγραφή

► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.