Επεξεργασία Επικεφαλίδας ( Header ). |  Στάλες στο γαλάζιο ® <link href='http://3.bp.blogspot.com/_L116RpGjEMY/TDOAqIrJMGI/AAAAAAAAC8c/BAPJypfgQIo/s72-c/Header%5B3%5D.png' rel='https://4.bp.blogspot.com/-ucvLyH7G8ns/WNrpJ42EDOI/AAAAAAAAfwo/V5doGhzXC8QztinTcD9Jfy_YBPCPzpPOgCLcB/s640/Stales_sto_Galazio.jpg'/>

0

Τροποποιήστε την εικόνα στην κορυφή Επικεφαλίδα του 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;
}

Δημοσίευση σχολίου Blogger

Παρακαλώ, την προσοχή σας ! ! !

* Εάν εντοπίσετε κάποιο πρόβλημα σε κάποια δημοσίευση (μη ενεργός συνδεσμος λ.χ. ή οτιδήποτε άλλο), παρακαλούμε κάντε τον κόπο να γράψετε στα σχόλιά σας, το οποιοδήποτε πρόβλημά σας, ώστε να προβούμε στην άμεση διόρθωσή του.
Επίσης, μπορείτε να αποστείλετε ένα "Ευχαριστώ" προς όσους ασχολήθηκαν & σας προσέφεραν ένα... κομμάτι από τη γνώση τους.

Παράκληση προς τους φίλους αναγνώστες-σχολιαστές:

* Να αποφεύγετε να γράφετε με greekglish γιατί τα σχόλιά σας ΔΕΝ θα γίνονται δεκτά.
* Αποφεύγετε το spamάρισμα στα σχόλια. - Please don't spam me!
* Σε περίπτωση που δεν έχετε καταλάβει κάτι, επικοινωνήστε μαζί μας μέσα από την φόρμα των σχολίων και θα σας απαντήσουμε σε εύλογο χρόνο, γι' αυτό ΜΗΝ καταφεύγετε στη αποστολή e-mail για τις όποιες απορίες σας.
* Χρησιμοποιήστε το Reply (που βρίσκεται κάτω από την εικόνα χρήστη), αν θέλετε να του απευθύνετε το λόγο, ή να απαντήσετε σε προυγούμενο σχόλιο.
* Το μέγιστο όριο χαρακτήρων είναι 4.096
* Τα σχόλιά σας θα δημοσιεύονται μετά τον απαραίτητο έλεγχο.

Σημείωση: Όσοι θέλετε να παίρνετε ειδοποιήσεις για τα σχόλια που κανετε, μην ξεχάσετε να τικάρετε το κουμπί "Να λαμβάνω ειδοποιήσεις"

Σας Ευχαριστούμε για την κατανόηση και την επίσκεψή σας.!

 
Top
Blogger Tutorials

Δημιουργήστε τώρα ένα ιδανικό ιστολόγιο, χωρίς να ξοδέψετε ούτε 1€.Περισσότερα από 500 tutorials είναι στη διάθεσή σας.
Οι διαχειριστές του ιστολογίου «Στάλες στο γαλάζιο» σας συμβουλεύουν...
Αποφεύγετε την οποιαδήποτε προσφερόμενη "βοήθεια" από τυχάρπαστους και κατ' επίφαση "web designers", που από ιδιοτέλεια και μόνο προσπαθούν να εκμεταλλευθούν την άγνοιά σας!!!
Με εκτίμηση
«Στάλες στο γαλάζιο»
:-)