Τροποποιήστε την εικόνα στην κορυφή Επικεφαλίδα του 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 (
border: 1px solid $ bordercolor;
}
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;
}
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;
color:$pagetitlecolor;
}
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;
}
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;
}
Πώς να αφαιρέσετε την επικεφαλίδα :
Ψάξτε για τον κώδικα :
<b:widget id='Header1' locked='true' title='το όνομα του blog σας (Κεφαλίδα)' type='Header'>
<b:includable id='main'>
<b:includable id='main'>
Αλλάξτε την γραμμή true με την γραμμή false και έτσι θα αφαιρεθεί η επικεφαλίδα από το πρότυπο σας ( δεν θα είναι εμφανείς )