RSS

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

07 Ιον.

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

Advertisements
 
 

22 responses to “ΦΩΤΟΓΡΑΦΙΕΣ ΓΙΑ BACKGROUND ΣΤΟ BLOG

  1. fotini

    Ιουνίου 7, 2009 at 1:48 μμ

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

     
  2. hackaday

    Ιουνίου 7, 2009 at 4:39 μμ

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

     
  3. Locus Publicus

    Ιουνίου 10, 2009 at 2:07 πμ

    Φίλε 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. hackaday

    Ιουνίου 10, 2009 at 7:02 πμ

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

     
  5. Locus Publicus

    Ιουνίου 10, 2009 at 12:33 μμ

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

     
  6. hackaday

    Ιουνίου 10, 2009 at 9:27 μμ

    @Locus Publicus Ok… Thanks a lot…

     
  7. cloudconnected_2009

    Ιουνίου 13, 2009 at 2:21 μμ

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

     
  8. hackaday

    Ιουνίου 13, 2009 at 9:58 μμ

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

     
  9. GLARAX

    Νοέμβριος 19, 2009 at 10:19 πμ

    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 tptvgiati

     
  10. hackaday

    Νοέμβριος 19, 2009 at 10:34 πμ

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

     
  11. GLARAX

    Νοέμβριος 23, 2009 at 2:20 μμ

    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

     
  12. hackaday

    Νοέμβριος 23, 2009 at 8:18 μμ

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

     
  13. *the new side of life* by eleni

    Απρίλιος 9, 2010 at 9:29 πμ

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

     
  14. hackaday

    Απρίλιος 9, 2010 at 12:51 μμ

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

     
  15. dimitrisvla

    Ιουνίου 13, 2010 at 12:23 μμ

    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???????

     
  16. hackaday

    Ιουνίου 14, 2010 at 9:49 μμ

    @dimitrisvla Τι πρότυπο χρησιμοποιείς; Γνήσιο blogger ή τρίτου;

     
  17. Γαληνη

    Ιουλίου 4, 2010 at 10:55 πμ

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

     
  18. hackaday

    Ιουλίου 4, 2010 at 8:59 μμ

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

     
  19. Γαληνη

    Ιουλίου 15, 2010 at 12:26 μμ

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

     
  20. hackaday

    Ιουλίου 15, 2010 at 1:09 μμ

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

     
  21. dimitrisvla

    Αύγουστος 12, 2010 at 11:18 πμ

    ok paidia afhste to no problem

     
  22. hackaday

    Αύγουστος 12, 2010 at 11:39 πμ

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

     

Σχολιάστε

Εισάγετε τα παρακάτω στοιχεία ή επιλέξτε ένα εικονίδιο για να συνδεθείτε:

Λογότυπο WordPress.com

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό WordPress.com. Αποσύνδεση / Αλλαγή )

Φωτογραφία Twitter

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Twitter. Αποσύνδεση / Αλλαγή )

Φωτογραφία Facebook

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Facebook. Αποσύνδεση / Αλλαγή )

Φωτογραφία Google+

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Google+. Αποσύνδεση / Αλλαγή )

Σύνδεση με %s

 
Αρέσει σε %d bloggers: