POST SLIDER FOR BLOGGER No 1

POST SLIDER FOR BLOGGER No 1
Με τον παρακάτω κώδικα που μπορείτε να τον βάλετε απλά σαν gadget μπαίνει ένα post slider στο blog σας του οποίου τις διαστάσεις αλλάζετε σύμφωνα με το πλάτος που διαθέτετε. Απλά θα χρειαστεί να βάλετε περίπου 12px λιγότερο πλάτος από ότι διαθέτετε γιατί υπολογίζονται και τα κενά με το περίγραμμα. Η γραμματοσειρά αλλάζει μέγεθος εκεί που λέει· font-size:16px; Οι σύνδεσμοι που οδηγούν στην αναρτηση είναι με τα πράσινα γράμματα. Οι εικόνες των αναρτήσεων είναι με κόκκινα γράμματα. Το φόντο του slider αλλάζει εκεί που λέει background-image: url(https://lh3... Και μπορεί να γίνει σκέτο χωρίς εικόνα φόντου δηλαδή έτσι background: #661111; Ο τίτλος της ανάρτησης είναι με κίτρινα γράμματα και ο χρόνος εναλλαγής των slides είναι στο τέλος με πορτοκαλί νούμερο.

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

<style>

.sliderwrapper{position: relative;overflow: hidden;border: 2px solid #4EFF44;width: 948px;

height: 200px;padding:8px;margin-left:0px;margin-right:0px;}

.sliderwrapper .contentdiv{visibility: hidden;position: absolute;left:0;top:0;padding:8px;text-decoration:none;color: #FFFFFF;font-family:Arial;font-size:16px;font-style:normal;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhykeUeG_R7R2axOi-NJPGNA3amDJ5WxV3gb78513TLrQGMM7ES6mpKAPyiEG8RCSG3PWG8Rzq8XKjZNG4qGC5wxXJqqP_Vp2Om3_1Rptu3ofhoVwOaJ-VTiFbTbeaqfE28ChdZ8tEzTYvI/w960-h25-no/Perple-Wood-25.jpg);background-position:center;background-repeat:repeat;width:948px;height:100%;margin-top:0px;}

.pagination{width:960px;text-align:left;background-color:#333333;padding:3px;margin-top:2px;height:20px;margin-left:0px;}

.pagination a{padding: 3px;text-decoration: none;color: #000000;background: #FF6600;}

.pagination a:hover, .pagination a.selected{color: #000000;background-color: #4EFF44;}

</style>

<h2><a href="http://the-best-widgets.blogspot.gr/2015/02/simple-slideshow-with-navigation-buttons.html" target="_blank">SIMPLE SLIDESHOW WITH NAVIGATION BUTTONS</a></h2>Με τον παρακάτω κώδικα μπορούμε να βάλουμε στο blog μας ένα απλό slideshow με κουμπιά εναλλαγής μεταξύ των εικόνων, με όσες εικόνες θέλουμε, με ότι διαστάσεις θέλουμε, και με όποια ταχύτητα εναλλαγής των εικόνων επιλέξουμε. Αλλάξτε τα μώβ links των εικόνων με τις δικές σας εικόνες. Αλλάξτε τις διαστάσεις του slideshow αλλάζοντας τα γαλάζια νούμερα. Αλλάξτε την ταχύτητα εναλλαγής των εικόνων αλλάζοντας το πορτοκαλί νούμερο. Βάλτε το σωστό αριθμό εικόνων που έχει το slideshow σας αντικαθιστώντας το πράσινο νούμερο (step9).</a></div>

<h2><a href="http://the-best-widgets.blogspot.gr/2015/02/slideshow-with-thumbnails.html" target="_blank">SLIDESHOW WITH THUMBNAILS</a></h2>Το παρακάτω slideshow μας δείχνει τις εικόνες του στο μέγεθος που θα του ορίσουμε όταν περάσουμε τον δείκτη του ποντικιού μας πάνω από τις μικρογραφίες των εικόνων που εμφανίζονται στο πάνω μέρος του slideshow. Περιέχει κώδικα css και html και μπορεί να μπεί σαν gadget σε οποιοδήποτε σημείο του blog μας αρκεί να προσαρμόσουμε τις διαστάσεις του. Οι διαστάσεις του slideshow μπορούν να αλλάξουν αλλάζοντας τα γαλάζια νούμερα στη 5η και 6η γραμμή του κώδικα. Οι διαστάσεις των μικρογραφιών των εικόνων αλλάζουν αλλάζοντας τα πράσινα νούμερα στη 43ηκαι 44η γραμμή του κώδικα.</a></div>

<h2><a href="http://the-best-widgets.blogspot.gr/2015/02/share-buttons.html" target="_blank">SHARE BUTTONS ΣΤΟ ΤΕΛΟΣ ΤΗΣ ΑΝΑΡΤΗΣΗΣ</a></h2>Για να βάλουμε share buttons στο τέλος της κάθε ανάρτησής μας θα χρειαστεί να βάλουμε τα παρακάτω κομμάτια κώδικα σαν gadget (1ος κώδικας) ή μέσα στο πρότυπο του blog μας (2ος κώδικας). Ο πρώτος κώδικας είναι από το sharethis.com και αν θέλετε περισσότερα ή λιγότερα κουμπιά καθώς και άλλο στυλ κουμπιών θα πρέπει να κάνετε εγγραφή για να κάνετε αυτές τις τροποποιήσεις και να σας δώσει νέο κώδικα. Ο συγκεκριμένος έχει 9 κουμπιά τα οποία εμφανίζονται ακριβώς από κάτω. Δίνω και άλλες 2 παραλλαγές του με 8 και 7 κουμπιά πιο κάτω για αυτούς που δεν έχουν μεγάλο πλάτος ανάρτησης.</a></div>

<h2><a href="http://the-best-widgets.blogspot.gr/2015/02/scroll-bar.html" target="_blank">ΠΡΟΣΦΑΤΕΣ ΑΝΑΡΤΗΣΕΙΣ ΜΕ ΤΙΤΛΟΥΣ ΠΕΡΙΓΡΑΦΗ, ΕΙΚΟΝΕΣ, & SCROLL BAR</a></h2>Αυτό το widget εμφανίζει τις πιο πρόσφατες αναρτήσεις με τίτλους, περιγραφή, εικόνες και scroll bar. Μπορεί να εμφανίσει ακόμα και όλες τις αναρτήσεις σας αν αλλάξετε τον αριθμό των αναρτήσεων που θα εμφανίζονται. Είναι ιδανικό για μία σελίδα αρχειοθήκη αλλά μπορείτε να το βάλετε ακόμα και σε κάποια πλευρική μπάρα. Οι διαστάσεις μπορούν να αλλάξουν αν αλλάξετε τα γαλάζια νούμερα. Ο αριθμός των χαρακτήρων του τίτλου αλλάζει αλλάζοντας το νούμερο με το ρόζ χρώμα. Ο αριθμός των χαρακτήρων της περιγραφής αλλάζει αλλάζοντας το νούμερο με το πορτοκαλί χρώμα. Το μέγεθος των εικόνων των αναρτήσεων αλλάζει αλλάζοντας το νούμερο με το μώβ χρώμα.</a></div>

<h2><a href="http://the-best-widgets.blogspot.gr/2015/02/blog-post_13.html" target="_blank">ΠΩΣ ΕΜΦΑΝΙΖΩ ΤΙΣ ΑΝΑΡΤΗΣΕΙΣ ΜΟΥ ΑΝΑ ΕΤΙΚΕΤΕΣ</a></h2>Αυτός ο κώδικας μου επιτρέπει να εμφανίσω τους τίτλους των αναρτήσεών μου ανά ετικέτες με βάση τις γενικές ετικέτες που χρησιμοποιώ και έτσι να παρουσιάσω όλα τα περιεχόμενα του blog μου σε μία σελίδα ή να παρουσιάσω τι αναρτήσεις που υπάρχουν στο blog μου για 1 ή περισσότερες γενικές ετικέτες σε κάποια πλευρική μπάρα ή στο υποσέλιδο. Πρίν από τους τίτλους των αναρτήσεων ανα ετικέτα μπορούμε να βάλουμε επικεφαλίδα που να δηλώνει για ποιο θέμα είναι οι τίτλοι των αναρτήσεων που θα εμφανίζονται. Επίσης μπορούμε να καθορίσουμε πόσοι τίτλοι αναρτήσεων θα εμφανίζονται αλλάζοντας το γαλάζιο νούμερο.</a></div>

<h2><a href="http://the-best-widgets.blogspot.gr/2015/02/blog-post_6.html" target="_blank">ΠΩΣ ΒΑΖΩ ΜΙΑ ΕΙΚΟΝΑ ΓΙΑ ΦΟΝΤΟ ΑΝΑΡΤΗΣΗΣ</a></h2>Για να βάλω μία εικόνα για φόντο ανάρτησης αντι για το απλό άσπρο ή σκούρο χρώμα που μας δίνει ο blogger πρέπει να πάω στην επεξεργασία του προτύπου και να ανοίξω το πρώτο βελάκι που θα συναντήσω το οποίο βρίσκεται περίπου ανάμεσα στις γραμμές 13-43 του κώδικα του blog μας για να επεκταθεί ο κρυμένος κώδικας ο οποίος είναι με μπλέ γράμματα. Πηγαίνουμε στην ενότητα /*Posts ------*/ περίπου ανάμεσα στις γραμμές 575-605 και ψάχνουμε τη γραμμή που γράφει .date-outer { και μετά από 3 γραμμές βρίσκουμε την γραμμή που γράφει background-color: $(post.background.color); την σβήνουμε και στη θέση της βάζουμε αυτή : …</a></div>

<h2><a href="http://the-best-widgets.blogspot.gr/2015/02/blog-post_16.html" target="_blank">ΠΩΣ ΒΑΖΩ ΔΙΑΦΟΡΕΤΙΚΟ ΦΟΝΤΟ ΣΕ ΚΑΘΕ ΑΝΑΡΤΗΣΗ</a></h2>Για να βάλουμε διαφορετικό φόντο ή εικόνα φόντου σε κάθε ανάρτηση θα χρειαστεί να προσθέσουμε 3-4 γραμμές κώδικα στο τέλος της ανάρτησης αυτής που θέλουμε να εμφανίζεται με διαφορετικό χρώμα φόντου αλλά ακόμα και με διαφορετική εικόνα φόντου. Αν βάλουμε τον κώδικα αυτόν στην αρχή της ανάρτησης τότε όσες αναρτήσεις εμφανίζονται στην αρχική σελίδα είτε έχουν είτε δεν έχουν read more θα έχουν το χρώμα ή την εικόνα φόντου που επιλέξαμε για αυτήν την ανάρτηση που ήταν μέσα στις 2-15 ή και περισσότερες αναρτήσεις της αρχικής μας σελίδας.</a></div></div>

featuredcontentslider.init({

id: "slider1",

contentsource: ["inline", ""],

toc: "#increment",

nextprev: ["Previous", "Next"],

enablefade: [true, 0.1],

autorotate: [true, 3500],

onChange: function(previndex, curindex){}})

</script>

Τετ	Πεμ	Παρ	Σαβ	Κυρ	Δευ

+30°	+27°	+25°	+26°	+25°	+26°
+21°	+22°	+22°	+24°	+23°	+23°

WIDGETS FOR BLOGS

SANTORINI

SANTORINI

ZAKYNTHOS

LEYKADA

KEFALLONIA

KERKYRA

RODOS

GADGETS FOR BLOGS