Add Background Color To Post Titles In Blogger

 Change Post Title Color in Blogger 

Changing Background and Size

Changing Background and Size

Αλλάζουμε την εικόνα με μια δική μας.Εάν η εικόνα μας είναι μικρότερη από το μέγεθος της σελίδας μας, προσθέτουμε τον παρακάτω κώδικα CSS  και το επιλύουμε....

ΠΩΣ ΚΑΝΩ ΤΟ BLOG ΜΟΥ ΗΜΙΔΙΑΦΑΝΟ

ΠΩΣ ΚΑΝΩ ΤΟ BLOG ΜΟΥ ΗΜΙΔΙΑΦΑΝΟ.

Μπορείτε αν θέλετε να κάνετε το blog σας ημιδιάφανο και στα 4 τμήματά του (ανάρτηση, υποσέλιδο, πλευρικές μπάρες και κεφαλίδα) ή να αφήσετε μονομερώς σε κάποια από αυτά κάποιο χρώμα ή εικόνα φόντου. Οι παρακάτω οδηγίες είναι εφαρμόσιμες πλήρως στο πρότυπο που χρησιμοποιώ δηλαδή αυτό εδώ. Σε μερικά πρότυπα δεν υπάρχει η δυνατότητα για αλλαγή χρώματος ή εικόνας backround μονομερώς για την ανάρτηση, το υποσέλιδο τις πλευρικές μπάρες και την κεφαλίδα και σας επιτρέπουν να επιλέξετε ένα χρώμα ή μία εικόνα φόντου για την ανάρτηση π.χ. ενώ για το υποσέλιδο δεν υπάρχει αυτή η δυνατότητα.

Καλό θα ήταν να αλλάξετε πρότυπο αν θέλετε να αποφύγετε αυτούς τους περιορισμούς. Το πρότυπο που χρησιμοποιώ δέχεται τις περισσότερες δυνατές αλλαγές από κάθε άλλο πρότυπο του blogger και το επέλεξα για την δυνατότητα που δίνει για ημιδιάφανες πλευρικές μπάρες, ημιδιάφανη κεφαλίδα, ημιδιάφανο υποσέλιδο και στρογγυλεμένες άκρες αναρτήσεων και gadgets. Όσο για το ημιδιάφανο φόντο ανάρτησης που μας ενδιαφέρει περισότερο αυτό επιτυνχάνεται με την αντικατάσταση μιάς γραμμής κώδικα μέσα στο πρότυπο. Ξεκινάμε από αυτό λοιπόν.

BACKGROUND SLIDER FOR BLOGGER

BACKGROUND SLIDER FOR BLOGGER

Με τον παρακάτω κώδικα μπορείτε να προβάλετε όσες εικόνες θέλετε να εναλλάσονται σαν slides στη θέση του background του ιστολογίου σας. Την ταχύτητα εναλλαγής μπορείτε να την ρυθμίσετε αλλάζοντας το {speed: 400} ενώ το χρόνο που θα παραμένει κάθε φωτογραφία μπορείτε να τον ρυθμίσετε αλλάζοντας το [index]);}, 4000); Μπορείτε να αντικαταστήσετε τα πορτοκαλί links των εικόνων με τα δικά σας link εικόνων,

τα οποία καλό είναι να έχετε ανεβάσει στο Google+ για να έχετε την δυνατότητα να αλλάξετε τις διαστάσεις τους μέσα από τα link τους όπως έχω κάνει εγώ στα παρακάτω links εικόνων και τις έχω βάλει όλες σε μία μέση διάσταση 1600pxΧ1000px. Ο κώδικας πρέπει να μπεί μέσα στο πρότυπο πρίν την ετικέτα </head>.

ΔΕΙΤΕ ΤΟ BACKGROUND SLIDER ΣΕ ΛΕΙΤΟΥΡΓΙΑ ΣΕ ΑΥΤΟ ΤΟ DEMO BLOG

CLICKABLE ΠΕΡΙΟΧΕΣ ΣΤΟ BACKGROUND ΓΙΑ ΔΙΑΦΗΜΙΣΕΙΣ

CLICKABLE ΠΕΡΙΟΧΕΣ ΣΤΟ BACKGROUND ΓΙΑ ΔΙΑΦΗΜΙΣΕΙΣ

Με τον παρακάτω κώδικα μπορούμε να ορίσουμε clickable περιοχες αριστερά και δεξιά από το ιστολόγιό μας στις οποίες θα υπάρχουν σχετικές διαφημιστικές εικόνες κολλημένες στην βασική εικόνα του background μας. Βασική προϋπόθεση είναι το ιστολόγιό μας να μην έχει συνολικό πλάτος κάτω από 1100px και να είναι κεντραρισμένο ώστε να περισεύουν αριστερά και δεξιά από 100 ως 200 px. Με ένα συνολικό πλάτος 1100px οι διαφημίσεις μας θα είναι ορατές ακόμα και σε ένα laptop με 15 ίντσες οθόνη και ανάλυση 1368Χ768. Δηλαδή 1100+120+120=1340 px.

Ο κώδικας αυτὀς μπαίνει απλά σαν gadget σε οποιοδήποτε σημείο του blog θέλετε.

ΕΙΚΟΝΑ BACKGROUND ΣΤΟ BLOG ΜΟΥ ΠΑΝΩ ΑΠΟ 300KB

ΠΩΣ ΒΑΖΩ ΕΙΚΟΝΑ BACKGROUND ΣΤΟ BLOG ΜΟΥ ΠΑΝΩ ΑΠΟ 300KB

Για να βάλουμε μία εικόνα για background στο blog μας η οποία να είναι πάνω από το όριο των 300KB που βάζει ο blogger πρέπει να πάμε στην επεξεργασία του προτύπου μας και αναζητούμε με την βοήθεια των πλήκτρων Ctrl+F το body.background το οποίο βρίσκεται στην ενότητα /* Variable definitions και μεταξύ των γραμμών 140-160. Ο κώδικας σε εκείνο το σημείο θα εμφανίζεται κάπως έτσι.

Πως Αλλάζουμε Αυτόματα BACKGROUND στο Blog

ΠΩΣ ΝΑ ΑΛΛΑΖΕΙ ΤΟ BLOG ΣΑΣ ΑΥΤΟΜΑΤΑ BACKROUND ΚΑΘΕ 1 ΛΕΠΤΟ

Με τον παρακάτω κώδικα το blog σας θα αλλάζει αυτόματα backround κάθε 1 λεπτό. Δεν υπάρχει ο περιορισμός του blogger για εικόνες μέχρι 300 Kb. Μπορείτε να βάλετε 60 διαφορετικά backround 1 για κάθε λεπτό. Μπορείτε να βάλετε βέβαια και οσα λιγότερα θέλετε αλλάζοντας τα πράσινα νούμερα που αντιστοιχούν στα λεπτά της τρέχουσας ώρας. Αν θέλετε να εμφανίζονται 4 backround την ώρα θα κρατήσετε 4 γραμμές κώδικα και θα αλλάξετε τα λεπτά που θα εμφανίζονται οι εικόνες· π.χ. if(x>=0 && x<15), if(x>=15 && x<30), if(x>=30 && x<45) και if(x>=45 && x<0). Για την ευθυγράμμιση της εικόνας και την επαναληψή της θα ισχύσουν οι ρυθμίσεις που έχετε κάνει μέσα από την προσαρμογή του προτύπου. Ο κώδικας μπαίνει απλά σαν gadget.