Μεταμορφώστε τις δημοφιλείς αναρτήσεις του blog σας!

Δώστε χρώμα στα popular post και κάντε να φαίνονται πιο ζωντανά! Σήμερα θα δούμε ένα τρόπο όπου θα εμφανίζονται οι δημοφιλείς αναρτήσεις τους blog σας χρωματιστές όπως φαίνονται στη διπλανή εικόνα.

Μπορείτε να το εφαρμόσετε στο blogger πολύ εύκολα ακολουθώντας τα πιο κάτω βήματα (πριν το βάλετε κρατήστε αντίγραφο ασφάλειας προτύπου για να το επαναφέρετε το πρότυπο σας σε περίπτωση λάθους/απροσεξίας ή αν θέλετε να το αφαιρέσετε)

1. Αφού συνδεθείτε στο λογαριασμό σας
2. Επιλέγετε από τις ρυθμίσεις του blog "Πρότυπο"
3. Επεξεργασία HTML
4. Πατάτε CTRL + F και ψάχνετε να βρείτε "]]></b:skin>"
5. Όταν το βρείτε αντιγράψετε τον πιο κάτω κώδικα και επικολλήστε τον από πάνω του

#PopularPosts5 ul li:hover{ background-color: #ffffff; } #PopularPosts1 ul li{border-bottom:2px dotted #999999;} #PopularPosts1 ul li .item-thumbnail{-webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } #PopularPosts1 ul li .item-thumbnail:hover{ -webkit-transform: rotate(-17deg); -moz-transform: rotate(-17deg); -o-transform: rotate(-17deg); } #PopularPosts1 ul li .item-title {color:#fff;} #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:5px 0;border-bottom:1px dashed #ffffff;padding:10px} #PopularPosts1 ul li:first-child{background:#eb1f0a;width:90%} #PopularPosts1 ul li:first-child:after{} #PopularPosts1 ul li:first-child + li{background:#0ddb25;width:90%} #PopularPosts1 ul li:first-child + li:after{} #PopularPosts1 ul li:first-child + li + li{background:#0d6edb;width:90%} #PopularPosts1 ul li:first-child + li + li:after {} #PopularPosts1 ul li:first-child + li + li + li{background:#eeac0f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{} #PopularPosts1 ul li:first-child + li + li + li + li{background:#7d0fee;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{} #PopularPosts1 ul li:first-child + li + li + li + li + li{background:#e30d31;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{} #PopularPosts1 ul li:first-child + li + li + li + li + li + li{background:#eb1f0a;width:90%} #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:#0ddb25;width:90%} #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:#0d6edb;width:90%} #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:#eeac0f;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px; border-radius: 5px; border: 2px solid #ffffff;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);box-shadow: 0 1px 2px rgba(0, 0, 0, .4);} #PopularPosts1 ul li a{font-size:12px;color:#fff;text-decoration:none} #PopularPosts1 ul li a:hover{color:#e3dede;text-decoration:none} #PopularPosts1 { margin-left: 20px; } #PopularPosts1 h2 {color:white; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTmyG-zsm5m__-xSmn1eFCcMA0WFGZB84I8wg8v1unK5VjKMM1udWvnMHufoIxx8cCJ8P8CSQmUD_arIfsq-TOVuO2sSVq0DrqZdh3rW_1MkVORPWXwWH1YQz9h6KrbLviHWrBnHRTjE/h51/dimofilis-anartisis.png) no-repeat; height:30px; width: 287px; margin-left:-5px; padding-top:10px; font-size:18px; text-align: center; }