Latest Blog News: Διαβάζετε πάντα και τα ΣΧΟΛΙΑ των αναρτήσεων!

Αυτοματο Slider των τελευταιων αναρτησεων - Automatic Slider for Blogger


Print Friendly and PDFPrintPrint Friendly and PDFPDF

Ένα απλό και αυτόματο slider όπως φαίνεται στην παραπάνω εικόνα. 

Η προσθήκη του είναι εύκολη σαν απλό 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>
Αλλάζετε το http://www.bloggertips.gr με τη διεύθυνση της δικής σας ιστοσελίδας.

Και αποθήκευση.

Αν αντιμετωπίσατε κάποιο πρόβλημα, ενημερώστε μας με σχόλιο εδώ ή στη σελίδα μας στο facebook.

Copyrights: http://www.bloggertips.gr/

Stumble
Delicious
Technorati
Twitter
Facebook

26 comments:

PANAXA-BLOG είπε...

πολυ καλο αλλα .. με ποιον τροπο μπορει να αλαξει το μεγεθός? (πλάτος-ύψος)

Ἀκτήμων είπε...

Ἐξαιρετικό!
Συμφωνῶ μέ τόν PANAXA καί ὑποβάλλω τό ἴδιον ἐρώτημα:Πῶς ἀλλάζουμε τίς διαστάσεις;
Aktimon

bloggertips.gr είπε...

το ψαχνω και εγω αυτο, αλλα δεν το εχω βρει ..
δοκιμασα τις ετικετες μεσα στον κωδικα, αλλα δεν επιασε..
απο οτι φαινεται η αλλαγη πρεπει να γινει μεσα στο .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>

bloggertips.gr είπε...

το δοκιμασα, και ενω στο υψος αυξανει, δεν "ακουει" στο πλατος..
και στο υψος που αυξηθηκε, μεγαλωσε το ασπρο κενο και δεν αυξηθηκε ολο μαζι.

σε ευχαριστω πολυ παντως για τη σημειωση, πραγματικα πολυ χρησιμη

Ανώνυμος είπε...

Δώσε ανοιχτό το παρακάτω js:

<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>

Εκει αλλάζει και η διάσταση της εικόνας.

PANAXA-BLOG είπε...

Παρακαλώ αναλύστε μας λίγο ποιο αναλυτικά την λύση που βρήκατε σχετικά με την αλλαγή των διαστάσεων.

Ανώνυμος είπε...

Καλημέρα. Πολύ ωραίο. Υπάρχει τρόπος να αυξηθεί ο αριθμός των αναρτήσεων. Περισσότερες από πέντε δηλαδή που είναι τώρα;

Ανώνυμος είπε...

παιδιά έφτιαξα τον κώδικα και είναι οκ..
εκτος απο ένα προβληματάκι που κάνει στο 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/ σε αλλα δεν δουλευει σωστα

Max Verstappen Greek Fans® είπε...

και μενα δεν μου αυξανει το πλατος.Τι μπορουμε να κανουμε ? Ειναι πολυ χρησιμο και ΠΡΕΠΕΙ να δουλεψει !!! Χαχαχα πολυ καιρο ψαχνω να βρω κατι τετοιο.......

Ανώνυμος είπε...

οριστε μια διαελυθυνση για να το φτιάξετε όπως σας αρέσει... http://www.dte.web.id/2013/04/widget-blogger-untuk-menampilkan-daftar.html

Max Verstappen Greek Fans® είπε...

Εσυ καλα την εστειλες...... Κινεζικα μπου φαινονται...τελος παντων μπορει καποιος να φτιαξει τον ατιμο τον κωδικα και να μας τον πει ? Φαινεται οτι δεν θελει να δουλεψει.... χεχεχεχε By the way Καλες γιορτες σε ολους και σε ολες !!!!!!!!!!

Unknown είπε...

Καλησπέρα παιδιά… έχει ένα πολύ καλό ο dr-blogger…
http://www.dr-blogger.com/2013/10/post-slider.html

Ανώνυμος είπε...

Καλησπέρα. Πολύ ωραίο. Υπάρχει τρόπος να αυξηθεί ο αριθμός των αναρτήσεων. Περισσότερες από πέντε δηλαδή που είναι τώρα;

ΣΥΛΛΟΓΟΣ ΦΙΛΩΤΙΤΩΝ ΝΑΞΟΥ είπε...

Καλησπέρα. Πολύ ωραίο. Υπάρχει τρόπος να αυξηθεί ο αριθμός των αναρτήσεων. Περισσότερες από πέντε δηλαδή που είναι τώρα;

Unknown είπε...

Καλημέρα.Σε εμένα δουλέυει καλά εκτος απο τις φώτο.Στην θέση τις εικόνας δειχνη γκρί χρώμα.

Ανώνυμος είπε...

Υπάρχει κάποιος τρόπος να ορίσω το offset? Δηλαδή εφόσον είναι ορισμένο στις 5 αναρτήσεις, αυτές να μην επαναλαμβάνονται κ από κάτω στη (στο Blog widget).

Δημήτρης Νίκαια είπε...

Υπάρχει ένα που εμφανίζει 5 αναρτήσεις σε κάθε slide πολύ πρακτικό και όμορφο και μπαίνει απλά σαν gadget δείτε το εδώ. http://the-best-widgets.blogspot.gr/2015/05/carousel-post-slider-for-blogger.html

Rihan είπε...

Great effort. Thanks for sharing.

Γιώργος Ελευσίνα είπε...

Βρήκα το ίδιο σχεδόν σε ορθογώνια διάταξη και δουλέυει χωρίς πρόβλημα. Να το link. http://the-best-widgets.blogspot.gr/2015/08/post-slider-for-blogger-no-3.html

#Black_Princess είπε...
Αυτό το σχόλιο αφαιρέθηκε από τον συντάκτη.
Unknown είπε...

γεια σας ακολουθησα τις οδηγιες και δεν μπηκε μπορειτε να με βοηθησετε στειλτε αν θελετε στο facebooκ Marianna Kilimtsidou

Ανώνυμος είπε...

Η αλήθεια είναι οτι έχω πρόβλημα. Έχω εφαρμόσει στο blog μου ένα θέμα κατεβασμένο απο σελίδα και ότι Post Slider και να βάλω δεν το εμφανίζει. Μπορώ να το αλλάξω αυτό?

Δημοσίευση σχολίου

Παρακαλούμε τους φίλους αναγνώστες:

ΟΧΙ SPAM,
ΟΧΙ GREEKLISH,
ΟΧΙ ΠΡΟΣΒΛΗΤΙΚΑ ΣΧΟΛΙΑ

Παρακαλώ το σχόλιό σας να είναι σχετικό με την παραπάνω ανάρτηση.
Γενικές απορίες μόνο στη σελίδα μας στο facebook.

 
© Copyright 2009-14 bloggertips.gr | All rights reserved. | Επικοινωνία | LK Magazine v2 from Lasantha | Πίσω στην ΚΟΡΥΦΗ | | Subscribe in a reader (Google,Yahoo κα)

* free blogger tips,tricks,gadgets,widgets,templates,themes,help,hacks,design,domains,xml,html,blogspot.gr *