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

<b><span style="color: blue;"><h3>Τροποποιήστε την εικόνα στην κορυφή Επικεφαλίδα του Blogger</span></b></h3><br />Υπάρχουν δύο τρόποι για να αλλάξετε την εικόνα στην κορυφή (κεφαλίδα) του blogger πρότυπου. Ο πρώτος είναι μέσω του ταμπλό Blogger:<br /><br />1 . Πηγαίνετε <span style="color: red;"><b>Διάταξη </b></span><span style="color: black;">και</span> κάντε κλικ στο ταμπλό  <b><span style="color: red;">Επεξεργασία</span></b>, που αντιστοιχεί στην επικεφαλίδα:<br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="http://3.bp.blogspot.com/_L116RpGjEMY/TDOAqIrJMGI/AAAAAAAAC8c/BAPJypfgQIo/s1600/Header%5B3%5D.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="137" src="http://3.bp.blogspot.com/_L116RpGjEMY/TDOAqIrJMGI/AAAAAAAAC8c/BAPJypfgQIo/s400/Header%5B3%5D.png" width="400" /></a></div><br /><br />2 . Στο παράθυρο που ανοίγει, κάντε κλικ στο κουμπί <b><span style="color: red;">Αναζήτηση</span></b> για να ανεβάσετε  μια εικόνα  από τον υπολογιστή σας  και στη συνέχεια  επιλέξτε αν θέλετε η εικόνα να εμφανίζεται κάτω από τον τίτλο και την περιγραφή ή Αντί για τίτλο και περιγραφή .<br /><br /><blockquote><br />Βεβαιωθείτε ότι η εικόνα είναι κεντραρισμένη, θα πρέπει να υπακούει στο χώρο για την κεφαλίδα. Σε κανονικά πρότυπα  το πλάτος  header-wrapper είναι 660px . Εάν χρησιμοποιείτε ένα τροποποιημένο πρότυπο, βεβαιωθείτε ότι το πλάτος και το ύψος του <b># header-wrapper</b> συμβαδίζει  με το μέγεθος της εικόνας σας.<br /></blockquote><br /><br />Ένας άλλος τρόπος για να τροποποιήσετε τον κώδικα απευθείας στο πρότυπο σας.<br />Για να το κάνετε αυτό, πηγαίνετε στο <b><span style="color: blue;">Διάταξη –</span>><span style="color: blue;">Επεξεργασία HTML</span> -></b> Και κάντε αναζήτηση για το <span style="color: blue;"><b># Header-wrapper</b></span> :<br /><br /><div class="code"><div class="code_content"><br /># header-wrapper (<br />width: 660px;<br />margin: 0 self 10px;<br />border: 1px solid $ bordercolor;<br />}<br /></div></div><br /><br />Μπορείτε να αλλάξετε το πλάτος ( width: <span style="color: red;">660px</span>; ) περισσότερο ή λιγότερο και να προσθέσετε ύψος στην κεφαλίδα σας , προσθέστε  ύψος, Ως εξής: <br /><br /><div class="code"><div class="code_content"><br /># header-wrapper (<br /><div style="color: red;"><br /><b>width: 660px;</b></div><br /><div style="color: red;"><br /><b>height: 120px;</b></div><br />margin: 0 auto 10px;<br />border: 1px solid $ bordercolor;<br />}<br /></div></div><br /><br />Στην ουσία , προσθέσαμε μια γραμμή η οποία είναι :  <b><span style="color: red;">height: 120px</span></b>; .<br />Μπορείτε να αυξήσετε η να μειώσετε το ύψος της επικεφαλίδας σας  .<br />Φιλοξενήσει την εικόνα σας που θέλετε να θέσετε στην επικεφαλίδα σε μια τοποθεσία (ImageShack, Photobucket, TinyPic, κ.λπ.) και να αντιγράψετε το σύνδεσμο της εικόνας. Ο σύνδεσμος πρέπει να τοποθετηθεί σε <b>φόντο </b>Όπως παρακάτω :<br /><br /><div class="code"><div class="code_content"><br /># header-wrapper (<br />width: 660px;<br />height: 120px;<br />background: url (<b style="color: red;">image url</b>) no-repeat top center;<br />margin: 0 auto 10px;<br />border: 1px solid $ bordercolor;<br />}<br /></div></div><br /><br />Η γραμμή του κώδικα :   <span style="color: red;"><b>no-repeat</b> <span style="color: blue;">καθορίζει αν η εικόνα είναι επαναλαμβανομένη η όχι.</span></span><br />Η συμπεριφορά της εικόνας μπορεί να είναι:<br /><br /><b>no-repeat - </b>Η εικόνα δεν πρόκειται να επαναληφθεί <br /><br /><b>repeat</b> - Η εικόνα επαναλαμβάνεται οριζόντια και κάθετα. <br /><br /><b>repeat-x</b> - Η εικόνα αυτή επαναλαμβάνεται οριζόντια <br /> <br /><b><b>repeat</b>-y</b> - Η εικόνα αυτή επαναλαμβάνεται κάθετα<br /><br />Η γραμμή του κώδικα :   <span style="color: red;"><b>top center  </b></span>καθορίζει τη θέση της εικόνας στην κεφαλίδα .<br />Η οποία μπορεί να είναι:<br /><br /><b>top left </b>- Η εικόνα εμφανίζεται στην πάνω αριστερή πλευρά <br /> <br /><b>top center</b> - Η εικόνα εμφανίζεται στο πάνω μέρος και στο κέντρο <br /> <br /><b>top righ</b> - Η εικόνα εμφανίζεται στην πάνω δεξιά πλευρά <br /><br /><b>bottom left </b>- Η εικόνα εμφανίζεται στο κάτω μέρος, αριστερά <br /> <br /><b>bottom center</b> - Η εικόνα εμφανίζεται στο κέντρο και κάτω <br /><br /><b>bottom right</b>- Η εικόνα εμφανίζεται στην κάτω δεξιά πλευρά .<br /><br /><h4><b>Αν θέλετε να θέσετε  σύνορα ( </b>borders) <b> γύρο από  την εικόνα σας, κάνετε τα εξής: </b><br /><br />Σύνορα γύρο από ολόκληρη την εικόνα :</h4><br /><br /><div class="code"><div class="code_content"><br />border: 1 px solid # 000000;<br /></div></div><br /><br />Όπου <b><span style="color: red;">1px</span></b> είναι το πλάτος των συνόρων (που το προσαρμόζετε όπως θέλετε)  <b><span style="color: red;"> </span></b><br /><b><span style="color: red;">solid </span></b>  - είναι το είδος των συνόρων (στην προκειμένη περίπτωση είναι  λεία ( ευθεία γραμμή ) ),<br /><b><span style="color: red;">#000000</span></b> -  είναι το χρώμα των συνόρων, στην προκειμένη περίπτωση  είναι  μαύρο.<br /><br /><b>Εάν θέλετε να θέσετε τα σύνορα  μόνο στο επάνω άκρο της εικόνας κάντε τα εξής :</b><br /><br /><div class="code"><div class="code_content"><br />border-top: 1px solid # 000000;<br /></div></div><br /><br /><b>Σύνορα στην αριστερή πλευρά της εικόνας :</b><br /><br /><div class="code"><div class="code_content"><br />border-left: 1px solid # 000000;<br /></div></div><br /><br /><b>Σύνορα στο δεξί άκρο της εικόνας:</b><br /><br /><div class="code"><div class="code_content"><br />border-right: 1px solid # 000000;<br /></div></div><br /><br /><b>Σύνορα στο κάτω μέρος  της εικόνας:</b><br /><br /><div class="code"><div class="code_content"><br />border-bottom: 1px solid # 000000;<br /></div></div><br /><br /><b>Υπενθυμίζω ότι, για να τεθούν σύνορα και στις τέσσερις γωνίες της εικόνας ,  απλά εισάγετε :</b><br /><br /><div class="code"><div class="code_content"><br />border: 1 px solid # 000000;<br /></div></div><br /><br /><b>Τύπος συνόρων  :</b><br /><br /><span style="color: red;">Dotted<b> </b></span><b>– > διακεκομμένη</b><br /><span style="color: red;">solid </span> ->   <b>Στερεός , συμπαγής</b><br /><span style="color: red;">dashed</span> –>  <i><b>Τελείες</b></i><br /><span style="color: red;">double </span>–> <b>Διπλή γραμμή</b> <br /><span style="color: red;">ridge </span> -> <b>Κορυφογραμμή</b><br /><span style="color: red;">inset</span>  –> <b>Εισερχόμενα</b><br /><span style="color: red;">outset</span> –><b>Εξερχόμενα</b><br /><span style="color: red;">none</span> –> <b>Κανένα</b> <br /><span style="color: red;">groove </span>–> <b>Αυλακωτό , ραβδώσεις</b><br /><br />Υποθέτοντας ότι θέλετε να βάλετε μια μικρή εικόνα στην κορυφή, με φόντο ένα άλλο χρώμα, ο κώδικας θα είναι :<br /><br /><div class="code"><div class="code_content"><br />background: # FFFFFF url (image url) no-repeat top left;<br /></div></div><br /><br />Όπου <b># FFFFFF</b> είναι το χρώμα φόντου, και <b>top left</b> είναι η θέση της εικόνας (αριστερά, πάνω). <br /><br /><h3><b>Πως να αφαιρέσετε τα σύνορα γύρο  από την επικεφαλίδα :</b></h3><br /><br />Για να αφαιρέσετε τα σύνορα γύρο από την επικεφαλίδα του blog  κάνετε τα εξής :<br />Ψάξτε για τον κώδικα :<br /><br /><br /><div class="code"><div class="code_content"><br />#header-wrapper {<br />width:660px;<br />margin:0 auto 10px;<br />border:1px solid $bordercolor;<br />}<br />#header-inner {<br />background-position: center;<br />margin-left: auto;<br />margin-right: auto;<br />}<br />#header { <br />margin: 5px;<br /><div style="color: red;"><br /><b>border: 1px solid $bordercolor;</b></div><br />text-align: center;<br />color:$pagetitlecolor;<br />}<br /></div></div><br /><br /><br />Και αλλάξτε τις γραμμές  <b><span style="color: red;">border: 1px solid $bordercolor;</span></b>  σε   <b><span style="color: red;">border: none;  </span></b><b><span style="color: yellow;">ή</span></b><b><span style="color: red;">  </span></b><b><span style="color: red;">border: </span></b><b><span style="color: red;">hidden;</span></b><br /><br /><span style="color: blue;"><b>Έτσι ο κώδικας μας θα γίνει:</b></span><br /><br /><div class="code"><div class="code_content"><br />#header-wrapper {<br />width:660px;<br />margin:0 auto 10px;<br />border:hidden;;<br />}<br />#header-inner {<br />background-position: center;<br />margin-left: auto;<br />margin-right: auto;<br />}<br />#header { <br />margin: 5px;<br />border:hidden;<br />text-align: center;<br />color:$pagetitlecolor;<br />}<br /></div></div>

Blogger Help Blogger Tutorials General Templates Hacks Επεξεργασία Επικεφαλίδας ( Header ).

Τροποποιήστε την εικόνα στην κορυφή Επικεφαλίδα του Blogger Υπάρχουν δύο τρόποι για να αλλάξετε την εικόνα στην κορυφή (κεφαλίδα) του blogge...

Διαβάστε περισσότερα »