Επεξεργασία Επικεφαλίδας ( Header ).

Τροποποιήστε την εικόνα στην κορυφή Επικεφαλίδα του Blogger

Υπάρχουν δύο τρόποι για να αλλάξετε την εικόνα στην κορυφή (κεφαλίδα) του blogger πρότυπου. Ο πρώτος είναι μέσω του ταμπλό Blogger:

1 . Πηγαίνετε Διάταξη και κάντε κλικ στο ταμπλό  Επεξεργασία, που αντιστοιχεί στην επικεφαλίδα:

2 . Στο παράθυρο που ανοίγει, κάντε κλικ στο κουμπί Αναζήτηση για να ανεβάσετε  μια εικόνα  από τον υπολογιστή σας  και στη συνέχεια  επιλέξτε αν θέλετε η εικόνα να εμφανίζεται κάτω από τον τίτλο και την περιγραφή ή Αντί για τίτλο και περιγραφή .

Βεβαιωθείτε ότι η εικόνα είναι κεντραρισμένη, θα πρέπει να υπακούει στο χώρο για την κεφαλίδα. Σε κανονικά πρότυπα  το πλάτος  header-wrapper είναι 660px . Εάν χρησιμοποιείτε ένα τροποποιημένο πρότυπο, βεβαιωθείτε ότι το πλάτος και το ύψος του # header-wrapper συμβαδίζει  με το μέγεθος της εικόνας σας.

Ένας άλλος τρόπος για να τροποποιήσετε τον κώδικα απευθείας στο πρότυπο σας.
Για να το κάνετε αυτό, πηγαίνετε στο Διάταξη –>Επεξεργασία HTML -> Και κάντε αναζήτηση για το # Header-wrapper :

# header-wrapper (
width: 660px;
margin: 0 self 10px;
border: 1px solid $ bordercolor;
}

Μπορείτε να αλλάξετε το πλάτος ( width: 660px; ) περισσότερο ή λιγότερο και να προσθέσετε ύψος στην κεφαλίδα σας , προσθέστε  ύψος, Ως εξής:

# header-wrapper (

width: 660px;

height: 120px;

margin: 0 auto 10px;
border: 1px solid $ bordercolor;
}

Στην ουσία , προσθέσαμε μια γραμμή η οποία είναι :  height: 120px; .
Μπορείτε να αυξήσετε η να μειώσετε το ύψος της επικεφαλίδας σας  .
Φιλοξενήσει την εικόνα σας που θέλετε να θέσετε στην επικεφαλίδα σε μια τοποθεσία (ImageShack, Photobucket, TinyPic, κ.λπ.) και να αντιγράψετε το σύνδεσμο της εικόνας. Ο σύνδεσμος πρέπει να τοποθετηθεί σε φόντο Όπως παρακάτω :

# header-wrapper (
width: 660px;
height: 120px;
background: url (image url) no-repeat top center;
margin: 0 auto 10px;
border: 1px solid $ bordercolor;
}

Η γραμμή του κώδικα :   no-repeat καθορίζει αν η εικόνα είναι επαναλαμβανομένη η όχι.
Η συμπεριφορά της εικόνας μπορεί να είναι:

no-repeat - Η εικόνα δεν πρόκειται να επαναληφθεί

repeat - Η εικόνα επαναλαμβάνεται οριζόντια και κάθετα.

repeat-x - Η εικόνα αυτή επαναλαμβάνεται οριζόντια

repeat-y - Η εικόνα αυτή επαναλαμβάνεται κάθετα

Η γραμμή του κώδικα :   top center  καθορίζει τη θέση της εικόνας στην κεφαλίδα .
Η οποία μπορεί να είναι:

top left - Η εικόνα εμφανίζεται στην πάνω αριστερή πλευρά

top center - Η εικόνα εμφανίζεται στο πάνω μέρος και στο κέντρο

top righ - Η εικόνα εμφανίζεται στην πάνω δεξιά πλευρά

bottom left - Η εικόνα εμφανίζεται στο κάτω μέρος, αριστερά

bottom center - Η εικόνα εμφανίζεται στο κέντρο και κάτω

bottom right- Η εικόνα εμφανίζεται στην κάτω δεξιά πλευρά .

Αν θέλετε να θέσετε  σύνορα ( borders)  γύρο από  την εικόνα σας, κάνετε τα εξής: 

Σύνορα γύρο από ολόκληρη την εικόνα :

border: 1 px solid # 000000;

Όπου 1px είναι το πλάτος των συνόρων (που το προσαρμόζετε όπως θέλετε)   
solid   - είναι το είδος των συνόρων (στην προκειμένη περίπτωση είναι  λεία ( ευθεία γραμμή ) ),
#000000 -  είναι το χρώμα των συνόρων, στην προκειμένη περίπτωση  είναι  μαύρο.

Εάν θέλετε να θέσετε τα σύνορα  μόνο στο επάνω άκρο της εικόνας κάντε τα εξής :

border-top: 1px solid # 000000;

Σύνορα στην αριστερή πλευρά της εικόνας :

border-left: 1px solid # 000000;

Σύνορα στο δεξί άκρο της εικόνας:

border-right: 1px solid # 000000;

Σύνορα στο κάτω μέρος  της εικόνας:

border-bottom: 1px solid # 000000;

Υπενθυμίζω ότι, για να τεθούν σύνορα και στις τέσσερις γωνίες της εικόνας ,  απλά εισάγετε :

border: 1 px solid # 000000;

Τύπος συνόρων  :

Dotted – > διακεκομμένη
solid  ->   Στερεός , συμπαγής
dashed –>  Τελείες
double –> Διπλή γραμμή
ridge  -> Κορυφογραμμή
inset  –> Εισερχόμενα
outset –>Εξερχόμενα
none –> Κανένα
groove –> Αυλακωτό , ραβδώσεις

Υποθέτοντας ότι θέλετε να βάλετε μια μικρή εικόνα στην κορυφή, με φόντο ένα άλλο χρώμα, ο κώδικας θα είναι :

background: # FFFFFF url (image url) no-repeat top left;

Όπου # FFFFFF είναι το χρώμα φόντου, και top left είναι η θέση της εικόνας (αριστερά, πάνω).

Πως να αφαιρέσετε τα σύνορα γύρο  από την επικεφαλίδα :

Για να αφαιρέσετε τα σύνορα γύρο από την επικεφαλίδα του blog  κάνετε τα εξής :
Ψάξτε για τον κώδικα :

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;

border: 1px solid $bordercolor;

text-align: center;
color:$pagetitlecolor;
}

Και αλλάξτε τις γραμμές  border: 1px solid $bordercolor;  σε   border: none;  ή  border: hidden;

Έτσι ο κώδικας μας θα γίνει:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:hidden;;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border:hidden;
text-align: center;
color:$pagetitlecolor;
}