Изменить стиль виджета "Популярных статей" Блоггер
Виджет "Популярные сообщения" показывает список самых читаемых статей в блоге.
На Блоггере есть официальный виджет популярных постов. Найти его можно перейдя из Дизайна в Добавить гаджет → Популярные посты.
Если вам надоел или изначально не нравился однообразный стиль блоггеровского гаджета и у вас есть желание сменить его на что-то более интересное, то сделать это не трудно.
Об оформлении гаджета Популярных постов на блоге есть более ранние статьи.
Нашла в интернете на иностранном сайте (allbloggertricks.com) интересные изменения для этого гаджета. Они с анимированными деталями, что обращает на себя внимание посетителей блога. Этими кодами решила поделиться с вами.
Если у вас уже стоит гаджет, то перед тем, как менять оформление, проверьте включены ли в настройках показы миниатюры изображения и фрагмента текста.
Так же, если вы когда-то меняли внешний вид гаджета, то нужно удалить предыдущий код.
Добавляются оба виджета в шаблон. Тема → Изменить HTML, находим тег ]]></b:skin> и выше него добавляем выбранный код.
Виджет 1
Первый стиль — при наведении курсора появляется окошко с анонсом статьи.
.PopularPosts .widget-content ul li{padding:0;position:relative}.item-snippet {font-size: 90%;line-height: 1.2em;position: absolute;width: 230px;background-color: whiteSmoke;padding: 7px;border-top: 2px solid #FF0202;z-index: 2;left: 300px;top: 60%;height: 4.5em!important;visibility: hidden;opacity: 0;transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}.PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}.PopularPosts img{width:50px;height:50px}.PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%}
Красным в коде выделила цвет линии появляющегося окошка.
Зелёным — размеры картинок
Синим — цвет фона всплывающего окошка
Оранжевым — ширина всплывающего окошка
Розовым — ширина красной полоски всплывающего окошка
Голубым — шрифт
Виджет 2
Второй стиль — при наведении курсора, картинка и номер статьи вращаются, и появляется пунктирное подчёркивание.
.popular-posts ul { padding-left: 0px; counter-reset: trendingwidgets;}.popular-posts ul li:after { list-style-type: none; padding: 0.3em 10px ;border-radius: 10px 2px;counter-increment: trendingwidgets; content: counter(trendingwidgets); font-size: 16px; background: #292D30; color: #ffffff; font-weight: bold; font-family: georgia; border: 2px solid #dddddd; box-shadow: 1px 2px 9px #666666; position:relative;float: right;display:inline-block;top:-50px;transition: transform 2s;}.popular-posts ul li:hover:after{ transform: rotate(360deg);}.popular-posts ul li { border-bottom: 1px dashed #dddddd; }.popular-posts ul li:hover { border-bottom: 1px dashed #696969; }.popular-posts ul li a { text-decoration:none; color:#5A5F63; }.popular-posts ul li a:hover { text-decoration:none; }#PopularPosts1 .item-thumbnail {border: 1px dotted grey; width: 70px; height: 70px;padding:0px!important; border-radius: 10px 2px; transition: transform 2s;}#PopularPosts1 .item-thumbnail-only img{border-radius: 10px 2px; width:100%; height: 100%; padding: 0px!important;}#PopularPosts1 .item-thumbnail:hover{transform: rotate(360deg);}
Поменять можно:
Цвет кнопки с цифрой в коде отметила красным.
Цвет пунктирной линии — выделила оранжевым.
Синим — размер фото.
Комментарии со спамом удаляются.