Hi! Welcome...

Premium Blogger Template
FREE Premium Blogger Templates
Μοναδικά Free Blogger πρότυπα για το blog σας
Slimbox 2.02 με jquery-1.3.2 στο Bloggspot .
Πώς να εγκαταστήσετε SlimBox σε Blogger
ΙmgBox
Για να παρουσιάσετε τις εικόνες σας με στυλ !!!
31 καλυτέρα Blogger Widgets και addon
Κατάλογος συνδέσμων όπου μπορείτε να ανακαλύψετε περισσότερα widgets για το blog σας.
1 2 3 4 5

Τετάρτη, Ιανουαρίου 27

0

Επεξεργασία Επικεφαλίδας (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;
}


Πώς να αφαιρέσετε την επικεφαλίδα :

Ψάξτε για τον κώδικα :


<b:widget id='Header1' locked='true' title='το όνομα του blog σας (Κεφαλίδα)' type='Header'>
<b:includable id='main'>


Αλλάξτε την γραμμή  true  με την γραμμή  false  και έτσι θα αφαιρεθεί η επικεφαλίδα από το πρότυπο σας ( δεν θα είναι εμφανείς )

0:

 

© 2010 Bloggertrics

WordPress Theme by: WooThemes. | Converted into Blogger Templates by : Bloggertrics

ΑΡΧΙΚΗ| Sitemap| Posts RSS