Ένα απλό και αυτόματο slider όπως φαίνεται στην παραπάνω εικόνα.
Η προσθήκη του είναι εύκολη σαν απλό gadget.
Από την διάταξη επιλέγουμε προσθήκη gagdet, σκρολάρουμε μέχρι το HTML/JavaScript και εκεί επικολλούμε τον παρακάτω κώδικα:
Αλλάζετε το http://www.bloggertips.gr με τη διεύθυνση της δικής σας ιστοσελίδας.
Και αποθήκευση.
Αν αντιμετωπίσατε κάποιο πρόβλημα, ενημερώστε μας με σχόλιο εδώ ή στη σελίδα μας στο facebook.
Copyrights: http://www.bloggertips.gr/
Η προσθήκη του είναι εύκολη σαν απλό gadget.
Από την διάταξη επιλέγουμε προσθήκη gagdet, σκρολάρουμε μέχρι το HTML/JavaScript και εκεί επικολλούμε τον παρακάτω κώδικα:
<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
url: "http://www.bloggertips.gr" // Add your blog URL
});
</script>
Και αποθήκευση.
Αν αντιμετωπίσατε κάποιο πρόβλημα, ενημερώστε μας με σχόλιο εδώ ή στη σελίδα μας στο facebook.
Copyrights: http://www.bloggertips.gr/
26 comments:
πολυ καλο αλλα .. με ποιον τροπο μπορει να αλαξει το μεγεθός? (πλάτος-ύψος)
Ἐξαιρετικό!
Συμφωνῶ μέ τόν PANAXA καί ὑποβάλλω τό ἴδιον ἐρώτημα:Πῶς ἀλλάζουμε τίς διαστάσεις;
Aktimon
το ψαχνω και εγω αυτο, αλλα δεν το εχω βρει ..
δοκιμασα τις ετικετες μεσα στον κωδικα, αλλα δεν επιασε..
απο οτι φαινεται η αλλαγη πρεπει να γινει μεσα στο .js
Αντικαταστήστε τον κώδικα:
<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
με τον παρακάτω και οι διαστάσεις εμφανίζονται.
<style>
/* Basic style for Blogger Feed Rotator plugin */
.slider-rotator{width:250px;height:340px;border:1px solid #ccc;background-color:white;padding:10px;font:normal normal 11px/1.4 Tahoma,Verdana,Arial,Sans-Serif;color:#333;margin:0 auto;position:relative;overflow:hidden;text-align:left}.slider-rotator.loading{background-image:url('data:image/gif;base64,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');background-position:50% 50%;background-repeat:no-repeat}.slider-rotator .slider-item{position:absolute;padding:10px;background-color:white;top:0;right:0;bottom:auto;left:0;display:none}.slider-rotator .image-wrapper{}.slider-rotator .detail-wrapper{}.slider-rotator img{display:block;border:none;outline:none;padding:0 0;margin:0 0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;max-width:none;max-height:none}.slider-rotator h4{font:inherit;font-weight:bold;font-size:120%;text-transform:none;color:#3B4B7E;margin:10px 0 0}.slider-rotator h4 a{color:inherit;text-decoration:none}.slider-rotator h4 a:hover{color:#793B7E;text-decoration:underline}.slider-rotator p{margin:10px 0 0}.slider-rotator-nav{text-align:center}.slider-rotator-nav a{display:inline;background-color:#333;color:white;padding:4px 8px;line-height:2.6em;margin:0 2px;text-decoration:none}.slider-rotator-nav a:hover{background-color:#111}.slider-rotator-nav a.current{background-color:#3B4B7E}
</style>
το δοκιμασα, και ενω στο υψος αυξανει, δεν "ακουει" στο πλατος..
και στο υψος που αυξηθηκε, μεγαλωσε το ασπρο κενο και δεν αυξηθηκε ολο μαζι.
σε ευχαριστω πολυ παντως για τη σημειωση, πραγματικα πολυ χρησιμη
Δώσε ανοιχτό το παρακάτω js:
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
Εκει αλλάζει και η διάσταση της εικόνας.
Παρακαλώ αναλύστε μας λίγο ποιο αναλυτικά την λύση που βρήκατε σχετικά με την αλλαγή των διαστάσεων.
Καλημέρα. Πολύ ωραίο. Υπάρχει τρόπος να αυξηθεί ο αριθμός των αναρτήσεων. Περισσότερες από πέντε δηλαδή που είναι τώρα;
παιδιά έφτιαξα τον κώδικα και είναι οκ..
εκτος απο ένα προβληματάκι που κάνει στο mozzila ..ενώ sto chrome και στο explorer δουλεύει μια χαρά στον mozzila κανει overflow kai petaei thn eikona se allo μέρος της οθόνης και ..
το άλλο ππόβλημα είναι οτι δε μπορω να στείλω τον κώδικα..
μου εμφανίζει το εξης μήνυμα..«Το HTML σας δεν μπορεί να γίνει δεκτό: Δεν επιτρέπεται ετικέτα: STYLE»
επειδή δεν έχω ξανα στείλει σχόλια με κώδικα μπορει να μου πει κάποιος πως να στείλω να το δούν και άλλοι
το στέλνω ως σχόλιο ..
Για να αλλάξεται μέγεθος Αλλάζετε το «max-width» στι δική μου περίπτωση είναι 212px...
Υπάρχει μόνο ένα προβληματάκι .. ο firefox δεν το δια΄βαζει κανονικα ενώ στο chrome kai sto explorer ταιριάζει απόλυτα στο mozzila κάνει overflow αν κάποιος βρεί τι λύση περιμένουμε όλοι να μας πει..:)
Μέχρι πρόσφατα είχα ένα άλλο γκατζετάκι που σε μια γραμμή πάνω απο την τρέχουσα ανάρτηση φαίνονταν όλες οι τελευταίες αναρτήσεις.Ηταν απλό και διακριτικό.Ξαφνικά χάθηκε και όσο κι αν προσπάθησα να επανέλθει δε τα κατάφερα.
Εχεις κάτι ανάλογο υπόψη σου ;;;; Θα το προτιμούσα αυτό στο στυλ
Σ ευχαριστώ,πάντα δοκιμάζω και βάζω κάποια απο αυτά που προτείνεις που ταιριάζουν στο δικό μου ιστολόγιο
Εκανα καποιες αλλαγες σε κωδικες και πιστευω να πετυχε σε αυτο το μπλογκ, http://to-poulaki-tsiou.blogspot.gr/ σε αλλα δεν δουλευει σωστα
και μενα δεν μου αυξανει το πλατος.Τι μπορουμε να κανουμε ? Ειναι πολυ χρησιμο και ΠΡΕΠΕΙ να δουλεψει !!! Χαχαχα πολυ καιρο ψαχνω να βρω κατι τετοιο.......
οριστε μια διαελυθυνση για να το φτιάξετε όπως σας αρέσει... http://www.dte.web.id/2013/04/widget-blogger-untuk-menampilkan-daftar.html
Εσυ καλα την εστειλες...... Κινεζικα μπου φαινονται...τελος παντων μπορει καποιος να φτιαξει τον ατιμο τον κωδικα και να μας τον πει ? Φαινεται οτι δεν θελει να δουλεψει.... χεχεχεχε By the way Καλες γιορτες σε ολους και σε ολες !!!!!!!!!!
Καλησπέρα παιδιά… έχει ένα πολύ καλό ο dr-blogger…
http://www.dr-blogger.com/2013/10/post-slider.html
Καλησπέρα. Πολύ ωραίο. Υπάρχει τρόπος να αυξηθεί ο αριθμός των αναρτήσεων. Περισσότερες από πέντε δηλαδή που είναι τώρα;
Καλησπέρα. Πολύ ωραίο. Υπάρχει τρόπος να αυξηθεί ο αριθμός των αναρτήσεων. Περισσότερες από πέντε δηλαδή που είναι τώρα;
Καλημέρα.Σε εμένα δουλέυει καλά εκτος απο τις φώτο.Στην θέση τις εικόνας δειχνη γκρί χρώμα.
Υπάρχει κάποιος τρόπος να ορίσω το offset? Δηλαδή εφόσον είναι ορισμένο στις 5 αναρτήσεις, αυτές να μην επαναλαμβάνονται κ από κάτω στη (στο Blog widget).
Υπάρχει ένα που εμφανίζει 5 αναρτήσεις σε κάθε slide πολύ πρακτικό και όμορφο και μπαίνει απλά σαν gadget δείτε το εδώ. http://the-best-widgets.blogspot.gr/2015/05/carousel-post-slider-for-blogger.html
Great effort. Thanks for sharing.
Βρήκα το ίδιο σχεδόν σε ορθογώνια διάταξη και δουλέυει χωρίς πρόβλημα. Να το link. http://the-best-widgets.blogspot.gr/2015/08/post-slider-for-blogger-no-3.html
γεια σας ακολουθησα τις οδηγιες και δεν μπηκε μπορειτε να με βοηθησετε στειλτε αν θελετε στο facebooκ Marianna Kilimtsidou
Η αλήθεια είναι οτι έχω πρόβλημα. Έχω εφαρμόσει στο blog μου ένα θέμα κατεβασμένο απο σελίδα και ότι Post Slider και να βάλω δεν το εμφανίζει. Μπορώ να το αλλάξω αυτό?
Δημοσίευση σχολίου
Παρακαλούμε τους φίλους αναγνώστες:
ΟΧΙ SPAM,
ΟΧΙ GREEKLISH,
ΟΧΙ ΠΡΟΣΒΛΗΤΙΚΑ ΣΧΟΛΙΑ
Παρακαλώ το σχόλιό σας να είναι σχετικό με την παραπάνω ανάρτηση.
Γενικές απορίες μόνο στη σελίδα μας στο facebook.