Изменение стиля оформления виджета "Популярные сообщения"

Изменила стиль оформления родного Blogger-овского виджета “Популярные сообщения”.
До изменения виджет выглядел так:

После добавления CSS виджет стал таким:

Стиль оформления изменила через:
 Дизайн → Дизайнер шаблонов → Дополнительно → Добавить CSS

Код позаимствовала в статье “Popular Posts v2 Widget customization” блога “All Blogger Tricks”.

/* Popular Post Customization by AllBloggerTricks.com */
.popular-posts ul li a {
background: none repeat scroll 0 0 #DDDDDD;
color: #444444;
display: block;
margin: 0 0 0.5em;
padding: 0.4em;
position: relative;
text-decoration: none;
transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:before {
background: none repeat scroll 0 0 #CCCCCC;
font-weight: 700;
height: 2em;
left: -2.5em;
line-height: 2em;
margin-top: -1em;
position: absolute;
text-align: center;
top: 50%;
width: 2em;
}
.popular-posts ul li a:after {
border: 0.5em solid transparent;
content: "";
left: -1em;
margin-top: -0.5em;
position: absolute;
top: 50%;
transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:hover {
background: none repeat scroll 0 0 #CCCCCC;
}
.popular-posts ul li a:hover:after {
border-left-color: #CCCCCC;
left: -0.5em;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before{content:"10"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before{content:"9"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before{content:"8"}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before{content:"7"}
.popular-posts ul li:first-child + li + li + li + li + li a:before{content:"6"}
.popular-posts ul li:first-child + li + li + li + li a:before{content:"5"}
.popular-posts ul li:first-child + li + li + li a:before{content:"4"}
.popular-posts ul li:first-child + li + li a:before{content:"3"}
.popular-posts ul li:first-child + li a:before{content:"2"}
.popular-posts ul li:first-child a:before{content:"1"}
/* Popular Post Customization by AllBloggerTricks.com */

Пояснения к коду:

#DDDDDD - цвет прямоугольных областей с заголовками сообщений
#CCCCCC - цвет квадратных областей с нумерацией сообщений
#444444 - цвет букв текста и цифр, а также цвет прямоугольных областей при наведении на них курсора мыши.

Перебрала несколько разных вариантов цвета, но остановилась только на изменении фона текста: вместо #DDDDDD прописала более светлый #EEEEEE.

Поделиться в соц. сетях: