Add Background Color to Gadget Title with CSS - Blogger

Ένας απός και εύκολος τρόπος για να προσθέσουμε χρώμα στο φόντο των τίτλων Gadget στο Blogger μας για να το κάνετε πιο ευανάγνωστο και ωραίο, με την χρήση CSS !

Καλό θα είναι, αν δεν έχουμε εμπειρία, πριν να κάνουμε οποιαδήποτε αλλαγή στην HTML να κάνουμε Λήψη πλήρους προτύπου πατώντας Πρότυπο -Δημιουργία Αντιγράφου ασφαλείας για να μπορούμε να διορθώσουμε τυχόν λάθη που γίνουν.

Ανοίγουμε το Blogger μας και πατάμε με τη σειρά: 

Πρότυπο -» Προσαρμογή -» Προηγμένη -» Προσθήκη CSS.

Στον πίνακα που ανοίγει δεξιά κάνουμε αντιγραφή και επικόλληση τον παρακάτο μικρούλη κώδικα

  
.widget h2.title, .widget h2 
{ 
background-color: #cfe2f3; 
color: #000000; 
height:20px; 
}

Ότι είναι γραμμένο με μπλέ μπορούμε να το αλλάξουμε, έτσι ώστε να το προσαρμόσουμε στο blog μας. Πατάμε Εφαρμογή στο Ιστολόγιο εφόσον έχουμε τελειώσει.

Αν έχουμε μερικά Gadgets με τίτλο σε μία γραμμή και άλλα σε δύο, δοκιμάζουμε να αντικαταστήσουμε το  20px  με το  auto  .

Αν μετά από λίγο δεν εμφανίζεται ο κώδικας στον πίνακα που εμείς τον τοποθετείσαμε ενώ θέλουμε να τον επεξεργαστούμε μπορούμε εύκολα να τον βρούμε πατώντας: 

Πρότυπο -» Επεξεργασία HTML -» πατάμε Ctrl+F ταυτόχρονα, στη γραμμή αναζήτησης που εμφανίζεται τοποθετούμε με αντιγραφή και επικόλληση το

  
.widget h2.title, .widget h2 

και πατάμε Enter για να μεταφερθούμε στο σημείο του προτύπου που βρίσκεται.

Μπορούμε να βρούμε και να επιλέξουμε κωδικούς χρωμάτων στο http://eviou.blogspot.com/2011/05/html.html

Εφόσον έχουμε μια μικρή πείρα στην χρήση της CSS και HTML μπορούμε να αντικαταστήσουμε τον κωδικό του χρώματος με ένα Gradient Background που μπορούμε μόνοι να δημιουργήσουμε στο

  http://www.colorzilla.com/gradient-editor/