Γίνετε μέλος του Dr-blogger στο fb.Απλά πατήστε like από κάτω

photto




36 Αυτόματο slider για τις αναρτήσεις σας

Φίλοι bloggers γειά σας !!! Σε αυτή την ανάρτηση σας δίνω ένα εύκολο post slider που παρουσιάζει αυτόματα τις αναρτήσεις του blog σας...Αλλάξτε αν θέλετε τις διαστάσεις, στα μέτρα και τα μεγέθη του blog σας...


Βάλτε τον κώδικα σαν gadget => HTML/Javascript :

<!--   begin post slider  -->
<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://www.dr-blogger.com/",
 MaxPost: 8,
 cmtext: "comments",
 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 : "comment number",
 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="http://dr-blogger.com/files/scripts/coinslider.js" type="text/javascript"></script>
<!--  end post slider  -->

***Αντικαταστήστε τη διεύθυνση του μπλογκ μου, με τη δική σας (τα κόκκινα γράμματα)
***Το  MaxPost: 8  εκφράζει πόσες αναρτήσεις θέλετε να φαίνονται...Μπορείτε να βάλετε περισσότερες η λιγότερες ...
***Τα μεγέθη  width: 500,  height: 250,   εκφράζουν  το μέγεθος του slider...αν δεν έχετε πολύ χώρο, μπορείτε να τα μικρύνετε...
***Προσοχή : Εαν οι εικόνες των αναρτήσεών σας είναι μικρές, τότε θα επαναλαμβάνονται μέσα στο slider...γι αυτό να βάζετε μέτριες εως μεγάλες εικόνες στις αναρτήσεις σας...
Πηγή  και  DEMO:  Thanks to  workshop.rs/projects/coin-slider/ ...
KAΛΗ ΕΠΙΤΥΧΙΑ !!!
Related Posts Plugin for WordPress, Blogger...
Print Friendly and PDF

36 σχόλια:

Νίκος Τσότσος είπε...

Άψογο,υπαρχει τροπος να εξαφανιστουν οι μπιλιτσες ,τα σχολια και οι ημερομηνιες απο το widget?
http://ntsotsos.blogspot.com
Ευχαριστω

pandelees karagiann είπε...

φυσικά...αλλα πρέπει να κάνεις τις κατάλληλες ρυθμίσεις στον κώδικα σχεδιασμού css...θέλει όμως να βαζεις στις αναρτήσεις σου μεγάλες εικόνες για να φαίνεται σωστά !!!αν το αποφασισεις μην γραψεις σχόλιο...στείλε μου κατ΄ευθείαν email...με βολεύει καλύτερα !!!

Αντίκρυ Ιστολόγιο είπε...

Δουλεύει καλά αλλά μου μετακινεί την αριστερή κολώνα (sidebar) στο τέλος της σελίδας.
Υπάρχει λύση;
Ευχαριστώ,
Σπύρος

pandelees karagiann είπε...

Aντικρυ, υπαρχει λυση ....μικρυνε το πλατος (width) ...το δινω 500 (εκει που λεει width:500 height:250)...μικρυνε το οσο μπορεις ωστε να μη σου δημιουργει το προβλημα (δηλ. 400, η 350 κλπ)

Γιώργος Ρουσέτης είπε...

Πολυ καλο φιλε.Υπαρχει τροπος να παταμε πανω σε αναρτηση και να μας πηγαινει αυτοματα εκει;Μεσα απο αυτο το slider ενοω.Ευχαριστω.

pandelees karagiann είπε...

...το κανει ηδη !!!Πατας την εικονα και πας στην αναρτηση.

newcaredentist είπε...

Καλησπέρα σας! Θα ήθελα να ρωτήσω σε ποιο σημείο του κώδικα περιγράφει το effect εναλλαγής των εικόνων, που είναι σε μορφή tiles, ώστε να το αλλάξω σε fade;
Επίσης, θα ήθελα να ρωτήσω αν είναι δυνατόν να αντιμετωπιστεί το θέμα με τις διαστάσεις των φωτογραφιών, δηλαδή να μην επαναλαμβάνονται όταν είναι μικρές, διότι θα ήθελα να το βάλω στην μέση του blog και να είναι μεγάλο.

pandelees karagiann είπε...

Alexandra, δεν ξερω αν ασχολεισαι με script, αλλα αυτο που ζητας, με την εναλαγη εικονων, βρισκεται μεσα στο script http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js
επίσης, το θεμα των εικονων, δεν ειναι δυνατον να αντιμετωπιστει, γιατι αν το βαλεις μεγαλο (το slider), πρεπει να δειχνει μεγαλες εικονες....τις μικρες τι θα τις κανει? θα δειχνει μια μικρη εικονα και γυρω θα ειναι κενο? οποτε πρεπει να βαλεις εικονες στις αναρτησεις σου, αναλογες με το μεγεθος του slider....(εννοειται οτι το slider το ρυθμιζεις σε οποιο μεγεθος θελεις)

newcaredentist είπε...

Καλησπέρα σας, ευχαριστώ πολύ για την απάντησή σας! Έβαλα το slideshow σας σε ένα φιλικό blog, το
http://aoratopedio.blogspot.gr/

Ξέρετε ποιο script από το jquery πρέπει να χρησιμοποιήσω ώστε να αλλάξει το είδος του transition; Βρήκα ένα παλιό slideshow, με fade in/fade out transition effect, τοποθέτησα το δικό του jquery στο δικό σας, χωρίς το επιθυμητό αποτέλεσμα. Όσο για το μέγεθος των φωτογραφιών, έχω βρει ένα slideshow που προσαρμόζει αυτόματα το μέγεθός τους, ώστε να χωράνε μέσα στις δικές του διαστάσεις κι έλεγα μήπως το ίδιο μπορούσε να γίνει και με το δικό σας. Πάντως, ο γνωστός μου που το έχει στο blog του είναι ικανοποιημένος με αυτό..:) Σας ευχαριστώ!

pandelees karagiann είπε...

...δεν ειναι και τοσο απλο να προσαρμοσεις ενα ηδη υπαρχον gadget στα μετρα σου....απλα ψαχνεις για καποιο αλλο, που να σου κανει....
σου εγραψα που βρισκεται αυτο το script...εαν εισαι πεπειραμενη, απομονωσε το, αν οχι, ψαξε για κατι αλλο...
αυτο το slider φτιαχτηκε για συγκεκριμενο μεγεθος εικονων....νομιζω δεν ειναι και τοσο σπουδαιο να βαζει λιγο μεγαλυτερες εικονες στις αναρτησεις...Δεν εχουμε και πολλες επιλογες για post slider...δεν υπαρχουν πολλα τετοια gadgets !!!

pandelees karagiann είπε...

....αααα!!! να σου πω οτι ποτε ....μα ποτε δεν μας συμφερει να παρουσιαζεται μια εικονα μικρη (πχ 200px) μεγεθυμενη σε ενα μεγαλο slider μεγεθους πλατους (π.χ. 600px), γιατι η εικονα αυτη θα ειναι τοσο παραμορφωμενη που δεν θα καταλαβαινεις τι δειχνει !!!!
και αυτό είναι ΚΑΝΟΝΑΣ στην επεξεργασια μιας φωτογραφιας !!!

newcaredentist είπε...

Pantelles karagiann, ευχαριστώ πολύ για τις απαντήσεις σας. Είναι κατανοητές! :) :)

noname είπε...

Μου μετακινει ολη την δεξια sidebar κατω κατω οσο και αν μικρυνω το width. γιατι συμβαινει αυτο?

noname είπε...

και εκτος του οτι μου βγαζει ολη την δεξια sidebar κατω κατω μου κολλαει και τα gadget μεταξυ τους κατω απο το σημειο που το προσθετω. μια βοηθεια παρακαλω

Νίκος Τσότσος είπε...

καλησπέρα ,πως επεμβαίνω στον css κώδικα?

pandelees karagiann είπε...

...Νικο, αν γνωριζεις , ο css κωδικας ειναι ανάμεσα στις φρασεις <style>, </style> ...
για περισσοτερες οδηγίες θα βρεις εδω: http://www.w3schools.com/css/css_examples.asp

Ado7212 είπε...

Καλησπερα, ευχαριστω πολυ για το Slider, ειναι το μονο που καταφερα να δουλεψει στη σελιδουλα μου.Υπαρχει μονο ενα προβληματακι που δεν ξερω πως να το λυσω. Δεν μου βγαζει ολες τις εικονες παρα μονο λιγες.(www.greekonlinenews.blogspot.gr). Τι κανω λαθος;
Μια συμβουλη θα ηταν ανεκτιμητη.
Καλο πασχα.

pandelees karagiann είπε...

Ado7212 : βλεποντας με μια πρωτη ματια το μπλογκ σου, φαινεται κατ' ευθειαν οτι εχεις ξεχασμενα script (που προφανως δεν σου λειτουργησαν)και λαθος τοποθετημενους κωδικες...
Επισης το feed του μπλογκ σου (στον πατο του μπλογκ, το "Εγγραφή σε: Αναρτήσεις ( Atom ) " )βγαζει το λινκ στο facebook (ειναι λαθος) !!!
εκτος απο ενα ξεχασμενο μερος κωδικα απο css ψηλα στην αρχη του μπλογκ, εχεις και ξεχασμενο script, απο το http://www.exeideas.com/...(πιθανον μερος απο καποιο slider που δεν σου λειτουργησε, και το παρατησες εκει)...
Ολα αυτα συντελουν προφανως στη μη παρουσιαση σωστα των εικονων...(ειδικα το θεμα του feed)...
...αν δεν ειναι κατι απο αυτα, τοτε δεν ξερω τι αλλο μπορει να ειναι !!!

Ado7212 είπε...

Ευχαριστω για τον κοπο που εκανες να ριξεις μια ματια.Θα ελεγξω αυτα που ανεφερες.

Αντωνης.

Νίκος Τσότσος είπε...

Καλησπερα και χρονια πολλα .
Σε μια σελιδα που τεσταρω διαφορα ξεκιναει και αλλαζει τις φωτοραφιες μετα την τεταρτη αναρτηση .Υπαρχει καμοια ιδεα?
Η σελιδα ειναι http://nitso-test.blogspot.gr/ στι κατω κατω μερος

pandelees karagiann είπε...

Νικο, το εχεις κατεβασμενο το μπλογκ, και δεν μπορω να το δω

Νίκος Τσότσος είπε...

οχι ,δουλευει καλα

http://nitso-test.blogspot.gr/

Evangelos Rizopoulos είπε...

Σε ευχαριστώ, δουλεύει τέλεια

ippotis02 είπε...

Σε ευχαριστωώ για τον κώδικα όμωσ σε εμένα δεν μου δουλέυει όταν βάζω στο url to δικό μου μήπωσ πρέπει να βάλω και κάπου αλλόυ τις εικόνες σεευχαριστώ εκ των προτέρων

pandelees karagiann είπε...

ippotis02: .....αν εννοεις οτι δεν δειχνει τις εικονες, ειναι γιατι οι εικονες σου στο http://athleticnewsblog.blogspot.gr/
δεν ειναι δικες σου και ανεβασμενες στο αμπουμ σου, στο picassa, αλλα ειναι ανεβασμενες σε χωρο φιλοξενειας αλλου site...το δοκιμασα με τη διευθυνση του μπλογκ σου, και λειτουργει, αλλα δεν δειχνει εικονες που ειναι απο αλλο site...

ippotis02 είπε...
Αυτό το σχόλιο αφαιρέθηκε από τον συντάκτη.
ippotis02 είπε...
Αυτό το σχόλιο αφαιρέθηκε από έναν διαχειριστή ιστολογίου.
ippotis02 είπε...

προεκυψε προβλημα με το gadget οταν το βαζω πανω απο τισ αναρτήσεις τα γαδγετ που εχω στο δεξιο μενου μου τα πηγαινει στο τέλος της σελιδας κατω απο τισ αναρτήσεις και επισης δοκίμασα να αλλακσο τις διαστασεις στο width kai height ομως με κανενα αποτελεσμα
περιμένω για την βοηθειά σου καιευχαριστώ εκτον προτέρων

pandelees karagiann είπε...

Aφησέ το εκει που το εβαλες, γιατι για να μπει πανω απο τις αναρτησεις, πρεπει να αλλαχτουν κι αλλα πραγματα, και θα σου δημιουργούν πρόβλημα...αυτό είναι φτιαγμένο γιά header...

raniadimtiris είπε...

Καλησπέρα, χρησιμοποιησα το slider αντιγραφοντας των κωδικο. παρολα αυτα αντιμετωπιζω καποιο προβλημα καθως οι εικονες δεν εμφανιζονται.Να αναφερω πως χρησιμοποιησα tamplate απο το internet ξεκινωντας την κατασκευη της σελιδας. Το θεμα που κατεβασα είχε ηδη δικο slider,αλλα καθως ηταν ελατωματικο το αλλαξα με το δικο σας.

http://movieland31.blogspot.gr/ ειναι το blog μου. Ευχαριστω εκ των προτερων

pandelees karagiann είπε...

Δημητρη, οι εικονες των αναρτησεων δεν ειναι ανεβασμενες στο picasa...για να δειξει εικονες πρεπει να τις εχεις ανεβασει στο blog σου, αρα στο picasa...

raniadimtiris είπε...

Καταρχην ευχαριστω για την απαντηση και γενικα για την βοηθεια που προσφερεις.Τα τρικς και οι οδηγιες σου γενικα ειναι πολυ χρησιμες συνεχησε την καλη δουλεια. Δευτερον να πω οτι το slider που ειχε ηδη το θεμα που κατεβασα εμφανιζε τις εικονες των αναρτησεων αυτοματα δεν χρειαστηκε να ασχοληθω με το πικασα. Συγνωμη αν παιδευω αλλα ειμαι πολυ καινουριος...

pandelees karagiann είπε...

το καθε slider λειτουργει διαφορετικα...αυτο δουλευει με τ feed του blog...ειναι ελαχιστα και δυσευρετα τα sliders για τις αναρτησεις των προτυπων του blogger στο blogspot...η google δεν ασχολειται να αναβαθμισει το blogspot...

Zone είπε...

Πολύ καλό γκάτζετ.Μπράβο!Έβαλα τον κώδικα στο σιτε μου αλλα αντιμετωπίζω 2 προβλήματα: 1)οι εικόνες και οι τίτλοι δεν συμβαδίζουν, είναι ετεροχρονισμένα. 2)δεν εμφανίζει κάποιο σύνδεσμο για να πάει στην ανάρτηση. Ευχαριστώ εκ των προτέρων! www.inzone.gr

maria είπε...

Τέλειο μπράβο!!Να ρωτήσω άμα γνωρίζετε αν υπάρχει τρόπος να εμφανίζεται αντί στο κέντρο της σελίδας,να εμφανίζεται στα αριστερά Ευχαριστώ

Ειρ.Μ είπε...

Καλησπερααα, πολυ καλο, μπραβο!!! Αν μπορεις ριξε μια ματια και στο δικο μου
blog ... http://eir-m.blogspot.gr/ και πες τυχόν παρατηρησεις...
Επισης, υπαρχει τροπος να φυγει απ'το slider αυτο τα μαυρο πλαισιο με τα σχολια ???
Eyxaristwwww