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

ΠΩΣ ΚΑΝΩ ΤΟ BLOG ΜΟΥ ΗΜΙΔΙΑΦΑΝΟ.
Μπορείτε αν θέλετε να κάνετε το blog σας ημιδιάφανο και στα 4 τμήματά του (ανάρτηση, υποσέλιδο, πλευρικές μπάρες και κεφαλίδα) ή να αφήσετε μονομερώς σε κάποια από αυτά κάποιο χρώμα ή εικόνα φόντου. Οι παρακάτω οδηγίες είναι εφαρμόσιμες πλήρως στο πρότυπο που χρησιμοποιώ δηλαδή αυτό εδώ. Σε μερικά πρότυπα δεν υπάρχει η δυνατότητα για αλλαγή χρώματος ή εικόνας backround μονομερώς για την ανάρτηση, το υποσέλιδο τις πλευρικές μπάρες και την κεφαλίδα και σας επιτρέπουν να επιλέξετε ένα χρώμα ή μία εικόνα φόντου για την ανάρτηση π.χ. ενώ για το υποσέλιδο δεν υπάρχει αυτή η δυνατότητα.

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

ΕΦΑΡΜΟΓΗ ΗΜΙΔΙΑΦΑΝΟΥ ΦΟΝΤΟΥ ΓΙΑ ΤΙΣ ΑΝΑΡΤΗΣΕΙΣ

Πηγαίνουμε στην επεξεργασία του προτύπου μας και αναζητούμε με την βοήθεια των πλήκρων Ctrl+F την εξής γραμμή κώδικα .date-outer { η οποία βρίσκεται μέσα στην ενότητα /* Posts  περίπου ανάμεσα στις γραμμές 575-605. Αφού την εντοπίσουμε προχωράμε 3 γραμμές παρακάτω και βρίσκουμε την γραμμή που γράφει background-color: $(post.background.color); την σβήνουμε και στη θέση της βάζουμε αυτή :

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4aL_E_ISb3MJv4y_QOXkdezkyb4WzA6LsPuOOdXWM2FiY9o0jrU9TlNm3YQSX6KhPYwoZ-Wz9FUkU6Z7HcF6yrqZ0dZn78pt5EwOffrsT2T1DC1EIE3aBrMi4cwthJw2hxcMji_gywA1N/s600-no/opacity-65.png); background-repeat:repeat;

Αυτό ήταν τελιώσαμε με την αλλαγή του φόντου ανάρτησης.

ΕΦΑΡΜΟΓΗ ΗΜΙΔΙΑΦΑΝΟΥ ΦΟΝΤΟΥ ΓΙΑ ΤΙΣ ΠΛΕΥΡΙΚΕΣ ΜΠΑΡΕΣ

Πηγαίνουμε στην επεξεργασία του προτύπου μας και αναζητούμε με την βοήθεια των πλήκρων Ctrl+F το εξής tabs.background.gradient  το οποίο βρίσκεται μέσα στην ενότητα  /* Variable definitions περίπου ανάμεσα στις γραμμές 135-165. Όλη η γραμμή κώδικα έχει ως εξής :

<Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url" default="none" value="url(//www.blogblog.com/1kt/awesomeinc/tabs_gradient_artsy.png)"/>

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

ΕΦΑΡΜΟΓΗ ΗΜΙΔΙΑΦΑΝΟΥ ΦΟΝΤΟΥ ΓΙΑ ΤΗΝ ΚΕΦΑΛΙΔΑ ΤΙΤΛΟΥ

Πηγαίνουμε στην επεξεργασία του προτύπου μας και αναζητούμε με την βοήθεια των πλήκρων Ctrl+F το εξής : header.background.gradient  το οποίο βρίσκεται μέσα στην ενότητα  /* Variable definitions περίπου ανάμεσα στις γραμμές 135-170. Όλη η γραμμή κώδικα έχει ως εξής :

<Variable name="header.background.gradient" description="Header Background Gradient" type="url" default="none"  value="url(//www.blogblog.com/1kt/awesomeinc/header_gradient_artsy.png)" />

Αντικαταστήσετε το μώβ link της ήδη ημιδιάφανης εικόνας φόντου για την κεφαλίδα τίτλου με ένα άλλο link ημιδιάφανης εικόνας περισσότερο ή λιγότερο ημιδιάφανης όπως το μώβ link που χρησιμοποιήσα για φόντο ανάρτησης το οποίο είναι λιγότερο ημιδιάφανο. Αν όμως έχετε σκοπό αντι για ημιδιάφανο φόντο κεφαλίδας να επιλέξετε χρώμα φόντου κεφαλίδας ή εικόνα πίσω από τον τίτλο ή εικόνα αντί του τίτλου τότε σβήστε το υπογραμισμένο μέρος από το value και μετά και αφήστε μόνο το />

Σε μερικά πρότυπα δεν θα συνατήσετε ακριβώς την παραπάνω γραμμή και για να κάνετε την αλλαγή θα πρέπει να την σβήσετε όλη και στη θέση της να βάλετε την παραπάνω και αν θέλετε αλλάζετε μόνο το μώβ link της ημιδιάφανης εικόνας με ένα δικό σας περισσότερο ή λιγότερο ημιδιάφανο ή να σβήσετε τελείως το μώβ link για να βάλετε μία εικόνα ή χρώμα φόντου κεφαλίδας τίτλου. Σε αυτήν την περίπτωση ο κώδικας θα τελειώνει έτσι type="url" default="none"/>

Eννοείται ότι στην περίπτωση αυτή που δεν θέλετε εικόνα φόντου για την κεφαλίδα τίτλου, το χρώμα του θα το ρυθμίσετε μέσα από την προσαρμογή προτύπου του blogger.

ΕΦΑΡΜΟΓΗ ΗΜΙΔΙΑΦΑΝΟΥ ΦΟΝΤΟΥ ΓΙΑ ΤΟ ΥΠΟΣΕΛΙΔΟ

Πηγαίνουμε στην επεξεργασία του προτύπου μας και αναζητούμε με την βοήθεια των πλήκρων Ctrl+F το εξής : footer.background.gradient  το οποίο βρίσκεται μέσα στην ενότητα  /* Variable definitions περίπου ανάμεσα στις γραμμές 180-200. Όλη η γραμμή κώδικα έχει ως εξής :

<Variable name="footer.background.gradient" description="Background Gradient" type="url" default="none"  value="url(//www.blogblog.com/1kt/awesomeinc/header_gradient_artsy.png)" />

Αντικαταστήσετε το μώβ link της ήδη ημιδιάφανης εικόνας φόντου για το υποσέλιδο με ένα άλλο link ημιδιάφανης εικόνας περισσότερο ή λιγότερο ημιδιάφανης όπως το μώβ link που χρησιμοποιήσα για φόντο ανάρτησης το οποίο είναι λιγότερο ημιδιάφανο. Αν όμως έχετε σκοπό αντι για ημιδιάφανο φόντο υποσέλιδου να επιλέξετε χρώμα φόντου υποσέλιδου ή εικόνα πίσω από τον τίτλο ή εικόνα αντί του τίτλου τότε σβήστε το υπογραμισμένο μέρος από το value και μετά και αφήστε μόνο το />

Σε μερικά πρότυπα δεν θα συνατήσετε ακριβώς την παραπάνω γραμμή και για να κάνετε την αλλαγή θα πρέπει να την σβήσετε όλη και στη θέση της να βάλετε την παραπάνω και αν θέλετε αλλάζετε μόνο το μώβ link της ημιδιάφανης εικόνας με ένα δικό σας περισσότερο ή λιγότερο ημιδιάφανο ή να σβήσετε τελείως το μώβ link για να βάλετε μία εικόνα ή χρώμα φόντου κεφαλίδας τίτλου. Σε αυτήν την περίπτωση ο κώδικας θα τελειώνει έτσι type="url" default="none"/>

Eννοείται ότι στην περίπτωση αυτή που δεν θέλετε εικόνα φόντου για το υποσέλιδο, το χρώμα του θα το ρυθμίσετε μέσα από την προσαρμογή προτύπου του blogger.

ΕΠΙΛΕΞΤΕ ΜΙΑ ΑΠΟ ΤΙΣ ΠΑΡΑΚΑΤΩ ΗΜΙΔΙΑΦΑΝΕΣ ΕΙΚΟΝΕΣ ΦΟΝΤΟΥ

▼ (Για blogs με ανοιχτόχρωμο φόντο ανάρτησης και μαύρα γράμματα για κυρίως κείμενο) 65% opacity.

//www.blogblog.com/1kt/awesomeinc/header_gradient_artsy.png

▼ (Για blogs με σκουρόχρωμο φόντο ανάρτησης και άσπρα γράμματα για κυρίως κείμενο) 50% opacity.

//www.blogblog.com/1kt/awesomeinc/tabs_gradient_artsy.png

▼ (Για blogs με σκουρόχρωμο φόντο ανάρτησης και άσπρα γράμματα για κυρίως κείμενο) 60% opacity.

https://lh4.googleusercontent.com/-5GiAWUcIBEI/VWywmLDS-LI/AAAAAAAARi8/uo59Uf6jOt8/w800-h640-no/DIAFANO-60.png

▼ (Για blogs με σκουρόχρωμο φόντο ανάρτησης και άσπρα γράμματα για κυρίως κείμενο) 65% opacity.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4aL_E_ISb3MJv4y_QOXkdezkyb4WzA6LsPuOOdXWM2FiY9o0jrU9TlNm3YQSX6KhPYwoZ-Wz9FUkU6Z7HcF6yrqZ0dZn78pt5EwOffrsT2T1DC1EIE3aBrMi4cwthJw2hxcMji_gywA1N/s600-no/opacity-65.png

▼ (Για blogs με σκουρόχρωμο φόντο ανάρτησης και άσπρα γράμματα για κυρίως κείμενο) 85% opacity.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYKc2RLH7SDlmQg2ZJ5MeIPFuyRJ98Ys1M9yyrSE6l3fvy7CXACU22FIqowNY3W38KHeeDD0y-tCFJiVe6lAL4zJ6Mo4AXjqawVdYThqVdjApXolJNN3vhMD7X5i2hsRe5lfhdKyt2R6ST/s4-no/DIAFANO.png