Γεια σε όλους τους bloggers, σήμερα σας έχω ένα πολύ ωραίο και απλό στη χρήση slidershow για το blog σας για να βλέπουν οι επισκέπτες σας τις τελευταίες αναρτήσεις που δημοσιεύσατε. Μπορείτε να ρυθμίσετε το slider για το πόσα άρθρα θα εμφανίζει. Επίσης στο slideshow εκτός από την εικόνα θα σας εμφανίζει αυτόματα από κάτω τον τίτλο και την περιγραφή του κάθε άρθρου.
Το slider μπορείτε να το προσθέσετε στο δικό σας blog με το απλούστατο τρόπο που μάθαμε για να προσθέτουμε gadget στο blogger.
- Σύνδεση στο λογαριασμό σας στο blogger.com
- Διάταξη
- Προσθήκη gadget
- HTML/JavaScript
- Επικόλληση και Αποθήκευση του πιο κάτω κώδικα
<style scoped="" type="text/css">
#coinautoslide{margin:0 auto;border:4px solid white;border-radius:2px;font:normal normal 11px Verdana,Geneva,sans-serif;line-height:1.6em}
.coin-slider{overflow:hidden;zoom:1;position:relative}
.coin-slider a{text-decoration:none;outline:none;border:none}
.cs-buttons{font-size:0;padding:10px;float:left}
.cs-buttons a{margin-left:5px;height:10px;width:10px;float:left;border:1px solid #B8C4CF;color:#B8C4CF;text-indent:-1000px}
.cs-active{background-color:#B8C4CF;color:#FFFFFF}
.cs-buttons a{border-radius:50%;background:#CCC;background:-webkit-linear-gradient(top,#CCCCCC,#F3F3F3);background:-moz-linear-gradient(top,#CCCCCC,#F3F3F3);background:-o-linear-gradient(top,#CCCCCC,#F3F3F3);background:-ms-linear-gradient(top,#CCCCCC,#F3F3F3);background:linear-gradient(top,#CCCCCC,#F3F3F3)}
a.cs-active{background:#599BDC;background:-webkit-linear-gradient(top,#599BDC,#3072B3);background:-moz-linear-gradient(top,#599BDC,#3072B3);background:-o-linear-gradient(top,#599BDC,#3072B3);background:-ms-linear-gradient(top,#599BDC,#3072B3);background:linear-gradient(top,#599BDC,#3072B3);border-radius:50%;box-shadow:0 0 3px #518CC6;border:1px solid #3072B3!important}
.cs-title{width:100%;padding:5px 0;background-color:#000000;color:#FFFFFF}
.cs-title strong{display:block;font-size:120%}
.cs-title p{margin:0}
.cs-title cite{font-size:90%}
.cs-title strong,.cs-title cite,.cs-title p{padding:0 10px}
.cs-prev,.cs-next{background-color:#000000;color:#FFFFFF;padding:0 10px}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
var AutoCoinConfig = {
url_blog: "http://lefta4klik.blogspot.gr/",
MaxPost: 8,
cmtext: "Komentar",
MonthNames : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
pBlank : "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",
NoCmtext : "Belum Ada Komentar",
imageSize :500,
SumChars : 100,
tagName:false,
width: 500,
height: 250,
spw: 7,
sph: 5,
delay: 3000,
sDelay: 30,
opacity: 0.7,
titleSpeed: 500,
effect: '',
navigation: true,
links : true,
hoverPause: true,
prevText: 'prev',
nextText: 'next'
};
</script>
<script src="https://googledrive.com/host/0B3fIJ7nZFI9iSnJweDBXVUsydG8/" type="text/javascript"></script>
Εκεί που γράφει => url_blog: "http://lefta4klik.blogspot.gr/"(το έχω με κόκκινα γράμματα) βάζετε στη θέση του url του blog μου το δικό σας.
Μπορείτε να παίξετε με τις ρυθμίσεις css του slider για να το προσαρμόσετε στα μέτρα σας.
telio
ΑπάντησηΔιαγραφήχαίρομαι που σου άρεσε
ΑπάντησηΔιαγραφήκαλησπέρα, γιατι δεν μου βγάζει εικόνα και βγάζει μόνο το κείμενο με γκρι φόντο?
ΑπάντησηΔιαγραφήπολύ εύκολο για εφαρμογή. ευχαριστώ!
ΑπάντησηΔιαγραφήχαίρομαι που σου άρεσε!
ΑπάντησηΔιαγραφήΦίλε μου προσπάθησα να εφαρμόσω τον slider στο blog αλλά δεν μου το εμφανίζει.Λες να φταίει που έχω template;Το δοκίμασα και σε ένα άλλο blog χωρίς template και λειτουργεί μια χαρά.Ξέρες μήπως τι μπορώ να κάνω για να λειτουργήσει το slider στο blog με το template;.Ευχαριστώ εκ των προτέρων.Συνέχισε έτσι.Κάνεις φανταστική δουλειά!
ΑπάντησηΔιαγραφήΚαλησπέρα Παναγιώτη.
ΑπάντησηΔιαγραφήΠολύ καλό το slidershow αλλά θέλω να μην ανοίγει σε άλλο παράθυρο αλλά στο ίδιο.Υπάρχει τρόπος;
Χρήστος.
Χαιρετώ κι εγώ!
ΑπάντησηΔιαγραφήΣυγχαρητήρια για τη δουλειά που κάνεις! Ευχαριστούμε πάρα πολύ!
Γίνεται να βάλω μεγαλύτερο αριθμό δημοσιεύσεων;
Γεια σου Ελίνα, ναι μπορείς, εκεί που γράφει "MaxPost" γράψε τον αριθμό τον άρθρων που θες να εμφανίζονται!
ΑπάντησηΔιαγραφήΠολύ καλό.
ΑπάντησηΔιαγραφήΤο βάζω στο μπλοκ μου αλλά δεν λειτουργεί σε όλες τις δημοσιεύσεις με εικόνες, εκτός και οτι αν το βάλω πάνω από τις Αναρτήσεις μου κατεβάζει την δεξιά στήλη κάτω από την τελευταία ανάρτηση..Χρησιμοποιώ template. Μήπως φταίει αυτό;; Παρόλα αυτά πολύ καλό και εύκολο στην χρήση..
ΑπάντησηΔιαγραφήΤο βάζω στο μπλοκ μου αλλά δεν λειτουργεί σε όλες τις δημοσιεύσεις με εικόνες. Μήπως μπορείτε να με βοηθήσετε;
ΑπάντησηΔιαγραφήΕυχαριστώ!
Τι εννοείτε; Δεν εμφανίζονται οι εικόνες;
ΑπάντησηΔιαγραφήΚαλησπέρα εχω θεμα , μολις το βαζω αφαιρει αυτοματα τις δυο στηλες απο τις τρεις που εχω στο blog μου και τα τοποθετει ολα στην μεσαια στηλη ....
ΑπάντησηΔιαγραφήto elyses telika?ti ekanes?exw to idio provlhma
ΔιαγραφήΚαλησπέρα, δυστιχώς το συγκεκριμένο slider δυσλειτουργεί σε κάποια πρότυπα
ΑπάντησηΔιαγραφήΚαλησπέρα,θα ήθελα αν μπορείς να μου πεις πως μπορώ να αλλάξω το background να το κάνω ένα χρώμα ή μια εικόνα ή διαφανές ή οτιδήποτε άλλο, γιατί μου το βγάζει με γραμμές και στον κώδικα δεν μπορώ να καταλάβω τι πρέπει να αλλάξω για να κάνω αυτό που θέλω.Ευχαριστώ
ΑπάντησηΔιαγραφήΚαλησπέρα δεν μπορώ να σε βοηθήσω γιατί ο κάθε κώδικας του κάθε προτύπου διαφέρει, πρέπει να μπω στον κώδικα για να καταλάβω τι πρέπει να αλλάξεις
ΑπάντησηΔιαγραφήΚαλησπέρα,
ΑπάντησηΔιαγραφήαλλάζω το μέγεθος αλλα μου πολλαπλασιαζει την εικόνα μεσα, μερικες φορές επι 2 και αλλες επι 4..υπαρχει καποια λύση σε αυτό? http://ntocoumenta.blogspot.gr/ μπορεις να το δεις τι εννοώ...
kalhspera file m ..dikes mas eikones pws boroume na valoume ?
ΑπάντησηΔιαγραφήΚαλησπέρα Σωτήρη, οι εικόνες που μπαίνουν στο slider είναι αυτές των τελευταίων άρθρων που έχεις δημοσιεύσει, αν θες να αλλάξει μια εικόνα απλά άλλαξε την και στον άρθρο!
ΑπάντησηΔιαγραφήΚαλησπερα.Το χρησιμοποιησα στο blog και λειτουργει τελεια.Το μονο προβλημα ειναι οτι εχω 3 στηλες, μου κραταει στη μεση το slider και ολα τα αλλα τα στελνει σε μια στηλη.Οσο και να τα αλλαζω θεση δεν πανε δεξια και αριστερα απο το slider οπως τα ειχα.Μικραινω το width αλλα καμια διαφορα.Υπαρχει καποια λυση?Ευχαριστω!
ΑπάντησηΔιαγραφήΚαλησπέρα, δεν πολύ κατάλαβα τι εννοείς, μπορείς να μου δώσεις το λινκ σου να δω αν είναι!
ΑπάντησηΔιαγραφήΚαλημερα. Πως μπορω αυτο το κωδικα να τον βαλω σε ενα site που δεν ειναι blog; To βαζω ας πουμε αυτο πριν το < / head > και μου τα βγαζει πανω ψηλα ψηλα. Τι αλλο πρεπει να προσθεσω και που για να το χρησιμοποιησω; Ευχαριστω.
ΑπάντησηΔιαγραφήΚαλησπέρα, χρειάζεται να ξέρεις css για να το προσαρμόσεις όπως θες
Διαγραφήκαλησπέρα, γιατι δεν μου βγάζει εικόνα και βγάζει μόνο το κείμενο με γκρι φόντο?
ΑπάντησηΔιαγραφήΊσως γιατί δεν έχεις κάποια εικόνα μέσα στο άρθρο
Διαγραφήexo balei ton kodika opos les pno apo tis anartiseissto athleticnewsblog.blogspot.gr kai moy doyleyei omos ta gadget tis deksias stilis moy ta pigeinei kato apo tis sinartisis episis exo allaksei tis diastaseis xoris omos apotelesma kai anagkastika na to pav kato apo to menou kai fainetai aidia tora parakalo pes moy ti prepei na kano allios pes moy se ti protipo doyleyei se eyxaristw ek twn proterwn.
ΑπάντησηΔιαγραφήπολυ καλο ΜΠΑΒΟ!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
ΑπάντησηΔιαγραφή