красивый виджет популярных сообщений BLOGGER|шпаргалки блогерши

Всем, доброго времени суток. Хочу предложить вам сегодня поработать над дизайном гаджета популярные сообщения. Нам Блоггер предоставил такой , где отображаются самые читаемые посты блога. Можно с помощью стилей изменить его внешний вид. Так, чтобы было ни как у всех.

В этом сообщении было 5 вариантов виджета популярных сообщений. Загляните по ссылке, возможно ещё что - то подберёте. Этот гаджет, о котором сегодня идёт речь, с нумерацией постов. Отображает миниатюру и название сообщения. При наведении курсора появляется анонс. Ну и конечно, эффект анимации делает его более привлекательным. Посмотрите ниже.

Рабочий вариант на тестовом блоге

Демонстрация

Если решили применить его на своём блоге, сначала нужно просто установить родной гаджет Популярные сообщения, который можно выбрать в общем списке. Настройки сделать такие, как на фото ниже

Сейчас идём во вкладку Тема и находим строку ]]></b:skin>. Прямо над ней устанавливаем следующий код

.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0} .PopularPosts ul{list-style:none;font-family:'Oswald',Sans-Serif;font-size:13px;color:#919392;margin:.5em 0} .PopularPosts ul li img{display:block;width:70px;height:70px;float:left;margin:0 15px 0 0; border: 1px solid silver;padding: 2px;} .PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px} .PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-weight:700;font-size:13px;color:#919392;text-decoration:none;transition:.5s linear; font-family: Open Sans;} .PopularPosts ul li:before{content:counter(num);display:block;position:absolute;background-color:rgb(247, 73, 73);color:#fff;width:30px;height:28px;line-height:25px;text-align:center;bottom:0;right:0;margin-top:15px;transition:.5s linear; border-radius: 10%;font-size: 18px; padding: 5px;} .PopularPosts ul li:nth-child(1),.PopularPosts ul li:nth-child(2),.PopularPosts ul li:nth-child(3),.PopularPosts ul li:nth-child(4),.PopularPosts ul li:nth-child(5),.PopularPosts ul li:nth-child(6),.PopularPosts ul li:nth-child(7),.PopularPosts ul li:nth-child(8),.PopularPosts ul li:nth-child(9),.PopularPosts ul li:nth-child(10){background:#fff;color:#aaacab; border-bottom:1px solid #EFEFEF;transition:all .5s linear;} PopularPosts ul li:last-child{border-bottom:none;} .PopularPosts ul li:hover:nth-child(1),.PopularPosts ul li:hover:nth-child(2),.PopularPosts ul li:hover:nth-child(3),.PopularPosts ul li:hover:nth-child(4),.PopularPosts ul li:hover:nth-child(5),.PopularPosts ul li:hover:nth-child(6),.PopularPosts ul li:hover:nth-child(7),.PopularPosts ul li:hover:nth-child(8),.PopularPosts ul li:hover:nth-child(9),.PopularPosts ul li:hover:nth-child(10){background-color:#fafafa;transition:all .5s linear;} .PopularPosts ul li:hover .item-title a{color:#37B576;transition:all .5s linear;} .PopularPosts ul li:hover:before{background-color:#37B576;color:#fff;transition:all .5s linear;} .PopularPosts .item-thumbnail{float:left;margin:0 0 0 10px;} .PopularPosts ul li .item-snippet {display:none;visibility:hidden;opacity:0;font-size:11px;color:#383838;transition:all .5s linear; font-family: Open Sans;} .PopularPosts ul li:hover .item-snippet {display:block;visibility:visible;opacity:1;transition:all .5s linear;}

Не забудьте просмотреть и сохранить шаблон. Могу ещё предложить сделать эффект вращения миниатюр в гаджете популярных сообщений и прикольный анимированный виджет.

Выбора достаточно и на любой вкус. Сложного ничего нет, а уникальность гаджету можно любую создать, было бы желание.

Всем добра и до встречи.

👇

Получайте новые сообщения с блога прямо на почту