Καλημέρα και καλή εβδομάδα. Σήμερα θα δούμε πως μπορούμε να κάνουμε προσθήκη μια εικόνας που θέλουμε στο blog μας ως background.
Σαν πρώτο βήμα είναι να βρείτε μια εικόνα της αρεσκείας σας και να τη σηκώσετε στο internet. Υπάρχουν πολλά sites που μπορείτε να το κάνετε αυτό. Για παράδειγμα το γνωστά σε όλους μας
Photobucket και
Flickr αλλά και πολλά άλλα.
Πάντα πριν κάνουμε οτιδήποτε παίρνουμε ένα αντίγραφο ασφαλείας (
back up) του κώδικα μας. Μετά από τον πανόπτη πάμε διάταξη και επεξεργασία HTML. Πατώντας το
Ctrl + F ανοίγει στο κάτω μέρος του browser ένα ψαχτήρι. Με
αντιγραφή και επικόλληση (copy - paste) μέσα στο ψαχτήρι του παρακάτω κώδικα:
body { background:$bgcolor;
μπορούμε να βρούμε εύκολα σε πιο σημείο του κώδικα του template βρίσκεται αυτό το κομμάτι. Αμέσως μετά το
παρακάτω κομμάτι κώδικα:
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
κάνουμε
αντιγραφή - επικόλληση (copy - paste)
τον παρακάτω κώδικα:
body {
background-color:#B38481;
background-image: url(your image 's adress);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;ή αν προτιμάτε τον κώδικα σε μια γραμμή:
body {
background:#B38481 url(your image 's adress) no-repeat center center fixed;Όπου υπάρχει κόκκινο χρώμα πρέπει να αντικατασταθεί με τη διεύθυνση όπου βρίσκεται η εικόνα που θέλετε να βάλετε. Οι παρενθέσεις παραμένουν.
Στον παραπάνω κώδικα που προσθέσαμε μπορούμε να πειράξουμε τις τιμές. Για παράδειγμα στο
background-color μπορούμε να βάλουμε όποιο χρώμα θέλουμε με έναν
color generator ή μέσα από το blogspot, μια διαδικασία που την ανάρτησα στο παρελθόν και μπορείτε να τη δείτε κάνοντας κλικ
εδώ.
Στο
background-repeat αν βάλουμε repeat αντί του no-repeat η εικόνα που βάλαμε θα επαναλαμβάνεται.
Στο
background-position μπορούμε να καθορίσουμε για το σημείο όπου θα εμφανίζεται η εικόνα. Οι τιμές που μπορούμε να βάλουμε είναι οι παρακάτω:
top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right (πάνω αριστερά, πάνω κέντρο, πάνω δεξιά κ.ο.κ.).
Στο
background-attachment αν έχουμε την τιμή
fixed τότε η εικόνα παραμένει σταθερή και γίνεται κύλιση (scroll) μόnο στο κείμενο και στα υπόλοιπα (widgets κλπ.) Αν αντί για fixed βάλουμε
default τότε η κύλιση κειμένου και εικόνας θα γίνεται ταυτόχρονα.
Θα πρέπει όμως σε όλα αυτά να συνυπολογίσουμε και το μέγεθος της εικόνας. Για να φτάσουμε σε ένα επιθυμητό αποτέλεσμα καλό θα είναι να έχουμε εγκατεστημένο πρόγραμμα επεξεργασίας στο pc μας. Το πιο γνωστό είναι το
Photoshop αλλά υπάρχουν και πολλές δωρεάν λύσεις στο internet (
κλικ). Με ένα τέτοιο πρόγραμμα μπορούμε να πειραματιστούμε στο μέγεθος της εικόνας που θα βάλουμε ως background στο blog μας.
Όταν τελειώσουμε απ' όλα θα πρέπει να πάμε από τον πανόπτη στη διάταξη και από εκεί γραμματοσειρές και χρώματα για να κάνουμε όποιες αλλάγές θέλουμε έτσι ώστε τα κείμενα μας και οτιδήποτε άλλο αναγράφεται στο blog μας να είναι ευανάγνωστα. Πολλές φορές τα χρώματα από τις εικόνες που είναι background δυσκολεύουν την ανάγνωση των κειμένων και αυτό είναι αρνητικό ως προς την επισκεψιμότητα του ιστολογίου μας. Θα πρέπει να είμαστε πολύ προσεκτικοί ως προς την επιλογή της εικόνας από άποψη σύνθεσης αυτής, χρώματα που διαθέτει και σχέδια για να μην μετατραπεί σε αρνητικό στοιχείο.
Ελπίζω να σας βοήθησα. Έφτιαξα ένα δοκιμαστικό blog για να δείτε περίπου πως είναι. Απλά κάντε κλικ
εδώ.
Αναρτήσεις
Καλημέρα και καλή εβδομάδα. Για να είναι ένα web site ή ένα blog όσο το δυνατόν λειτουργικότερο για τους επισκέπτες πρέπει να διευκολύνουμε όσο μπορούμε περισσότερο τους τελευταίους. Μην ξεχνάτε ότι οι δυσαρεστημένοι επισκέπτες δύσκολα επιστρέφουν.
