Κυριακή 7 Ιουνίου 2009

Print this post

ΦΩΤΟΓΡΑΦΙΕΣ ΓΙΑ BACKGROUND ΣΤΟ BLOG

Καλημέρα και καλή εβδομάδα. Σήμερα θα δούμε πως μπορούμε να κάνουμε προσθήκη μια εικόνας που θέλουμε στο 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 για να δείτε περίπου πως είναι. Απλά κάντε κλικ εδώ.

22 σχόλια:

  1. αααααα τι χρησιμο αυτο!!!!!! παω να κάνω πρακτικη τις γνώσεις που καρπώθηκα!!! :)

    μια ομορφη κυριακη ευχομαι!

    ΑπάντησηΔιαγραφή
  2. @fotini Γεια σου Φωτεινάκι. Ψήφισες; Να διαβάσεις καλά γιατί μετά θα σου βάλω διαγώνισμα. Καλησπέρα και καλή εβδομάδα.

    ΑπάντησηΔιαγραφή
  3. Φίλε hachaday, με χτύπησε χθές ένας έξυπνος ιός, και μου έκανε το windows registry σαλάτα. Μπλόκαρε όλα τα internet sites που πήγαινα, και μου έδινε ένα μήνυμα να αγοράσω ένα πρόγραμμα για να απαλλαγώ απο τον ιό. Διάβασα το html του μυνήματος και τελικά, ο ιός ειναι φυτευτός απο την ίδια εταιρεία που πουλάει και το antivirus!

    Πρόκειται για την εταιρεία websafetynetwork.com που πασάρει ένα δήθεν security package (μετα εκβιασμού). Βρήκα τελικά τη λύση και με πήρε ώρα να καθαρίσω το registry. Αν θέλεις, κάνε ένα πόστ με το θέμα. Ο ιός είναι ειδική περίπτωση (πασάρεται με windows look and feel, και ο χρήστης νομίζει πως συνομιλεί με την Microsoft.

    Παραθέτω τη λύση-
    http://remove-malware.net/how-to-remove-websafetynetworkcom-hijacker/

    Σε βάζω link και στο site μου. Μεταξύ των πολλών, κάνω και εγώ web development. Tις ευχές μου

    Ο άλλος Locus:)

    ΑπάντησηΔιαγραφή
  4. @Locus Publicus Καλημέρα συνωνόματε. Καταλαβαίνω για τι ακριβώς μιλάς. Στο παρελθόν με χτύπησε και εμένα ένας παρόμοιος ιός. Αν θυμάμαι καλά το πρόγραμμα που με προέτρεπε να αγοράσω ήταν το XP Antispyware 2009. Εγώ βέβαια προτίμησα τον άλλη λύση. Το format. Πάντως είναι αρκετές εταιρίες που καταφεύγουν σ' αυτόν τον τρόπο για να πουλήσουν τα προϊόντα τους. Όντως πρέπει να γίνει μια ανάρτηση γι' αυτό το θέμα και σύντομα μάλιστα γιατί πολύς κόσμος την πατάει. Επισκέφτηκα το link που μου έδωσες. Στο κάτω μέρος έχει ένα σύνδεσμο για να γίνει download ενός remover. Είναι αξιόπιστο αυτό το πρόγραμμα;

    ΑπάντησηΔιαγραφή
  5. Το πρόγραμμα, ναί, είναι αξιόπιστο, η εταιρεία που το πουλάει είναι η http://www.pctools.com/ και για να το χρησιμοποιήσεις πρέπει να το αγοράσεις (κοστίζει 30 δολ. για 3 άδειες). Προσωπικά προτιμώ το δωρεάν antivirus πρόγραμμα που κατεβάζεις απο το www.avg.com.

    ΑπάντησηΔιαγραφή
  6. ωχ ωχ ωχ...κομματάκι δύσκολο φαίνεται...όταν έχεις και μια άλφα, μη σου πω και ωμέγα ηλικία...Θα προσπαθήσω και θα είσαι ο πρώτος που θα το μάθει...Σε ευχαριστώ προκαταβολικά :)

    ΑπάντησηΔιαγραφή
  7. @cloudconnected_2009* Στην αρχή κ'αθετι καινούριο φαίνεται βουνό σε όλους. Αν ασχοληθείς λιγάκι θα δεις ότι δεν είναι τόσο τραγικά τα πράγματα... Αν μπορώ εγώ τότε μπορείς και 'συ...

    ΑπάντησηΔιαγραφή
  8. diavasa gia to pos tha valo foto sto blog to ekana alla den tin vlepo
    alakse to xroma tou backgrund omos
    ti pige lathos ekaqna oti eipes alla tpt
    vgiati

    ΑπάντησηΔιαγραφή
  9. @GLARAX Καλημέρα. Ελπίζω να πήρες πρώτα backup του tmplate σου. Ξαναεγκατέστησε το και ξανακάνε τα βήματα από την αρχή. Το κολπάκι δουλεύει μια χαρά αλλά κάπου θα έκανες λάθος (δε μπορώ να φανταστώ τι). Απόδειξη του ότι δουλεύει είναι το test blog που παραπέμπω τους αναγνώστες στο τέλος.

    ΑπάντησηΔιαγραφή
  10. TELIKA TA KATAFERA :)))) ALLA EXW MIA ALLH ERWTISH...EKEI POU LEEI PROS8IKH GADGET STIN DIAXHRISH TOU BLOG SOU DINEI TIN DINATOTHTA NA VALEIS VIDEO APO TO YOUTUBE XORIS NA ALAKSEIS SELIDA ..ETSI DEN EINAI?
    LOIPON MPORO NA VALO OPOIO VIDEO THELO EGO H TA VAZEI PROKATHORISMENA OPOIA THELEIA AFTOS ME BASEI TIS 3 EPILOGES POU EXEIS :
    1)Τα βίντεο που έχουν προβληθεί περισσότερο
    2)Βίντεο με καλύτερη βαθμολογία
    3)Πρόσφατα βίντεο
    KAI AN 8ELW MONO 1 VIDEO EGO KAI OXI 4 POU VAZEI ?GINONTAI ALLAGES EKEI H OXI
    EYXARISTO GIA THN AMESH APANTHSH STIS 19-10

    ΑπάντησηΔιαγραφή
  11. @GLARAX ν έχεις κανάλι στο YouTube Εκεί που λέει κανάλι βάλε την ονομασία του καναλιού σου αν θέλεις να δείχνει τα videos που έχεις ανεβάσει στο YouTube (προτεινόμενο τρόπος είναι να κάνεις κανάλι και ότι video θέλεις το έχει στο κανάλι σου και μετά αυτόματα θα φαίνεται στο blog σου). Αν θέλεις σχετικά videos με κάποια θέματα βάλε λέξεις-κλειδιά. Βέβαια υπάρχει και άλλος τρόπος. Πας προσθήκη gadget και επιλέγεις HTML/JavaScript. Εκεί βάζεις τον κώδικα όποιου video θέλεις (embed) και για να τις διαστάσεις του πειράζεις τις τιμές width και height οι οποίες υπάρχουν δυο φορές η καθεμιά στους embed κώδικες των video του YouTube. Με αυτόν τον τρόπο βάζεις ότι θέλεις εσύ.

    ΑπάντησηΔιαγραφή
  12. γειαααααααααααα!
    εγω εχω προβλημα δεν μπορω με τιποτα να βαλω background!δεν ξερω γιατι..Εσβησα οοολα τα κειμενα μου μηπωςς γινει πιο ευκολο και κατοπιν και ο,τι αλλο ειχα αλλα δεν μπορω να το φτιαξω.Μηπως μπορειτε να (μαντεψετε) και να μου πειτε τι παιζει να φταιει?

    ΑπάντησηΔιαγραφή
  13. @*the new side of life* by eleni Ανέβασες τη φωτογραφία που θέλεις σε κάποια σελίδα; Έβαλες το url της φωτογραφίας σου στον κώδικα; Αν θέλεις ρίξε και μια ματιά εδώ. http://locusblogus.blogspot.com/2010/03/templates.html

    ΑπάντησηΔιαγραφή
  14. egw ftanw sthn anazhth tou ctrl + f kanw to body { background:$bgcolor; epikolhsh alla mou vgazei h anazhthsh oti den yparxei kati tetio mesa sto html mou ti na kanw???????

    ΑπάντησηΔιαγραφή
  15. @dimitrisvla Τι πρότυπο χρησιμοποιείς; Γνήσιο blogger ή τρίτου;

    ΑπάντησηΔιαγραφή
  16. Να κάνω μια ερώτηση? Ξέρω πως να βάζω την εικόνα που μου αρέσει, αλλά το πρόβλημά μου είναι αλλού. Ενώ βρήσκω ένα ωραίο background, και το βλέπω ολόκληρω, όταν το βάζω στο μπλογκ μου φαίνεται μόνο ένα κομμάτι του (ή κεντρικό ή το πάνω δεξιά ή το κάτω αριστερά, όπως το θέσω τέλος πάντων). Τι να κάνω για να φανεί ολόκληρο το background και όχι μόνο ένα κομμάτι του? Ποιά ανάλυση να χρησιμοποιήσω? Δεν ξέρω βέβαια, εάν έγινα κατανοητή.....

    ΑπάντησηΔιαγραφή
  17. @Γαληνη Τι μέγεθος είναι η φωτό που θέλεις να βάλεις για background; Καλό θα ήτανε να είναι 2MP και άνω.

    ΑπάντησηΔιαγραφή
  18. Ευχαριστώ! Πειραματήστικα αρκετά και βρήκα την άκρη!!!
    Συγχαρητήρια για το τόσο χρήσιμο μπλογκ!!!

    ΑπάντησηΔιαγραφή
  19. @Γαληνη Να 'σαι καλά... όσο πιο πολύ πειραματίζεσαι τόσο πιο πολύ μαθαίνεις... έτσι έμαθα και εγώ.

    ΑπάντησηΔιαγραφή
  20. dimitrisvla Συγνώμη για την παράλειψη... αλλά γίνεται λιγάκι χαμός εδώ πέρα. Δοκίμασες πριν κάνεις οτιδήποτε να κάνεις κλικ στο κουτάκι για προέκταση του HTML?

    ΑπάντησηΔιαγραφή

back to top