Πέμπτη, 23 Απριλίου 2009

ΕΝΣΩΜΑΤΩΣΗ ΕΙΚΟΝΑΣ ΣΤΟ BLOG

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

Πχ
Θα χρειαστούμε το link κάποιας φωτογραφίας σε προηγούμενη ανάρτηση είχαμε μιλήσει γι αυτό

Θέλουμε να βάλουμε μια φωτογραφία φόντο στο sidebar1
Πάμε στην επεξεργασία HTML και βρίσκουμε το sidebar 1
Θα είναι κάπως έτσι
#sidebar1 {
margin: 0px 10px 15px 10px;
padding: 0 0 0 0;
width: 150px;
text-align: left;
}

Μετά από το τελευταίο ερωτηματικό προσθέτουμε
background: URL(http://............................) repeat left top;
ανάμεσα από τις παρενθέσεις προσθέτουμε το linkτης εικόνας που θέλουμε να βάλουμε για φόντο και γίνεται κάπως έτσι

#sidebar1 {
margin: 0px 10px 15px 10px;
padding: 0 0 0 0;
width: 150px;
text-align: left; background: URL(http://............................) repeat left top;

}


Με την αποθήκευση πρότυπου η εικόνα μας έχει μπεί σαν φόντο στη μπάρα μας πίσω από τα gadget
Το κομάτι μετά την παρένθεση repeat left top
Μας λέει αν η φωτογραφία θα επαναλαμβάνετε η όχι και την αρχική της θέση που θα
Τοποθετηθεί η φωτογραφία οριζόντια και κάθετα.(χ και y)


Όλες οι εντολές επανάληψης που μπορούν να μπουν είναι
no-repeat (η εικόνα δεν θα επαναληφθεί )
repeat (θα επαναληφθεί οριζόντια και κάθετα)
repeat-x (θα επαναληφθεί μόνο οριζόντια)
repeat-y (θα επαναληφθεί μόνο κάθετα)

Όλες οι εντολές οριζόντιας θέσης
left (βάζει την αρχική εικόνα στην αριστερή πλευρά)
center (βάζει την αρχική εικόνα στο κέντρο)
right (βάζει την αρχική εικόνα στην δεξιά πλευρά)

Όλες οι εντολές κάθετης θέσης
top (βάζει την αρχική εικόνα στην κορυφαία θέση)
center (βάζει την αρχική εικόνα στο κέντρο)
bottom (βάζει την αρχική εικόνα στην κατώτατη θέση)

ΠΑΡΑΔΕΙΓΜΑ
Δοκιμάστε να βάλετε στα σχόλια σας πάντα στο πρόχειρο blog σας
Το παρακάτω φόντο .
Πάμε στη διεύθυνση
http://getawallpaper.com/
διαλέγουμε μία φωτογραφία πατάμε πάνω της μέχρι να εμφανιστεί σε μεγάλο μέγεθος
πάνω απ τη γραμμή διευθύνσεων αντιγράφουμε τοlink της φωτογραφίας ας πούμε http://getawallpaper.com/categories/Flowers/Bunch-of-Flowers/11.jpg
βρίσκουμε στην επεξεργασία html
το σημείο που λέει #comments

και είναι κάπως έτσι (με λιγότερες η περισσότερες επιλογές )

#comments {
margin:-25px 13px 0;
border:1px dotted $borderColor;
border-width:0 1px 1px;
padding-top:20px;
padding-$endSide:0;
padding-bottom:15px;
padding-$startSide:0;



μετά το τελευταίο ερωτηματικό προσθέτουμε
background: URL(http://getawallpaper.com/categories/Flowers/Bunch-of-Flowers/11.jpg) repeat left top;

και γίνεται

#comments {
margin:-25px 13px 0;
border:1px dotted $borderColor;
border-width:0 1px 1px;
padding-top:20px;
padding-$endSide:0;
padding-bottom:15px;
padding-$startSide:0;
background: URL(http://getawallpaper.com/categories/Flowers/Bunch-of-Flowers/11.jpg) repeat left top;


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

Το ίδιο μπορούμε να κάνουμε και σε άλλα σημεία του blog μας
Όπως πίσω απ την ανάρτηση post-body και άλλα Post, outer-wrapper, sidebar.link , Comment Header, Header, body, κτλ

ΟΙ ΦΙΛΟΙ ΜΟΥ

ΒΑΘΜΟΛΟΓΗΣΤΕ