Τρίτη, 26 Νοεμβρίου 2013

Blog Makeover: Δώστε χαρακτήρα στους τίτλους των αναρτήσεων!

Κοινοποιήστε Share to Facebook Share to Twitter Email This
Ναι, είναι αλήθεια! Έχω βαλθεί να σας κάνω εξπέρ στο blogging!
Χωρίς πολλά-πολλά, επειδή μας διαβάζουν και απλοί "περαστικοί", μπαίνω στο...ψητό.
Αυτό θα σας φανεί πολύ εύκολο! Με μια γραμμή κώδικα, το blog  σας θα αποκτήσει άλλη χάρη! Είναι απολύτως προαιρετικό και μόνο διακοσμητικό!
Θα αλλάξουμε την εμφάνιση των τίτλων των αναρτήσεών μας.




Πριν: ο τίτλος μας είναι ένας απλός σύνδεσμος, χωρίς καμία διακόσμηση.

Οι τίτλοι πριν το makeover

Μετά: τοποθετήσαμε τον τίτλο μέσα σε ένα όμορφο κουτάκι με περίγραμμα και στρογγυλεμένες άκρες, και ευθυγραμμίσαμε το κείμενο στη μέση, αντί για αριστερά που ήταν η προεπιλογή.

Οι τίτλοι μετά το makeover

Θα το κάνετε μέσα σε 20 δευτερόλεπτα, χωρίς να χρειάζεται να ξέρετε καθόλου CSS!

Πάμε Πρότυπο Προσαρμογή Προηγμένη Προσθήκη CSS (κάτω-κάτω) και εκεί κάνουμε επικόλληση τον εξής κώδικα:


ο κώδικας

Αν έχετε επικολλήσει κι άλλο κώδικα από προηγούμενη φορά, μην ανησυχείτε, απλά επικολλήστε τον καινούργιο από κάτω, χωρίς να σας ξεφύγει ούτε κόμμα!

Κάντε "Εφαρμογή στο ιστολόγιο" και απολαύστε το νέο σας look!

Χρώματα:

Τα χρώματα που έχω χρησιμοποιήσει όπως βλέπετε στο παράδειγμα είναι ροζ(pink) για το φόντο και κόκκινο(red) για το περίγραμμα. Εσείς φυσικά, μπορείτε να βάλετε ό,τι χρώματα θέλετε και ταιριάζουν στο blog σας. Μια τεράστια ποικιλία από χρώματα και τα ονόματά τους για να επιλέξετε, θα βρείτε εδώ. Το μόνο που έχετε να κάνετε είναι να αντικαταστήσετε το "pink" και το "red" στον κώδικα, με τα ονόματα των χρωμάτων που θέλετε.

Περίγραμμα:

Το περίγραμμα(border) είναι 1px και solid, δηλαδή κανονική συνεχόμενη γραμμή.
Αν το θέλετε πιο παχύ, αντικαταστήστε το 1px με υψηλότερες τιμές(πχ 2, 3 κλπ), αλλά μην το παρακάνετε!
Αν θέλετε να είναι διακεκομμένη γραμμή, αντικαταστήστε τη λέξη "solid" με τη λέξη "dashed".
Τέλος, αν θέλετε να αποτελείται από τελίτσες, αντί για "solid", γράψτε "dotted".
Πειραματιστείτε, δύσκολα μπορούν να γίνουν λάθη σε αυτό! Είναι απλά διασκέδαση!
Αν το μετανιώσετε αργότερα ή κάνετε λάθος και θέλετε να αρχίσετε από την αρχή, σβήστε τον κώδικα που μόλις προσθέσατε και πληκτρολογήστε Enter. Μετά, πάλι "Εφαρμογή στο ιστολόγιο".

Χρώμα κειμένου:

Μετά από τη σωστή παρατήρηση του φίλου blogger Νίκου, θα σας δείξω πώς να αλλάξετε και το χρώμα του κειμένου!
Εδώ έχω να πω ότι στην αρχική μας σελίδα, ή σε μια σελίδα όπου εμφανίζονται πολλές αναρτήσεις μαζί, ο τίτλος της ανάρτησής μας, θεωρείται σύνδεσμος, επομένως έχει τα χρώματα που έχουμε επιλέξει να έχουν οι σύνδεσμοί του blog μας.
Αν θέλουμε να αλλάξουμε το χρώμα του κειμένου του τίτλου όταν είναι σύνδεσμος, τότε κάνουμε επικόλληση τον παρακάτω κώδικα (εννοείται στη θέση του blue βάζουμε ό,τι θέλουμε).


Όταν η ανάρτησή μας είναι μόνη της στη σελίδα, συνήθως είναι προεπιλογή να έχει το χρώμα του κειμένου της ανάρτησης.
Αν θέλουμε να αλλάξουμε το χρώμα του κειμένου όταν είναι ανοιχτή η ανάρτησή μας (δηλαδή όταν δεν είναι σύνδεσμος αλλά απλό κείμενο),τότε κάνουμε επικόλληση τον παρακάτω κώδικα.


Εννοείται ότι μπορείτε να τα προσθέσετε και τα δυο, το ένα κάτω από το άλλο, όπως συνήθως:

Αν έχετε περισσότερες απορίες, Ρωτήστε με! Καλή διασκέδαση!

ΥΓ: Πώς σας φαίνεται το γιορτινό μου look;

14 σχόλια:

  1. Πολύ εντυπωσιακό Λίνα μου, το εφάρμοσα ήδη! Σ ΕΥΧΑΡΙΣΤΩ

    ΑπάντησηΔιαγραφή
  2. άμα δίνεις και άλλες πληροφορίες σίγουρα θα σε χρειαστώ! :D

    ΑπάντησηΔιαγραφή
  3. ΛΙΝΑΚΙ ΤΡΕΧΩ ΝΑ ΤΟ ΚΑΝΩ! ΤΕΛΕΙΟ ΤΟ ΓΙΟΡΤΙΝΟ ΣΟΥ ΛΟΥΚ! ΦΙΛΑΚΙΑ

    ΑπάντησηΔιαγραφή
  4. done!!!!
    Ευχαριστούμε Λίνα!!!
    φιλιά

    ΑπάντησηΔιαγραφή
  5. Τέλειο!!!! Πόσο πολύ σ΄ευχαριστώ για όλα όσα έχω μάθει από ΄σένα...!!!!!

    ΑπάντησηΔιαγραφή
  6. To γιορτινό σου λουκ είναι τέλειο Λινάκι μου! Ο santa τανασκελα πολύ super! Τρέχω να φτιάξω τους τίτλους! Πολύ μου άρεσε!!! φιλιά!

    ΑπάντησηΔιαγραφή
  7. Πολύ όμορφες και κατατοπειστικές ήταν όλες οι οδηγίες σου καλή μου Lina!Μόνο το χρώμα του τίτλου της ανάρτησης δεν ξέρω ν' αλλάξω, για να 'ναι εμφανής στο ιστολόγιο!Δε θυμάμαι πως γίνεται!Να 'σαι πάντα καλά που συνεχίζεις να με ξεστραβώνεις!χαχαχα!

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Νίκο μου, έχεις απόλυτο δίκιο, είναι απαραίτητο! Θα κάνω προσθήκη στην ίδια ανάρτηση!

      Διαγραφή
  8. Πολύ χρήσιμο, ευχαριστούμε!
    Και ωραίο και το γιορτινό look.
    Φιλάκια, καλό απόγευμα!

    ΑπάντησηΔιαγραφή
  9. Το γιορτινό σου look υπέροχο , Λίνα μου !!! Το blog σου είναι πραγματικός θησαυρός !!!!!!!

    ΑπάντησηΔιαγραφή
  10. Μας αρέσεις και εσύ με τις οδηγίες σου και το γιορτινό σου λουκ!!!
    Λίνα ζεις, εσύ μας οδηγείς:)))

    ΑπάντησηΔιαγραφή
  11. Δεν λειτουργεί σε μένα, δεν ξέρω γιατί :(

    ΑπάντησηΔιαγραφή
  12. πολυ ομορφο αλλα θελω να βαλω και την ημερομηνια στο κεντρο σαν εσενα πως να το κανω?

    ΑπάντησηΔιαγραφή