ΕΓΧΡΩΜΟ ΣΤΥΛ ΓΙΑ ΤΙΣ ΔΗΜΟΦΙΛΕΙΣ ΑΝΑΡΤΗΣΕΙΣ

ΕΓΧΡΩΜΟ ΣΤΥΛ ΓΙΑ ΤΙΣ ΔΗΜΟΦΙΛΕΙΣ ΑΝΑΡΤΗΣΕΙΣ
Με τον παρακάτω κώδικα μπορείτε να διαμορφώσετε τις δημοφιλείς αναρτήσεις του blogger να εμφανίζονται μέσα σε έγχρωμα κουτιά και με διαφορετικό χρώμα για την κάθε μία δημοφιλή ανάρτηση. Ο κώδικας αυτός μπαίνει μέσα στο πρότυπο πρίν την ετικέτα ]]></b:skin> Μπορείτε να αλλάξετε τα χρώματα αλλάζοντας τους κωδικούς των χρωμάτων που προηγήται το σύμβολο της δίεσης #. Μπορείτε να αλλάξετε την γραμματοσειρά και το μέγεθός της αλλάζοντας το font:13px Arial; Και τέλος μπορείτε να στρογγυλέψετε τις γωνίες περισσότερο ή λιγότερο αν αυξομειώσετε το border-radius:5px;

/* --- POPULAR POSTS COLOR STYLE ----------------------*/

#PopularPosts1 ul{margin:0;padding:0;list-style-type:none}

#PopularPosts1 ul li{position:relative;margin-bottom:5px;margin-left:0px;border-radius:5px;padding:5px}

#PopularPosts1 ul li:first-child{background:#661111;width:auto;}

#PopularPosts1 ul li:first-child:after,

#PopularPosts1 ul li:first-child + li{background:#173377;width:auto;}

#PopularPosts1 ul li:first-child + li:after,

#PopularPosts1 ul li:first-child + li + li{background:#105105;width:auto;}

#PopularPosts1 ul li:first-child + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li{background:#740777;width:auto;}

#PopularPosts1 ul li:first-child + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li{background:#532000;width:auto;}

#PopularPosts1 ul li:first-child + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#333333;width:auto;}

#PopularPosts1 ul li:first-child + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#115599;width:auto;}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#A11111;width:auto;}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#621061;width:auto;}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li +li{background:#178058;width:auto;}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li + li:after,

#PopularPosts1 ul li:first-child:after,

#PopularPosts1 ul li:first-child + li:after,

#PopularPosts1 ul li:first-child + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,

#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin:0px;background:#transparent;padding:0;width:80px;height:80px;}

#PopularPosts1 ul li a{font:13px Arial;padding-left:4px;color:#FFFFFF;text-decoration:none}

#PopularPosts1 ul li a:hover{color:#33FFFF;text-decoration:none}

#PopularPosts1 img{border-radius: 5px;padding:0px;border:none;}

#PopularPosts1 img:hover {border-radius:5px;}